代码:
<!Doctype html> <html lang="zh_cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>俄罗斯方块</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> </head> <body> <canvas id="myCanvas" width="600" height="600" style="border:1px solid #FF0000;bgcolor:#FF0000;"> </canvas> <script> var margin = 30; var pading = 3; var maxLineNum = 25; var maxFieldNum = 25; var score = 0; var myCanvas = document.getElementById("myCanvas"); var page_width = window.innerWidth; var page_height = window.innerHeight; //console.log("页面尺寸:宽:"+page_width+",高:"+page_height); var paint_width = page_width - 2 * margin; var paint_height = page_height - 2 * margin; myCanvas.width = paint_width; myCanvas.height = paint_height; //console.log("画布尺寸:宽:"+paint_width+",高:"+paint_height); var left_width = paint_height - 2 * pading; var left_height = paint_height - 2 * pading; var right_width = paint_width - 2 * pading - left_width; var right_height = paint_height - 2 * pading; var perWidth = left_width / maxFieldNum; var perHeight = left_height / maxLineNum; var pieceNow = createRandPiece(); var pieceWill = createRandPiece(); var nowStatus = 0; var jileiList = new Array(); function getT(){ var mystartx = maxFieldNum % 2 == 1 ? (maxFieldNum-1) / 2 : maxFieldNum / 2; var mystarty = 0; var color = "rgb("+getRandomInt(1, 255)+","+getRandomInt(1, 255)+","+getRandomInt(1, 255)+")"; var piecesList = new Array(); //状态0 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp1.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp2.x; tmp4.y = tmp2.y+1; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp4.x; tmp5.y = tmp4.y+1; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); //状态1 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty+1; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp1.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y-1; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp3.x; tmp5.y = tmp3.y+1; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); //状态2 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x-1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp3.x+1; tmp5.y = tmp3.y; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); //状态3 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp2.x+1; tmp4.y = tmp2.y; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp4.x+1; tmp5.y = tmp4.y; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); return piecesList; } function getL(){ var mystartx = maxFieldNum % 2 == 1 ? (maxFieldNum-1) / 2 : maxFieldNum / 2; var mystarty = 0; var color = "rgb("+getRandomInt(1, 255)+","+getRandomInt(1, 255)+","+getRandomInt(1, 255)+")"; var piecesList = new Array(); //状态0 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x+1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态1 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x-1; tmp3.y = tmp1.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态2 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态3 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty+1; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp2.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y-1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); return piecesList; } function getJ(){ var mystartx = maxFieldNum % 2 == 1 ? (maxFieldNum-1) / 2 : maxFieldNum / 2; var mystarty = 0; var color = "rgb("+getRandomInt(1, 255)+","+getRandomInt(1, 255)+","+getRandomInt(1, 255)+")"; var piecesList = new Array(); //状态0 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x-1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态1 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp2.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x+1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态2 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x; tmp3.y = tmp1.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态3 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp2.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); return piecesList; } function getZ(){ var mystartx = maxFieldNum % 2 == 1 ? (maxFieldNum-1) / 2 : maxFieldNum / 2; var mystarty = 0; var color = "rgb("+getRandomInt(1, 255)+","+getRandomInt(1, 255)+","+getRandomInt(1, 255)+")"; var piecesList = new Array(); //状态0 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp4.x+1; tmp5.y = tmp4.y; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); //状态1 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty+1; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x+1; tmp3.y = tmp1.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x+1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp4.x; tmp5.y = tmp4.y-1; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); //状态2 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp4.x+1; tmp5.y = tmp4.y; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); //状态3 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty+1; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x+1; tmp3.y = tmp1.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x+1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); var tmp5 = new Object(); tmp5.x = tmp4.x; tmp5.y = tmp4.y-1; tmp5.color = color; pieces.push(tmp5); piecesList.push(pieces); return piecesList; } function getS(){ var mystartx = maxFieldNum % 2 == 1 ? (maxFieldNum-1) / 2 : maxFieldNum / 2; var mystarty = 0; var color = "rgb("+getRandomInt(1, 255)+","+getRandomInt(1, 255)+","+getRandomInt(1, 255)+")"; var piecesList = new Array(); //状态0 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x; tmp3.y = tmp1.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x-1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态1 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp2.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态2 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x; tmp3.y = tmp1.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x-1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态3 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp2.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); return piecesList; } function getO(){ var mystartx = maxFieldNum % 2 == 1 ? (maxFieldNum-1) / 2 : maxFieldNum / 2; var mystarty = 0; var color = "rgb("+getRandomInt(1, 255)+","+getRandomInt(1, 255)+","+getRandomInt(1, 255)+")"; var piecesList = new Array(); //状态0 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x; tmp3.y = tmp1.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp2.x; tmp4.y = tmp2.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态1 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x; tmp3.y = tmp1.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp2.x; tmp4.y = tmp2.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态2 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x; tmp3.y = tmp1.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp2.x; tmp4.y = tmp2.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态3 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp1.x; tmp3.y = tmp1.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp2.x; tmp4.y = tmp2.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); return piecesList; } function getI(){ var mystartx = maxFieldNum % 2 == 1 ? (maxFieldNum-1) / 2 : maxFieldNum / 2; var mystarty = 0; var color = "rgb("+getRandomInt(1, 255)+","+getRandomInt(1, 255)+","+getRandomInt(1, 255)+")"; var piecesList = new Array(); //状态0 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp2.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x+1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态1 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态2 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx-1; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x+1; tmp2.y = tmp1.y; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x+1; tmp3.y = tmp2.y; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x+1; tmp4.y = tmp3.y; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); //状态3 var pieces = new Array(); var tmp1 = new Object(); tmp1.x = mystartx; tmp1.y = mystarty; tmp1.color = color; pieces.push(tmp1); var tmp2 = new Object(); tmp2.x = tmp1.x; tmp2.y = tmp1.y+1; tmp2.color = color; pieces.push(tmp2); var tmp3 = new Object(); tmp3.x = tmp2.x; tmp3.y = tmp2.y+1; tmp3.color = color; pieces.push(tmp3); var tmp4 = new Object(); tmp4.x = tmp3.x; tmp4.y = tmp3.y+1; tmp4.color = color; pieces.push(tmp4); piecesList.push(pieces); return piecesList; } //生成随机方块坐标 function createRandPiece(){ var shapes = new Array('T','L','J','Z','S','O','I'); var shapeType = shapes[getRandomInt(0, shapes.length-1)]; //console.log(shapeType); var res = new Array(); if(shapeType == 'T'){ res = getT(); } else if(shapeType == 'L'){ res = getL(); } else if(shapeType == 'J'){ res = getJ(); } else if(shapeType == 'Z'){ res = getZ(); } else if(shapeType == 'S'){ res = getS(); } else if(shapeType == 'O'){ res = getO(); } else if(shapeType == 'I'){ res = getI(); } else { console.log('我擦,你想干啥'); } return res; } //处理键盘事件 function doKeyDown(e){ var keyId = e.keyCode ? e.keyCode : e.which; var key = e.key ? e.key : e.key; var code = e.code ? e.code : e.code; console.log('keyId:'+keyId+' key:'+key+' code:'+code); //验证是否越界 //a if(keyId == 65 || keyId == 37){ for(var j = 0; j < pieceNow[nowStatus].length; j++){ if(pieceNow[nowStatus][j].x-1 < 0){ return false; } } } //d if(keyId == 68 || keyId == 39){ for(var j = 0; j < pieceNow[nowStatus].length; j++){ if(pieceNow[nowStatus][j].x+1 > maxFieldNum-1){ return false; } } } //w if(keyId == 87 || keyId == 38){ return false; for(var j = 0; j < pieceNow[nowStatus].length; j++){ if(pieceNow[nowStatus][j].y-1 < 0){ return false; } } } //s if(keyId == 83 || keyId == 40){ for(var j = 0; j < pieceNow[nowStatus].length; j++){ if(pieceNow[nowStatus][j].y+1 > maxLineNum-1){ return false; } } } //移动 //a if(keyId == 65 || keyId == 37){ for(var i = 0; i < pieceNow.length; i++){ for(var j = 0; j < pieceNow[i].length; j++){ pieceNow[i][j].x--; } } } //d if(keyId == 68 || keyId == 39){ for(var i = 0; i < pieceNow.length; i++){ for(var j = 0; j < pieceNow[i].length; j++){ pieceNow[i][j].x++; } } } //w if(keyId == 87 || keyId == 38){ for(var i = 0; i < pieceNow.length; i++){ for(var j = 0; j < pieceNow[i].length; j++){ pieceNow[i][j].y--; } } } //s if(keyId == 83 || keyId == 40){ for(var i = 0; i < pieceNow.length; i++){ for(var j = 0; j < pieceNow[i].length; j++){ pieceNow[i][j].y++; } } } var changeFlag = false; for(var j = 0; j < pieceNow[nowStatus].length; j++){ if(pieceNow[nowStatus][j].y+1 > maxLineNum-1){ changeFlag = true; score++; break; } } for(var j = 0; j < pieceNow[nowStatus].length; j++){ for(var i = 0; i < jileiList.length; i++){ if(pieceNow[nowStatus][j].x == jileiList[i].x && pieceNow[nowStatus][j].y+1 == jileiList[i].y){ changeFlag = true; score++; break; } } } if(changeFlag == true){ for(var j = 0; j < pieceNow[nowStatus].length; j++){ var tmp = new Object(); tmp.x = pieceNow[nowStatus][j].x; tmp.y = pieceNow[nowStatus][j].y; tmp.color = pieceNow[nowStatus][j].color; jileiList.push(tmp); } pieceNow = pieceWill; pieceWill = createRandPiece(); nowStatus = 0; } //换方向 if(code == 'Space'){ nowStatus = (nowStatus + 1) % 4; } draw(); } function draw(){ //清理画布 var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.clearRect(0, 0, paint_width, paint_height); //画布背景 var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = "rgb(147,112,219)"; ctx.fillRect(0,0,paint_width,paint_height); //console.log("画布背景尺寸:宽:"+paint_width+",高:"+paint_height); //左侧背景 var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = "rgb(255,250,240)"; ctx.fillRect(pading,pading,left_width,left_height); //console.log("左侧背景尺寸:宽:"+left_width+",高:"+left_height); //右侧背景 var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = "rgb(230,230,250)"; ctx.fillRect(left_width+pading,pading,right_width,right_height); //console.log("右侧背景尺寸:宽:"+right_width+",高:"+right_height); //横线 for(var i = 0; i <= maxLineNum; i++){ var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(pading, pading+perHeight*i); ctx.lineTo(pading+left_width, pading+perHeight*i); ctx.strokeStyle = 'black'; ctx.lineWidth = 1; ctx.stroke(); } //竖线 for(var i = 0; i <= maxFieldNum; i++){ var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(pading+perWidth*i, pading); ctx.lineTo(pading+perWidth*i, pading+left_height); ctx.strokeStyle = 'black'; ctx.lineWidth = 1; ctx.stroke(); } //画当前的块 //console.log(pieceNow); if(nowStatus < pieceNow.length){ for(var i = 0; i < pieceNow[nowStatus].length; i++){ var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = pieceNow[nowStatus][i].color; ctx.fillRect(pieceNow[nowStatus][i].x*perWidth+pading,pieceNow[nowStatus][i].y*perHeight+pading,perWidth,perHeight); } } //画积累的块 for(var i = 0; i < jileiList.length; i++){ var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = jileiList[i].color; ctx.fillRect(jileiList[i].x*perWidth+pading,jileiList[i].y*perHeight+pading,perWidth,perHeight); } //画未来的块部分的文字 ctx.beginPath(); ctx.fillStyle="rgb(255,130,71)"; ctx.font="14px Arial"; ctx.fillText('下一个', left_width+pading+right_width/3,right_height/4); //画未来的块 //console.log(pieceWill); if(0 < pieceWill.length){ for(var i = 0; i < pieceWill[0].length; i++){ var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = pieceWill[0][i].color; ctx.fillRect((pieceWill[0][i].x+16)*perWidth+pading,(pieceWill[0][i].y+7)*perHeight+pading,perWidth,perHeight); } } //显示得分按钮和文字 var tmpcolor = "rgb(238,197,145)"; var ctx = myCanvas.getContext("2d"); ctx.beginPath(); ctx.fillStyle = tmpcolor; ctx.fillRect(left_width+pading+right_width/4,perHeight/2,120,35); //获取反色,展示文字序号 var pattern = /[0-9]+/g; var matches = tmpcolor.match(pattern); var r = 255-matches[0]; var g = 255-matches[1]; var b = 255-matches[2]; ctx.beginPath(); ctx.fillStyle="rgb("+r+","+g+","+b+")"; ctx.font="14px Arial"; ctx.fillText("得分:"+score, left_width+pading+right_width/4+35,perHeight/2+23); myCanvas.addEventListener('keydown', doKeyDown,true); myCanvas.focus(); window.addEventListener('keydown', doKeyDown, true); } function getUnixTime(){ return Math.floor(Date.now() / 1000); } function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } draw(); </script> </body> </html>
截图:
标签:canvas,color,pieces,tmp3,var,tmp1,俄罗斯,方块,tmp2 From: https://www.cnblogs.com/xuxiaobo/p/18398937