canvas 俄罗斯方块
Posted aaronchu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 俄罗斯方块相关的知识，希望对你有一定的参考价值。
<!doctype html> <html> <body> <canvas id="can" width="360px" height="630px" style="display: block;margin: 0 auto;"></canvas> <script> ctx=document.getElementById("can").getContext("2d"); ctx.fillStyle=‘black‘; ctx.fillRect(30,0,300,600); //保存键盘对应的function var key={"38":"bian()","40":"down()","37":"move(-1)","39":"move(1)"}; //整个地图 var hh=eval("["+"1,"+new Array(11).join("0,")+"1]"); var gg=eval("["+new Array(12).join("1,")+"1]"); var map=new Array(21); for(var i=0;i<20;i++) map[i]=hh.slice(0); map[20]=gg; //canvas填充 function ff(x,y,c){ x=x*30;y=y*30; ctx.fillStyle=c; ctx.fillRect(x,y,28,28); } //随机产生方块 function tatris(){ var block = new Array(4); var ss= ~~(Math.random()*7); switch(ss){ case 0:{ block[0] = {x:5, y:0}; block[1] = {x:5, y:1}; block[2] = {x:6, y:0}; block[3] = {x:6, y:1}; break; } case 1:{ block[0] = {x:4, y:0}; block[1] = {x:5, y:0}; block[2] = {x:6, y:0}; block[3] = {x:7, y:0}; break; } case 2:{ block[0] = {x:6, y:0}; block[1] = {x:5, y:1}; block[2] = {x:6, y:1}; block[3] = {x:5, y:2}; break; } case 3:{ block[0] = {x:5, y:0}; block[1] = {x:5, y:1}; block[2] = {x:6, y:1}; block[3] = {x:6, y:2}; break; } case 4:{ block[0] = {x:5, y:0}; block[1] = {x:5, y:1}; block[2] = {x:6, y:1}; block[3] = {x:7, y:1}; break; } case 5:{ block[0] = {x:5, y:0}; block[1] = {x:5, y:1}; block[2] = {x:5, y:2}; block[3] = {x:6, y:2}; break; } case 6:{ block[0] = {x:6, y:0}; block[1] = {x:5, y:1}; block[2] = {x:6, y:1}; block[3] = {x:7, y:1}; break; } } return block; } //键盘function document.onkeydown=function(e){ eval(key[(e?e:event).keyCode]); } //移动 function move(t){ for(var i=0;i<4;i++) lcblock[i].x = lcblock[i].x+t; if(pan()) return; xuan1(); llblock=copyBlock(lcblock); } //旋转变换 function bian(){ var temp=copyBlock(lcblock); var x1=Math.round((lcblock[0].x+lcblock[1].x+lcblock[2].x+lcblock[3].x)/4); var y1=Math.round((lcblock[0].y+lcblock[1].y+lcblock[2].y+lcblock[3].y)/4); for(var i=0;i<4;i++){ lcblock[i].x = -y1+x1+temp[i].y; lcblock[i].y = y1-temp[i].x+x1; } if(pan()) return; xuan1(); llblock=copyBlock(lcblock); } //检测是否重合 function pan(){ for(var i=0;i<4;i++) if(map[lcblock[i].y][lcblock[i].x]==1||lcblock[i].y<0) return lcblock=copyBlock(llblock); } //gameover function over(){ clearInterval(run); alert("game ovar!"); } //下落 function down(){ for(var i=0;i<4;i++)//下落 lcblock[i].y++; if(pan()){ for(var g=0;g<4;g++) map[lcblock[g].y][lcblock[g].x]=1;//重塑map地图 for(var k=0;k<20;k++){ //消行 for(var j=0;j<12;j++) if(map[k][j]==0) break; if(j==12){ map.splice(k,1); map.unshift(hh.slice(0)); } } for(var nn=0;nn<12;nn++) if(map[1][nn]!=hh[nn]) break; if(nn!=12) return over(); start(); } else{ xuan1(); llblock=copyBlock(lcblock); } } //备份 function copyBlock(old){ var o = new Array(4); for(var i=0; i<4; i++) o[i] = {x:0, y:0}; for(var i=0; i<4; i++){ o[i].x = old[i].x; o[i].y = old[i].y; } return o; } //渲染整个map地图 function xuan(){ ctx.fillStyle=‘black‘; ctx.fillRect(30,0,300,600); for(var i=0;i<20;i++) for(var j=1;j<=10;j++) if(map[i][j]==1) ff(j,i,‘Lime‘); } //渲染方块 function xuan1(){ for(var i=0;i<4;i++) ff(llblock[i].x,llblock[i].y,‘black‘); for(var i=0;i<4;i++) ff(lcblock[i].x,lcblock[i].y,‘Lime‘); } //开始 function start(){ lcblock=tatris(); llblock=copyBlock(lcblock); xuan(); xuan1(); } start(); run=setInterval("down()",600); </script> </body> </html>
以上是关于canvas 俄罗斯方块的主要内容，如果未能解决你的问题，请参考以下文章