web练手--彩色方块下落动画

动画过程：

最终效果如下：

直接上代码：

index.html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Cube</title>
</head>
<body>
<script src="gameobject.js"></script>
<script>var m = new Map(35, 75, "m1");setInterval(updateM,33);function updateM() {m.createRandomCube();m.cubeDown();//this.findIsFull();m.clearCanvas();m.drawMap();}
</script></body>
</html>

gameobject.js：

///全局变量//var color = ["#FFFFFF", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"];//函数///
function $(id) {return document.getElementById(id);
}function set2DArray(r, l) {var  arr = [];for(var i = 0; i < r; i++){var tempArr = [];for(var j = 0; j < l; j++)tempArr.push(0);arr.push(tempArr);}return arr;
}function createCanvas(r, l, name) {var w = l * 20;var h = r * 20;document.write("<canvas id='" + name + "' width = '" + w + "' height = '" + h + "' style='border: solid'>请升级浏览器</canvas>");return $(name);
}var clone = function (initData) {  //深拷贝if(typeof initData !== "Object")return initData;var targetData = initData.constructor === Array ? [] : {};for(var key in initData){targetData[key] = typeof initData[key] === "Object" ? clone(initData[key]) : initData[key];}return targetData;
}function rnd(n, m){var random = Math.floor(Math.random()*(m-n+1)+n);return random;
}//地图类
//var Map = function (r, l, name) {this.r = r;this.l = l;this.name = name;this.map = set2DArray(this.r, this.l);this.canvas = createCanvas(this.r, this.l, this.name);this.context = this.canvas.getContext("2d");
}Map.prototype.drawMap = function () {for(var i = 0; i<this.r; i++){for(var j = 0; j<this.l; j++){this.context.fillStyle = color[this.map[i][j]];this.context.fillRect(j*20, i*20, 20, 20);}}
}Map.prototype.cubeDown = function () {for(var i = this.r-1; i >= 0 ; i--){for(var j = this.l-1; j >= 0; j--){if(this.map[i][j] == 0 || i+1 >= this.r)continue;if(this.map[i+1][j] == 0){this.map[i+1][j] = this.map[i][j];this.map[i][j] = 0;}}}
}Map.prototype.clearCanvas = function () {this.context.clearRect(0, 0, this.l*20, this.r*20);
}Map.prototype.createRandomCube = function () {var a = rnd(0,this.l-1);var b = rnd(1,6);if(this.map[0][a] == 0)this.map[0][a] = b;
}//

思路详述：

我把画布分成了10*10的小像素块，每个小像素块存入二维数组map中，map中的值储存的是这个方块的颜色，值为0时表示方块为空，也就是白色，每一帧都清空画布并调用函数drawMap()来绘制图形，以此实现动画。

web练手--彩色方块下落动画相关推荐

html代码特效粒子,html5彩色方块粒子动画效果代码
特效描述:html5 彩色方块粒子动画效果.粒子动画代码结构 1. HTML代码 var df = document.createDocumentFragment(); var container ...
css3彩色方块loading动画js特效
下载地址 css3彩色方块loading动画加载中特效 dd:
web练手--抽卡模拟器（1）
抽卡手游玩多了,心血来潮写个抽卡模拟器,卡等级分sss,ss,s,a,b,c六种,sss概率为0.01%,ss概率为0.1%,s概率为1%,a概率为15%,b概率为30%,剩余都为c,为了避免长期呆在 ...
有什么值得推荐的Java Web练手项目？
https://www.zhihu.com/question/29444491 转载于:https://www.cnblogs.com/jrsflak/p/7880849.html
html带颜色方块,HTML5 彩色方块组合动画
CSS 语言: CSSSCSS 确定 body { background: #34495e; } .tiles { position: absolute; left: 0; top: 0; right ...
web前端布局练手项目
仿北大首页布局(只关心布局) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
70个Python练手项目列表预祝大家快乐
小孩眺望远方,成人怀念故乡. 为此给大家分享一下珍藏的Python实战项目,祝大家节日快乐哦!!! Python 前言:不管学习哪门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦,不用多说 ...
c++小项目_编程初学者的练手小项目（Pythonamp;C/C++）
老是有一些刚接触编程的小伙伴问,怎么样才能快速提高编程能力?"一切不写代码的学编程,都是瞎搞!",想要提高编程能力,当然是写代码.写代码.写代码.在不断做项目的过程中,加强基础语法 ...
学前端编程还没有做过项目？30个入门练手项目，你get了么？
不管我们要学习什么其实都是希望让自己做出"实际的东西"出,这个实际"实际的东西"其实说的就是做个项目,这不用多说大家都懂得. 这里小编我整理了30个web前端实 ...

web练手--彩色方块下落动画

动画过程：

最终效果如下：

直接上代码：

思路详述：

web练手--彩色方块下落动画相关推荐

最新文章

热门文章