canvas版本的俄罗斯方块，俄罗斯方块还是复杂一些

代码：

<!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>

<div style="display: flex; justify-content: left; align-items: center; height: 100%;">
<canvas id="myCanvas" width="600" height="600" style="border:1px;">
</canvas>
</div>

<script>
var margin = 10;
var pading = 3;
var maxLineNum = 25;
var maxFieldNum = 25;
var score = 0;
var pieceNow = createRandPiece();
var pieceWill = createRandPiece();
var nowStatus = 0;
var jileiList = new Array();

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 - page_width / 6;
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;

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 = "rgb(139,129,76)";//pieceNow[nowStatus][j].color;
			jileiList.push(tmp);
		}
		
		pieceNow = pieceWill;
		pieceWill = createRandPiece();
		nowStatus = 0;
		
		//消除填满的整行
		for(var i = 0; i < maxLineNum; i++){
			var tmp = true;
			for(var j = 0; j < maxFieldNum; j++){
				if(injileilist(jileiList, j, i) == false){
					tmp = false;
					break;
				}
			}
			
			if(tmp == true){
				jileiList = jileiList.filter(function(item) {
					return item.y != i;
				});
				for(var k = 0; k < jileiList.length; k++){
					if(jileiList[k].y < i){
						jileiList[k].y += 1;
					}
				}
				score += 10;
			}
		}
	}
	
	
	//换方向
	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+17)*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 injileilist(jileis, x, y){
	for(var i = 0; i < jileis.length; i++){
		if(jileis[i].x == x && jileis[i].y == y){
			return true;
		}
	}

	return false;
}

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>

　　

截图：

 

posted @ 2024-09-05 17:45  河北大学-徐小波  阅读(258)  评论(0)    收藏  举报