js 俄罗斯方块源码,简单易懂
2017-01-13 15:46 muamaker 阅读(2809) 评论(0) 编辑 收藏 举报1、自己引入jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 400px; height: 600px; margin: 20px auto; border: 5px solid yellowgreen; } .row{ height: 20px; width: 100%; } .row div{ width: 18px; height: 18px; border: 1px solid transparent; float: left; } .row .active{ background: red; border: 1px solid #ccc; } .row .butte{ background: goldenrod; border: 1px solid #FF0000; } </style> </head> <body> <div class="box"> </div> </body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var $box = $(".box"); var $row = null; var $dataArr = []; var timer = null; var gameRun = true; var config = [ [ {x:0, y:4}, {x:1, y:4}, {x:0, y:5}, {x:1, y:5} ], [ {x:0, y:3}, {x:0, y:4}, {x:0, y:5}, {x:0, y:6} ], [ {x:0, y:5}, {x:1, y:4}, {x:1, y:5}, {x:2, y:4} ], [ {x:0, y:4}, {x:1, y:4}, {x:1, y:5}, {x:2, y:5} ], [ {x:0, y:4}, {x:1, y:4}, {x:1, y:5}, {x:1, y:6} ], [ {x:0, y:4}, {x:1, y:4}, {x:2, y:4}, {x:2, y:5} ], [ {x:0, y:5}, {x:1, y:4}, {x:1, y:5}, {x:1, y:6} ] ]; var $bullet = [ {x:0, y:3}, {x:0, y:4}, {x:0, y:5}, {x:0, y:6} ]; var $dowm = [ ]; for(var i = 0 ; i < 30; i++){ $box.append("<div class='row'></div>"); var temp = []; for(var j = 0; j < 20; j++){ $box.find(".row").last().append("<div></div>"); temp.push(0); } $dataArr.push(temp); } $row = $(".row"); dataTemp(); function dataTemp(){ for(var i = 0; i < 30; i++){ for(var j = 0; j < 20; j++){ if($dataArr[i][j] == 1){ $dataArr[i][j] = 0; } } } for(var i = 0; i < $bullet.length;i++){ $dataArr[$bullet[i].x][$bullet[i].y] = 1; //正在下落的dom } /*for(var i = 0;i< $dowm.length ;i++ ){ $dataArr[$dowm[i].x][$dowm[i].y] = 2; //已经下来的dom }*/ layout(); }; function layout(){ for(var i = 0; i < 30; i++){ for(var j = 0; j < 20; j++){ if($dataArr[i][j] == 0){ $row.eq(i).find("div").eq(j)[0].className = ""; }else if($dataArr[i][j] == 1){ $row.eq(i).find("div").eq(j)[0].className = "active"; }else if($dataArr[i][j] == 2){ $row.eq(i).find("div").eq(j)[0].className = "butte"; } } } }; $(window).on("keydown", function(event) { if(gameRun){ switch(event.key) { case "w": rotate(); break; case "s": moveToDown(); break; case "a": leftRight(-1); break; case "d": leftRight(1); break; default: break; } } }); function rotate(){ var tmpBlock = new Array(4); for(var i=0; i<4; i++){ tmpBlock[i] = {x:0, y:0}; } //先算四个点的中心点,则这四个点围绕中心旋转90度。 var cx = Math.round(($bullet[0].x + $bullet[1].x + $bullet[2].x + $bullet[3].x)/4); var cy = Math.round(($bullet[0].y + $bullet[1].y + $bullet[2].y + $bullet[3].y)/4); //旋转的主要算法. 可以这样分解来理解。 //先假设围绕源点旋转。然后再加上中心点的坐标。 for(var i=0; i<4; i++){ tmpBlock[i].x = cx+cy-$bullet[i].y; tmpBlock[i].y = cy-cx+$bullet[i].x; } if(judegBorder(tmpBlock)){ for(var i=0; i<4; i++){ $bullet[i].x = tmpBlock[i].x; $bullet[i].y = tmpBlock[i].y; } } dataTemp(); } function move(x){ for(var i = 0; i < $bullet.length; i++ ){ $bullet[i].x = $bullet[i].x + x; } if(! judegBorder($bullet)){ clearInterval(timer); createSqure(); return; } dataTemp(); } //判断是否越界,越界了,则返回false function judegBorder(obj){ var flag = true; for(var i = 0; i < obj.length ; i++){ if(obj[i].x >= 30 || obj[i].x < 0 || obj[i].y >= 20 || obj[i].y < 0){ flag = false; return false; } if($dataArr[obj[i].x][obj[i].y] == 2){ flag = false; return false; } } return flag; } timer=setInterval(function(){ move(1); },1000); function createSqure(){ var obj = []; //记录停下的 for(var i = 0; i < 4; i++){ obj.push({x:$bullet[i].x-1,y:$bullet[i].y}); $dataArr[$bullet[i].x-1][$bullet[i].y] = 2; } //消除可以消除的 trimp(obj); layout(); var randNum =Math.floor(Math.random() * config.length); //判断是否到顶,没有则添加 for(var i=0; i<4; i++){ if($dataArr[config[randNum][i].x][config[randNum][i].y] == 2){ gameRun = false; alert("Game Over!"); return; } $bullet[i] = {x:config[randNum][i].x, y:config[randNum][i].y}; } dataTemp(); timer=setInterval(function(){ move(1); },500); } function leftRight(num){ var tmpBlock = new Array(4); for(var i=0; i<4; i++){ tmpBlock[i] = {x:$bullet[i].x, y:$bullet[i].y}; } for(var i = 0; i < tmpBlock.length; i++ ){ tmpBlock[i].y = tmpBlock[i].y + num; } if(judegBorder(tmpBlock)){ for(var i = 0; i < tmpBlock.length; i++ ){ $bullet[i].y = tmpBlock[i].y; } } dataTemp(); } function moveToDown(){ var tmpBlock = new Array(4); for(var i=0; i<4; i++){ tmpBlock[i] = {x:$bullet[i].x, y:$bullet[i].y}; } for(var i = 0; i < tmpBlock.length; i++ ){ tmpBlock[i].x = tmpBlock[i].x + 1; } if(judegBorder(tmpBlock)){ for(var i = 0; i < tmpBlock.length; i++ ){ $bullet[i].x = tmpBlock[i].x; } } dataTemp(); } function trimp(obj){ for(var i = 0; i < obj.length;i++){ var flag = true; for(var j = 0; j < 20; j++){ if($dataArr[obj[i].x][j] != 2){ flag = false; } } if(flag){ //需要消除 for(var j = 0; j < 20; j++){ $dataArr[obj[i].x][j] = 0; } //下面的被消除,往下掉 for(var x = obj[i].x ; x >= 0 ; x--){ for(var y = 0; y < 20;y++){ if($dataArr[x][y] == 2){ $dataArr[x][y] = 0; $dataArr[x+1][y] = 2; } } } i--; } } } </script> </html>