下面是实现代码 ，代码中有注释，分享给大家，仅供学习
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8">
<title></title>
</head>
<style type=
"text/css">
width:
360px;
height:
600px;
background:
}
.kuai {
width:
28px;
height:
28px;
margin:
1px;
float: left;
}
</style>
<script type=
"text/javascript">
<--!
gamemap二维数组，绘制地图，
0 代表 空白 ，
1 代表墙 ，如果是
2 代表正在下落的 方块，
3 代表已经下沉的方块
-->
var gamemap =
new Array();
gamemap[
0] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
1] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
2] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
3] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
4] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
5] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
6] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
7] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
8] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
9] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
10] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
11] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
12] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
13] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
14] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
15] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
16] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
17] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
18] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
gamemap[
19] =
new Array(
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1);
var level =
0;
var r =
0;
var c =
5;
var mshape;
var shape;
var dirkey;
var quick =
1;
var timer;
<--!
每个数字代表一种图形，获得图形
-->
function getshape(shapeid, r, c) {
var shapes =
new Array();
switch (shapeid) {
case 0:
shapes[
0] =
new Array(r, c -
1);
shapes[
1] =
new Array(r, c);
shapes[
2] =
new Array(r, c +
1);
shapes[
3] =
new Array(r, c +
2);
break;
case 1:
shapes[
0] =
new Array(r, c -
1);
shapes[
1] =
new Array(r, c);
shapes[
2] =
new Array(r, c +
1);
shapes[
3] =
new Array(r +
1, c);
break;
case 2:
shapes[
0] =
new Array(r, c -
1);
shapes[
1] =
new Array(r, c);
shapes[
2] =
new Array(r, c +
1);
shapes[
3] =
new Array(r +
1, c -
1);
break;
case 3:
shapes[
0] =
new Array(r, c -
1);
shapes[
1] =
new Array(r, c);
shapes[
2] =
new Array(r, c +
1);
shapes[
3] =
new Array(r +
1, c +
1);
break;
case 4:
shapes[
0] =
new Array(r, c +
1);
shapes[
1] =
new Array(r, c);
shapes[
2] =
new Array(r +
1, c -
1);
shapes[
3] =
new Array(r +
1, c);
break;
case 5:
shapes[
0] =
new Array(r, c -
1);
shapes[
1] =
new Array(r, c);
shapes[
2] =
new Array(r +
1, c);
shapes[
3] =
new Array(r +
1, c +
1);
break;
case 6:
shapes[
0] =
new Array(r, c);
shapes[
1] =
new Array(r, c +
1);
shapes[
2] =
new Array(r +
1, c);
shapes[
3] =
new Array(r +
1, c +
1);
break;
default:
break;
}
return shapes;
}
<--!
初始化地图
-->
function initmap() {
var divmap = document.getElementById(
"gamemap");
for (
var r =
0; r < gamemap.length; r++) {
for (
var c =
0; c < gamemap[r].length; c++) {
var divchild = document.createElement(
"div");
divchild.id =
"r" + r +
"c" + c;
divchild.className =
"kuai";
divmap.appendChild(divchild);
}
}
shapemaker();
paint();
setInterval(
"fall()",
700);
}
<--!
渲染颜色
0 代表 空白
1 代表边框 ，黑色
2 代表 正在下落得方块
3 代表 已经下沉到底部的方块 ，
-->
function paint() {
for (
var r =
0; r < gamemap.length; r++) {
for (
var c =
0; c < gamemap[r].length; c++) {
switch (gamemap[r][c]) {
case 0:
document.getElementById(
"r" + r +
"c" + c).style.background =
"white";
break;
case 1:
document.getElementById(
"r" + r +
"c" + c).style.background =
"black";
break;
case 2:
document.getElementById(
"r" + r +
"c" + c).style.background =
"gold";
break;
case 3:
document.getElementById(
"r" + r +
"c" + c).style.background =
"orangered";
break;
default:
break;
}
}
}
}
function shapemaker() {
shape = parseInt(Math.random() *
7);
<--!
生成随机数，
0-
6，每个数字代表一种图形
-->
mshape = getshape(shape, r, c);
if (isover()) {
alert(
"恭喜你获得" + level *
100 +
"分");
location.reload();
}
for (
var i =
0; i < mshape.length; i++) {
gamemap[mshape[i][
0]][mshape[i][
1]] =
2;
}
}
<--!
下落 代码
-->
function fall() {
var aftershape =
new Array();
for (
var i =
0; i < mshape.length; i++) {
aftershape[i] =
new Array(mshape[i][
0] +
1, mshape[i][
1]);
}
if (iscollision(aftershape)) {
for (
var i =
0; i < mshape.length; i++) {
gamemap[mshape[i][
0]][mshape[i][
1]] =
3;
}
paint();
var row = isfull();
while (row != -
1) {
for (
var i = row; i >
0; i--) {
gamemap[i] = gamemap[i -
1];
}
<--! 消除方块
-->
gamemap[
0] =
new Array(
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
1);
level++;
row = isfull();
}
r =
0;
c =
5;
quick =
1;
shapemaker();
}
else {
r++;
drawshape(mshape, aftershape);
}
paint();
}
function isover() {
for (
var i =
0; i < mshape.length; i++) {
if (gamemap[mshape[i][
0]][mshape[i][
1]] ==
3) {
return true;
}
else {
return false;
}
}
}
<--! 判断行是否满了，返回行号 -->
function isfull() {
for (
var i = gamemap.length -
2; i >=
0; i--) {
var samenum =
0;
for (
var j =
1; j < gamemap[i].length -
1; j++) {
if (gamemap[i][j] !=
3) {
break;
}
else {
samenum++;
if (samenum == gamemap[i].length -
2) {
return i;
}
}
}
samenum =
0;
}
return -
1;
}
<--! 判断是否发生碰撞 -->
function iscollision(shapes) {
var collision =
false;
for (
var i =
0; i < shapes.length; i++) {
var value = gamemap[shapes[i][
0]][shapes[i][
1]];
if (!(value ==
0 || value ==
2)) {
collision =
true;
}
}
return collision;
}
<--! 旋转图形 -->
function rotate(shapeid, shape) {
var shapes =
new Array();
if (shapeid >=
0 && shapeid <
6) {
for (
var i =
0; i < shape.length; i++) {
var square = shape[i];
x = square[
0] - r;
y = square[
1] - c;
shapes[i] =
new Array((square[
0] + y - x), (square[
1] - x - y));
}
}
else if (shapeid ==
6) {
shapes = shape;
}
return shapes;
}
<--!
按方向键控制图形变换 ↑ 键 是旋转
-->
function presslimit(event) {
var aftershape =
new Array();
if (event.keyCode >=
37 && event.keyCode <=
40) {
dirkey = event.keyCode -
37;
switch (dirkey) {
case 0:
for (
var i =
0; i < mshape.length; i++) {
aftershape[i] =
new Array(mshape[i][
0], mshape[i][
1] -
1);
}
break;
case 1:
aftershape = rotate(shape, mshape);
break;
case 2:
for (
var i =
0; i < mshape.length; i++) {
aftershape[i] =
new Array(mshape[i][
0], mshape[i][
1] +
1);
}
break;
case 3:
for (
var i =
0; i < mshape.length; i++) {
aftershape[i] =
new Array(mshape[i][
0] +
1, mshape[i][
1]);
}
break;
default:
break;
}
if (!iscollision(aftershape)) {
drawshape(mshape, aftershape);
switch (dirkey) {
case 0:
c--;
break;
case 2:
c++;
break;
case 3:
r++;
break;
default:
break;
}
}
paint();
}
else if (event.keyCode ==
13) {
quick =
0;
}
}
<--! 绘制图形 -->
function drawshape(befor, after) {
for (
var i =
0; i < befor.length; i++) {
gamemap[befor[i][
0]][befor[i][
1]] =
0;
}
for (
var i =
0; i < after.length; i++) {
gamemap[after[i][
0]][after[i][
1]] =
2;
}
mshape = after;
}
onkeydown = presslimit;
onload = initmap;
</script>
<body>
<div id=
"gamemap"></div>
</body>
</html>
