原生JS代码编写网页版俄罗斯方块小游戏——方块旋转

xiaoxiao2021-02-28  47

原理部分:

旋转方法是根据方块的数据结构来确定的。一个俄罗斯方块是由四个小方块在平面上组合得到的。

法一:一维数组旋转(本人使用方法)

使用长度为16或长度为9的一维数组来表示。由于长度固定,可以提前预设旋转目标位置。

var a = [0,1,2, 3,4,5, 6,7,8]; //顺时针旋转,将a每个index旋转后对应内容的原始index存储为b var b = [6,3,0, 7,4,1, 8,5,2]; var new_a = new Array(9); for(var i = 0; i < new_a.length; i++) { new_a[i] = a[b[i]]; } ---------- 输出:new_a = [6,3,0, 7,4,1, 8,5,2];

法二:一维坐标对象数组旋转

另一种数据结构是一个长度为4的一维数组。数组内容为小方块的坐标对象。这种数据结构的旋转是使用了向量旋转的算法。 参考:http://blog.csdn.net/sunxing007/article/details/3331396 https://www.lyblog.net/detail/172.html

法三:二维矩阵旋转

很容易想到使用宽高均为4的二维数组来表示。1表示该小方块填充颜色,0表示不填充。这种数据结构的旋转,其实就是矩阵的旋转。使用矩阵的旋转算法即可。

代码部分

法一代码(本人使用的方法):

function generateBlock(){ var block = new Array(); var num = Math.floor(Math.random()*7); switch(num) { case 0: block = [1,1,1,1, 0,0,0,0, 0,0,0,0, 0,0,0,0]; break; case 1: block = [1,0,0, 1,0,0, 1,1,0]; break; case 2: block = [0,1,0, 0,1,0, 1,1,0]; break; case 3: block = [0,1,0, 1,1,1, 0,0,0]; break; case 4: block = [1,1,0, 1,1,0, 0,0,0]; break; case 5: block = [0,1,1, 1,1,0, 0,0,0]; break; case 6: block = [1,1,0, 0,1,1, 0,0,0]; break; } return block; } //旋转 function rotate() { eraseActiveBlock(); var temp = activeBlock; if(activeBlock.length == 16) { var tempBlock = [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,0,0]; if(activeBlock.toString() == tempBlock.toString()) { activeBlock = [1,1,1,1, 0,0,0,0, 0,0,0,0, 0,0,0,0]; }else{ activeBlock = tempBlock; } //非长条型,矩阵逆时针旋转 }else { var tempBlock = [6,3,0, 7,4,1, 8,5,2]; var tempBlock2 = new Array(); for(var i = 0; i < 9; i++) { tempBlock2[i] = activeBlock[tempBlock[i]]; } activeBlock = tempBlock2; } if(validateBlock()) { paintActiveBlock(); }else { activeBlock = temp; paintActiveBlock(); } }

法二代码:

//生产方块形状, 有7种基本形状. function generateBlock(){ var block = new Array(4); //generate a random int number between 0-6; var t = (Math.floor(Math.random()*20)+1)%7; switch(t){ case 0:{ block[0] = {x:0, y:4}; block[1] = {x:1, y:4}; block[2] = {x:0, y:5}; block[3] = {x:1, y:5}; break; } case 1:{ block[0] = {x:0, y:3}; block[1] = {x:0, y:4}; block[2] = {x:0, y:5}; block[3] = {x:0, y:6}; break; } case 2:{ block[0] = {x:0, y:5}; block[1] = {x:1, y:4}; block[2] = {x:1, y:5}; block[3] = {x:2, y:4}; break; } case 3:{ block[0] = {x:0, y:4}; block[1] = {x:1, y:4}; block[2] = {x:1, y:5}; block[3] = {x:2, y:5}; break; } case 4:{ block[0] = {x:0, y:4}; block[1] = {x:1, y:4}; block[2] = {x:1, y:5}; block[3] = {x:1, y:6}; break; } case 5:{ block[0] = {x:0, y:4}; block[1] = {x:1, y:4}; block[2] = {x:2, y:4}; block[3] = {x:2, y:5}; break; } case 6:{ block[0] = {x:0, y:5}; block[1] = {x:1, y:4}; block[2] = {x:1, y:5}; block[3] = {x:1, y:6}; break; } } return block; } //旋转, 因为旋转之后可能会有方格覆盖已有的方格. //先用一个tmpBlock,把activeBlock的内容都拷贝到tmpBlock, //对tmpBlock尝试旋转, 如果旋转后检测发现没有方格产生冲突,则 //把旋转后的tmpBlock的值给activeBlock. function rotate(){ var tmpBlock = copyBlock(activeBlock); //先算四个点的中心点,则这四个点围绕中心旋转90度。 var cx = Math.round((tmpBlock[0].x + tmpBlock[1].x + tmpBlock[2].x + tmpBlock[3].x)/4); var cy = Math.round((tmpBlock[0].y + tmpBlock[1].y + tmpBlock[2].y + tmpBlock[3].y)/4); //旋转的主要算法. 可以这样分解来理解。 //先假设围绕源点旋转。然后再加上中心点的坐标。 for(var i=0; i<4; i++){ tmpBlock[i].x = cx+cy-activeBlock[i].y; tmpBlock[i].y = cy-cx+activeBlock[i].x; } //检查旋转后方格是否合法. for(var i=0; i<4; i++){ if(!isCellValid(tmpBlock[i].x,tmpBlock[i].y)){ return; } } //如果合法, 擦除 erase(); //对activeBlock重新赋值. for(var i=0; i<4; i++){ activeBlock[i].x = tmpBlock[i].x; activeBlock[i].y = tmpBlock[i].y; } //重画. paint(); }

截自:http://blog.csdn.net/sunxing007/article/details/3331396

俄罗斯方块原生JS代码下载地址

http://download.csdn.net/detail/wutingyehe/9835400

转载请注明原文地址: https://www.6miu.com/read-77641.html

最新回复(0)