我最近因为做了几个小游戏，用到了二维数组，其中有需求将这个二维数组正翻转 90°，-90°，180°。

本人是笨人，写下了存起来。

定义的基本二位数组渲染出来是这种效果。

现在想实现的结果是下面的效果：

当然可以让div用position定位，left和top调整。

但是我就想改变数组的话，我的笨办法：用两重for循环，重新创建一个数组。

规律是：向右转90°时候， i （列）变成j（行）后 将所在行的位置倒过来 ，j变成 i不变，很难表述，一看代码便知。

同理：向左旋转时候，列和行交换，但是交换后，将列倒过来。

转180度，行不变，列倒过来。

270度。等于先转180度再转90度。或者原来行变列后，将这个新列倒过来，    原来的列变成行；

不贴图了，意思到了就能做出来了。重点就是行和列的交换

用js实现二维数组的旋转的更多相关文章

  1. C#/JS 获取二维数组组合

    C#获取二维数组组合 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...

  2. JS的二维数组

    今天,记录一下JS的二位数组,并附上例题. 一.二维数组的本质:数组中的元素又是数组. 其实,我们都见过这样的二维数组,只不过没在意罢了,例如: var arr = [[1,2,4,6],[2,4,7 ...

  3. js 将二维数组转为一维数组

    方法一 使用ES的最新语法:Array.prototype.flat(). flat([dept]),参数 dept 为数组的深度,默认为1,根据传入的深度将数组展开. 对于不确定深度的数组,可以传入 ...

  4. js 输出二维数组的最大值

    function num(arr){ max=a[0][0]; for (var i = 0; i < a.length; i++) { for (var j = 0; j< a[i].l ...

  5. js输出二维数组最长的子数组

    ,,],[,,,],[,,,,]]; ].length; ; i < a.length; i++) { if (max<a[i].length) { max=a[i].length; va ...

  6. JS遍历二维数组

    //求平均数 var pjs=[ ['小明',87], ['小红',81], ['小花',97], ['小天',76], ['小张',74], ['小小',94], ['小西',90], ['小武', ...

  7. js 如何生成二维数组

    想了几种方法都不能很好的,用js定义二维数组.这种定义,指的是:定义按需确认数组大小. 网上看了下,都是用for循环创建,大小必须提前设定.不是我想要的.(感觉不能和php一样,真是麻烦!) 先贴出代 ...

  8. php 二维数组传递给 js 问题解决记录

    需求: php从数据库中读取到二维数组.传递到js中 实现步骤: php:json_encode  →   json  →  js:eval 即在php中使用json_encode()将php的二维数 ...

  9. day4 二维数组旋转90度

    二维数组的旋转其实就是数组里面的元素对调的情况:下面有一个4×4的二维数组,[[0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3]],现在要求把 ...

随机推荐

  1. ASP.NET C# 实现钉钉签名算法

    在 https://open-doc.dingtalk.com/microapp/faquestions/hxs5v9 钉钉给出了JAVA/PHP算法,下面是C#算法 using System.Sec ...

  2. windows Docker Desktop 搭建mysql,mssql和redis服务

    其实网上关于docker上搭建mysql的文章已经很多了,只是今晚自己搭建的时候遇到一些问题,记录一下 1.首先是pull image , docker pull mysql 2.启动服务 docke ...

  3. 如何在一小时内更新100篇文章？-Evernote Sync插件介绍

    上一篇"手把手教你制作微信小程序,开源.免费.快速搞定",已经教会你如何快速制作一个小程序,但作为资讯类小程序,内容不可少,并且还需要及时更新. 但是,如果让你复制粘贴,可能还需要 ...

  4. wpf 控件添加背景图片

    方法一,xaml中: <控件> <控件.Background> <ImageBrush ImageSource="/WpfApplication1;compon ...

  5. [Python设计模式] 第19章 分公司=部门?——组合模式

    github地址:https://github.com/cheesezh/python_design_patterns 组合模式 组合模式,将对象组合成树形结构以表示"部分-整体" ...

  6. grid - 隐式地命名网格区域名称

    通常可以将网格线命名成任何你想命名的名称,如果网格线名称添加-start和-end的后缀,其实也隐式的创建一个网格区域,可以用来设置网格项目的位置. 在这个示例中,行和列都具有inner-start和 ...

  7. Install Redis 3.2 on Ubuntu

    Install Redis 3.2 on Ubuntu It’s very easy to install Redis 3 on Ubuntu 16, just need to add PPA rep ...

  8. 为github公开项目单独设置用户名

    背景: 由于在公司git的配置是公司内自己的用户id及邮箱,如果用同样的配置在github上提交公开项目,可能造成用户名及邮箱泄露,因此对于github上的项目,最好单独设置用户名,而每次在向gith ...

  9. 基于Kafka的生产者消费者消息处理本地调试

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/68174111冷血之心的博客) Kafka下载地址:http://d ...

  10. cx_Oracle读写clob

    cx_Oracle读写clob 读 读到相应字段后,使用read()方法即可:例如读取到clob对象a,想要查看其内容,使用下列代码即可: a.read() 写 参考下列代码: id='123' cl ...