使用javascript制作俄罗斯方块游戏（2）
来源：互联网 发布：穆雅斓的淘宝店没有了 编辑：程序博客网 时间：2024/06/06 03:09
上一篇文章我们已经确立了具体的思路，这次就来构建代码吧！当然首先是页面，我们这样构建
<!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] ] }};每一个类代表一个方块，包含了方块的偏移量，颜色、以及通过一个二维数组来表示的形状等，这下一个基本的代码就完成，我们即将进入较为复杂的阶段，请看下一篇文章。 0 0
- 使用javascript制作俄罗斯方块游戏（2）
- 使用javascript制作俄罗斯方块游戏（1）
- 使用javascript制作俄罗斯方块游戏（3）
- 使用Unity制作俄罗斯方块游戏
- 俄罗斯方块（flash游戏制作）
- <Unity3D>使用Unity来制作俄罗斯方块游戏
- 制作单机俄罗斯方块游戏总结（一）
- 制作单机俄罗斯方块游戏心得（二）
- 单机俄罗斯方块游戏制作心得（四）
- javascript游戏-- 俄罗斯方块 源代码
- 【游戏】JavaScript 版俄罗斯方块
- javascript游戏-- 俄罗斯方块 源代码
- javascript 俄罗斯方块 游戏
- 俄罗斯方块游戏 （C++）
- 游戏制作第五棒——俄罗斯方块
- [前端 3]纯Js制作俄罗斯方块游戏
- javascript五子棋游戏制作（-）
- 使用Qt开发俄罗斯方块游戏
- Makefile与shell脚本区别
- phonegap3+，https访问
- VC设置对话框背景图片 MFC显示背景图片方法
- tomcat 热加载
- Excel 中文拼音首字母
- 使用javascript制作俄罗斯方块游戏（2）
- 关于phonegap(cordova)跨平台app应用的环境配置
- 安卓平台判断是否有连接网络
- “OTA在线升级时打开USB存储设备时提示下载失败”分析
- Android 4.4 kitkat以上及以下根据uri获取路径的方法
- Git创建版本库
- 个推推送 SDK 常见问题检查
- C++ extern 详解
- Android 不透明度16进制值
