您的位置：首页 > Web前端 > JavaScript

使用javascript制作俄罗斯方块游戏（2）

2015-02-10 15:43 267 查看
上一篇文章我们已经确立了具体的思路，这次就来构建代码吧！当然首先是页面，我们这样构建

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>俄罗斯方块</title>
<style>
.piece_I{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #990000; float: left;}
.piece_Z{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #0000CC; float: left;}
.piece_Zt{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #9933CC; float: left;}
.piece_J{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #FF9900; float: left;}
.piece_L{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #6633FF; float: left;}
.piece_K{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #3300CC; float: left;}
.piece_O{width: 23px; height: 23px; border: 1px solid #99CCFF;background-color: #a36363; float: left;}
.wall{width: 25px; height: 25px; background-color:#ccc; float: left;}
.main_div{position: relative; top: -100px; left: 0}
.main_div1{top: -100px; left: 0}
</style>
</head>
<body>
<ul style="margin: 0; padding: 0; list-style-type: none">
<li style="float: left">
<div style="border: 1px solid black; width: 375px; height: 700px;   margin-right: 5px; overflow: hidden;">
<div id="mainDiv" class="main_div">

</div>
</div>
</li>
<li style="float: left">
<div id="previewDiv" style="border: 1px solid black; width: 100px; height: 100px; background-color:#ccc; margin-bottom: 5px;"></div>
<span id="startSpan" style="border: 1px solid black; background-color: #2f4f4f; font-weight: bold; color: #00ffff; cursor: pointer">开始游戏</span>
</li>
<li style="clear: both"/>
</ul>
</body>
</html>


其中id为mainDiv的div就是游戏区，id为previewDiv的div作为预览区，用于显示下一个将要出现的形状，id为startSpan的span用于制作按钮。

页面都很简单就不多说了，那么接下来就应该编写js代码了，我们首先来构建游戏区里面的div，代码如下：

var map = {
row: 32,
column: 15,
mapColor: "wall",
getMap: function () {
//创建文档碎片对象
var pieceMap = document.createDocumentFragment();
for (var i = 0; i < this.row; i++) {
for (var j = 0; j < this.column; j++) {
var piece = document.createElement("div");
piece.className = this.mapColor;
var info = {};
info.I = i;
info.J = j;
info.Val = 0;
info.IsActive = false;
base.setAttributeValue(piece, info);
pieceMap.appendChild(piece);
}
}
return pieceMap;
}
};

var base = {
//获取元素dom对象
getE: function (elem) {
if (elem.nodeType && elem.nodeType === 1) {
return elem;
} else {
return document.getElementById(elem);
}
},
//获取0-max范围的随机数
random: function (/*随机最大值，不包含此值*/max) {
return window.parseInt(Math.random() * max);
},
//设置元素中属性的值
setAttributeValue: function (elem, obj) {
var objString = "";
for (var key in obj) {
if (typeof obj[key] === "string") {
objString += "," + key + ":'" + obj[key] + "'";
} else {
objString += "," + key + ":" + obj[key];
}
}
elem.setAttribute("tag", "{" + objString.substring(1) + "}");
},
//获取属性中的值
getAttributeValue: function (elem) {
return eval("(" + elem.getAttribute("tag") + ")");
},
//获取最终样式的值
getFinalStyle: function (elem, css) {
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[css];
} else if (elem.currentStyle) {
return elem.currentStyle[css];
} else {
return elem.style[css];
}
}
};


创建一个map对象和base对象，map对象中的getMap方法将返回一个文档碎片对象，其中包含已经创建好的div，每个div上设置一个自定义info属性，用于保存当前div的基本信息。

接下来再来创建游戏中的方块对象，保存游戏中每个方块的信息（及游戏中需要操作的方块）如下

var keys = ["|", "-", "Z", "N", "Zt", "Nt", "J", "Jt", "Jt1", "Jt2", "L", "Lt", "Lt1", "Lt2", "K", "Kt", "Kt1", "Kt2", "O"];

var tetrisShape = {
"|": {
Offset: {
Top: 0,
Bottom: 0,
Left: 1,
Right: 2
},
CurrentTurn: "|",
ShapeColor: "piece_I",
NextTurn: "-",
Shape:
[
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]
]
},
"-":
{
Offset:
{
Top: 1,
Bottom: 2,
Left: 0,
Right: 0
},
CurrentTurn: "-",
ShapeColor: "piece_I",
NextTurn: "|",
Shape:
[
[0, 0, 0, 0],
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]
]
},
"Z":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 0,
Right: 1
},
CurrentTurn: "Z",
ShapeColor: "piece_Z",
NextTurn: "N",
Shape:
[
[0, 0, 0, 0],
[1, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
]
},
"N":
{
Offset:
{
Top: 0,
Bottom: 1,
Left: 1,
Right: 1
},
CurrentTurn: "N",
ShapeColor: "piece_Z",
NextTurn: "Z",
Shape:
[
[0, 0, 1, 0],
[0, 1, 1, 0],
[0, 1, 0, 0],
[0, 0, 0, 0]
]
},
"Zt":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 0,
Right: 1
},
CurrentTurn: "Zt",
ShapeColor: "piece_Zt",
NextTurn: "Nt",
Shape:
[
[0, 0, 0, 0],
[0, 1, 1, 0],
[1, 1, 0, 0],
[0, 0, 0, 0]
]
},
"Nt":
{
Offset:
{
Top: 0,
Bottom: 1,
Left: 1,
Right: 1
},
CurrentTurn: "Nt",
ShapeColor: "piece_Zt",
NextTurn: "Zt",
Shape:
[
[0, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 0, 0]
]
},
"J":
{
Offset:
{
Top: 0,
Bottom: 1,
Left: 1,
Right: 1
},
CurrentTurn: "J",
ShapeColor: "piece_J",
NextTurn: "Jt",
Shape:
[
[0, 0, 1, 0],
[0, 0, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
]
},
"Jt":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 1,
Right: 0
},
CurrentTurn: "Jt",
ShapeColor: "piece_J",
NextTurn: "Jt1",
Shape:
[
[0, 0, 0, 0],
[0, 1, 0, 0],
[0, 1, 1, 1],
[0, 0, 0, 0]
]
},
"Jt1":
{
Offset:
{
Top: 1,
Bottom: 0,
Left: 1,
Right: 1
},
CurrentTurn: "Jt1",
ShapeColor: "piece_J",
NextTurn: "Jt2",
Shape:
[
[0, 0, 0, 0],
[0, 1, 1, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]
]
},
"Jt2":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 0,
Right: 1
},
CurrentTurn: "Jt2",
ShapeColor: "piece_J",
NextTurn: "J",
Shape:
[
[0, 0, 0, 0],
[1, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 0, 0]
]
},
"L":
{
Offset:
{
Top: 0,
Bottom: 1,
Left: 1,
Right: 1
},
CurrentTurn: "L",
ShapeColor: "piece_L",
NextTurn: "Lt",
Shape:
[
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
]
},
"Lt":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 1,
Right: 0
},
CurrentTurn: "Lt",
ShapeColor: "piece_L",
NextTurn: "Lt1",
Shape:
[
[0, 0, 0, 0],
[0, 1, 1, 1],
[0, 1, 0, 0],
[0, 0, 0, 0]
]
},
"Lt1":
{
Offset:
{
Top: 1,
Bottom: 0,
Left: 1,
Right: 1
},
CurrentTurn: "Lt1",
ShapeColor: "piece_L",
NextTurn: "Lt2",
Shape:
[
[0, 0, 0, 0],
[0, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 1, 0]
]
},
"Lt2":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 0,
Right: 1
},
CurrentTurn: "Lt2",
ShapeColor: "piece_L",
NextTurn: "L",
Shape:
[
[0, 0, 0, 0],
[0, 0, 1, 0],
[1, 1, 1, 0],
[0, 0, 0, 0]
]
},
"K":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 0,
Right: 1
},
CurrentTurn: "K",
ShapeColor: "piece_K",
NextTurn: "Kt",
Shape:
[
[0, 0, 0, 0],
[0, 1, 0, 0],
[1, 1, 1, 0],
[0, 0, 0, 0]
]
},
"Kt":
{
Offset:
{
Top: 0,
Bottom: 1,
Left: 1,
Right: 1
},
CurrentTurn: "Kt",
ShapeColor: "piece_K",
NextTurn: "Kt1",
Shape:
[
[0, 1, 0, 0],
[0, 1, 1, 0],
[0, 1, 0, 0],
[0, 0, 0, 0]
]
},
"Kt1":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 0,
Right: 1
},
CurrentTurn: "Kt1",
ShapeColor: "piece_K",
NextTurn: "Kt2",
Shape:
[
[0, 0, 0, 0],
[1, 1, 1, 0],
[0, 1, 0, 0],
[0, 0, 0, 0]
]
},
"Kt2":
{
Offset:
{
Top: 0,
Bottom: 1,
Left: 1,
Right: 1
},
CurrentTurn: "Kt2",
ShapeColor: "piece_K",
NextTurn: "K",
Shape:
[
[0, 0, 1, 0],
[0, 1, 1, 0],
[0, 0, 1, 0],
[0, 0, 0, 0]
]
},
"O":
{
Offset:
{
Top: 1,
Bottom: 1,
Left: 1,
Right: 1
},
CurrentTurn: "O",
ShapeColor: "piece_O",
NextTurn: "O",
Shape:
[
[0, 0, 0, 0],
[0, 1, 1, 0],
[0, 1, 1, 0],
[0, 0, 0, 0]
]
}
};
每一个类代表一个方块，包含了方块的偏移量，颜色、以及通过一个二维数组来表示的形状等，这下一个基本的代码就完成，我们即将进入较为复杂的阶段，请看下一篇文章。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航