JS版俄罗斯方块第二版
来源：互联网 发布：自制单片机最小系统 编辑：程序博客网 时间：2024/04/29 22:16
和第一版无差别，主要调整了下代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> (function () { var Cell = { status: [ //------------------------------------------------------------------------------------------------ /****/ //------------------------------------------------------------------------------------------------ [ //长条**** [ [0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0] ], [ [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0] ], [ [0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0] ], [ [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0] ] ] , //------------------------------------------------------------------------------------------------ /* * * */ //------------------------------------------------------------------------------------------------ [ [ [0, 0, 0, 0], [0, 2, 0, 0], [0, 2, 2, 2], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [0, 2, 2, 0], [0, 2, 0, 0], [0, 2, 0, 0] ], [ [0, 0, 0, 0], [2, 2, 2, 0], [0, 0, 2, 0], [0, 0, 0, 0] ], [ [0, 0, 2, 0], [0, 0, 2, 0], [0, 2, 2, 0], [0, 0, 0, 0] ] ] , //------------------------------------------------------------------------------------------------ /* * * */ //------------------------------------------------------------------------------------------------ [ [ [0, 0, 0, 0], [0, 3, 3, 3], [0, 3, 0, 0], [0, 0, 0, 0] ], [ [0, 3, 3, 0], [0, 0, 3, 0], [0, 0, 3, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [0, 0, 3, 0], [3, 3, 3, 0], [0, 0, 0, 0] ], [ [0, 3, 0, 0], [0, 3, 0, 0], [0, 3, 3, 0], [0, 0, 0, 0] ] ] , //------------------------------------------------------------------------------------------------ /* * * */ //------------------------------------------------------------------------------------------------ [ [ [0, 4, 0, 0], [0, 4, 4, 0], [0, 0, 4, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [0, 4, 4, 0], [4, 4, 0, 0], [0, 0, 0, 0] ], [ [0, 4, 0, 0], [0, 4, 4, 0], [0, 0, 4, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [0, 4, 4, 0], [4, 4, 0, 0], [0, 0, 0, 0] ] ] , //------------------------------------------------------------------------------------------------ /* * * */ //------------------------------------------------------------------------------------------------ [ [ [0, 0, 5, 0], [0, 5, 5, 0], [0, 5, 0, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [5, 5, 0, 0], [0, 5, 5, 0], [0, 0, 0, 0] ], [ [0, 0, 5, 0], [0, 5, 5, 0], [0, 5, 0, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [5, 5, 0, 0], [0, 5, 5, 0], [0, 0, 0, 0] ] ] , //------------------------------------------------------------------------------------------------ /* * * */ //------------------------------------------------------------------------------------------------ [ [ [0, 0, 0, 0], [0, 6, 0, 0], [6, 6, 6, 0], [0, 0, 0, 0] ], [ [0, 6, 0, 0], [0, 6, 6, 0], [0, 6, 0, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [6, 6, 6, 0], [0, 6, 0, 0], [0, 0, 0, 0] ], [ [0, 6, 0, 0], [6, 6, 0, 0], [0, 6, 0, 0], [0, 0, 0, 0] ] ] , //------------------------------------------------------------------------------------------------ /* * * */ //------------------------------------------------------------------------------------------------ [ [ [0, 0, 0, 0], [0, 7, 7, 0], [0, 7, 7, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [0, 7, 7, 0], [0, 7, 7, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [0, 7, 7, 0], [0, 7, 7, 0], [0, 0, 0, 0] ], [ [0, 0, 0, 0], [0, 7, 7, 0], [0, 7, 7, 0], [0, 0, 0, 0] ] ] ], statusSum: 7, color: ["", "red", "green", "blue", "yellow", "orange", "pink", "purple", "black"], width: 10 }; function Box() { return this._init(); }; Box.prototype = { x: 0, y: 0, index: 0, status: [], divBox: null, init:function(){ this.x = 5; this.y = -4; }, _init: function () { this.init(); this._createBox(); }, _createBox: function () { var statusIndex = Math.random() * Cell.statusSum; this.status = Cell.status[parseInt(statusIndex) ]; this.divBox = this._createDivBox(); }, _createDivBox: function () { var dbox = document.createElement("div"); dbox.style.position = "absolute"; var curMode = this.status[this.index]; //当前方块的形状 for (var y in curMode) { for (var x in curMode[y]) { if (curMode[y][x] == 0) continue; var d = document.createElement("div"); d.style.position = "absolute"; d.style.top = y * Cell.width + "px"; d.style.left = x * Cell.width + "px"; d.style.width = Cell.width + "px"; d.style.height = Cell.width + "px"; d.style.overflow = "hidden"; d.style.backgroundColor = Cell.color[curMode[y][x]]; dbox.appendChild(d); } } return dbox; }, _dropDivBox: function (_divBox) { if (_divBox) { _divBox.parentNode.removeChild(_divBox); } }, _move: function (px, py) { this.x = this.x + px; this.y = this.y + py; }, /*----------------------------------------------------------------------------------*/ drop: function () { this._dropDivBox(this.divBox); }, draw: function () { this.divBox.style.left = this.x * Cell.width + "px"; this.divBox.style.top = this.y * Cell.width + "px"; }, move: function (x, y) { this._move(x, y); this.draw(); }, around: function () { this.index++; if (this.index >= 4) { this.index = 0; } var bak = this.divBox; this.divBox = this._createDivBox(); this._dropDivBox(bak); } /*----------------------------------------------------------------------------------*/ }; /** * 游戏画布 * @returns {*} * @constructor */ function Tetris() { return this._init(); } Tetris.prototype = { LEFT: 37, UP: 38, RIGHT: 39, DOWM: 40, width: 15, height: 20, canvas:[], //二维数组，0值=无阻碍 canvasDivBox:null, //大div,装载着canvasDivCell每一个小格的DIV。整体 canvasDivCell:[], // 二维数组,每一个小格DIV colorBlack: Cell.color.length - 1, score: 0, scoreDivBox:null, time: 0, delay: 250, isMove: false, curBox:null, nextBox:null, _init: function () { this._initCanvas(); this._createScoreDivBox(); this.start(); } , _createScoreDivBox:function(){ var dbox = document.createElement("div"); dbox.style.position = "absolute"; dbox.style.border = "1px solid black"; dbox.style.overflow = "hidden"; dbox.style.width = 100 + "px"; dbox.style.height = 100 + "px"; dbox.style.top = this.canvasDivBox.style.top; dbox.style.left = 110 + parseFloat(this.canvasDivBox.style.width) + "px"; document.getElementsByTagName("body")[0].appendChild(dbox); this.scoreDivBox = dbox; this.scoreDivBox.innerHTML = this.score; }, _initCanvas: function(){ for (var y = 0; y < this.height; y++) { this.canvas[y] = []; for (var x = 0; x < this.width; x++) { this.canvas[y][x] = 0; //无阻碍 //竖向围墙 if (y == 0 || y == this.height - 1) { this.canvas[y][x] = this.colorBlack; } //横向围墙 if (x == 0 || x == this.width - 1) { this.canvas[y][x] = this.colorBlack; } } } this._createCanvas(); this.paint(); }, _createCanvas: function () { var dbox = document.createElement("div"); dbox.style.position = "absolute"; dbox.style.overflow = "hidden"; dbox.style.width = this.width * Cell.width + "px"; dbox.style.height = this.height * Cell.width + "px"; dbox.style.top = 100 + "px"; dbox.style.left = 100 + "px"; dbox.style.overflow = "hidden"; document.getElementsByTagName("body")[0].appendChild(dbox); this.canvasDivBox = dbox; for (var y = 0; y < this.height; y++) { var dboxs = []; for (var x = 0; x < this.width; x++) { var b = document.createElement("div"); b.style.position = "absolute"; b.style.backgroundColor = Cell.color[this.canvas[y][x]]; b.style.width = Cell.width + "px"; b.style.height = Cell.width + "px"; b.style.left = x * Cell.width + "px"; b.style.top = y * Cell.width + "px"; b.style.overflow = "hidden"; this.canvasDivBox.appendChild(b); dboxs.push(b) } this.canvasDivCell.push(dboxs); } }, _canMove: function (px, py) { var curMode = this.curBox.status[this.curBox.index]; for (var y = curMode.length - 1; y >= 0; y--) { for (var x = 0; x < curMode[y].length; x++) { var wx = (this.curBox.x + x + px), wy = (this.curBox.y + y + py); if (px != 0) { if (wx <= 0) wx = 0; if (wx >= this.width - 1) wx = this.width - 1; if (curMode[y][x] > 0 && wy < 0) return false; if (curMode[y][x] > 0 && this.canvas[wy][wx] > 0) return false; continue; } if (py != 0) { if (wy <= 0) wy = 1; if (wy >= this.height - 1) wy = this.height - 1; if (curMode[y][x] > 0 && wy >= this.height - 1) return false; if (curMode[y][x] > 0 && this.canvas[wy][wx] > 0) return false; } } } return true; }, _canRound: function(){ var nextIndex = this.curBox.index + 1; if (nextIndex >= 4) nextIndex = 0 var nextMode = this.curBox.status[nextIndex]; for (var y = 0; y < nextMode.length; y++) { for (var x = 0; x < nextMode[y].length; x++) { var wx = (this.curBox.x + x), wy = (this.curBox.y + y); if (nextMode[y][x] > 0 && this.canvas[wy] && this.canvas[wy][wx] != 0) { return false; } } } return true; }, _isOver: function(){ var curMode = this.curBox.status[this.curBox.index]; return this.curBox.y <= 0 }, _copyBoxToCanvas: function () { var curMode = this.curBox.status[this.curBox.index]; for (var y = 0; y < curMode.length; y++) { for (var x = 0; x < curMode[y].length; x++) { var wx = this.curBox.x + x; var wy = this.curBox.y + y; if (wy <= 0) break; if (curMode[y][x] > 0 && this.canvas[wy][wx] == 0) { this.canvas[wy][wx] = curMode[y][x] } } } }, _keypress: function(event){ this.isMove = false; event = fixEvent(event || window.event); event.preventDefault(); var x = 0, y = 0; if (event.which == this.LEFT) { x = -1, y = 0; } else if (event.which == this.UP) { if (this._canRound()) { this.curBox.around(); this.curBox.draw(); this.canvasDivBox.appendChild(this.curBox.divBox); } } else if (event.which == this.RIGHT) { x = 1, y = 0; } else if (event.which == this.DOWM) { x = 0, y = 1; } if (this._canMove(x, y) && event.which != this.UP) { this.curBox.move(x, y); } this.isMove = true; }, _thread: function(){ if (this._canMove(0, 1) && this.isMove) { this.curBox.move(0, 1); } else { this.isMove = false; if (this._isOver()) { clearInterval(this.time); this.scoreDivBox.innerHTML = "<br/>game over!"; } else { this._copyBoxToCanvas(); this._deleteLine(); this.paint(); this._createBox(); if (this.score % 2 == 0) { this.delay = this.delay - this.score * this.score; } this.scoreDivBox.innerHTML = this.score; } this.isMove = true; } }, _deleteLine: function () { //从边框内开始循环，所有减2 var delY = []; for (var y = this.height - 2; y > 0; y--) { if(this._isDelete(y)){ delY.push(y); } } while(delY.length){ this.score = this.score + delY.length * 2; for (var y = delY.pop(); y > 0; y--) { for (var x = 1; x < this.width - 1; x++) { if (y - 1 <= 0) { this.canvas[y][x] = 0; }else { this.canvas[y][x] = this.canvas[y - 1][x]; } } } } }, _isDelete: function (y) { for (var x = 1; x < this.width - 1; x++) { if (this.canvas[y][x] == 0) { return false; } } return true; }, _createBox: function(){ if(this.nextBox){ this.curBox.drop(); this.curBox = this.nextBox; this.curBox.init(); this.nextBox = new Box(); this.paintNextBox(); }else{ this.curBox = new Box(); this.nextBox = new Box(); this.paintNextBox(); } this.curBox.draw(); this.canvasDivBox.appendChild(this.curBox.divBox); this.isMove = true; }, /*------------------------------------------------------*/ paint: function(){ for (var y = 0; y < this.height; y++) { var dboxs = this.canvasDivCell[y]; for (var x = 0; x < this.width; x++) { dboxs[x].style.backgroundColor = Cell.color[this.canvas[y][x]]; } } }, paintNextBox:function(){ this.nextBox.divBox.style.left = parseFloat(this.scoreDivBox.style.left)+ this.width + "px"; this.nextBox.divBox.style.top = parseFloat(this.scoreDivBox.style.top) + 50 + "px"; document.body.appendChild(this.nextBox.divBox); }, start: function () { this._createBox(); document.onkeydown = applyFn(this, this._keypress); this.time = setInterval(applyFn(this, this._thread), this.delay); } } /*==============================================*/ function applyFn(obj, fn) { return function () { fn.apply(obj, arguments); } } function callFn(obj, fn) { return function () { fn.apply(obj); } } function fixEvent(event) { if (event.preventDefault) event.preventDefault(); else { event.preventDefault = function () { event.returnValue = false; }; } if (event.which == null && (event.charCode != null || event.keyCode != null)) { event.which = event.charCode != null ? event.charCode : event.keyCode; } return event; } /*==============================================*/ window.Tetris = Tetris; })(); new Tetris(); </script>
0 0
- JS俄罗斯方块第二版
- JS版俄罗斯方块第二版
- JS版俄罗斯方块第二版
- 俄罗斯方块第二版
- js版-俄罗斯方块
- js版俄罗斯方块
- js版俄罗斯方块
- JS版的俄罗斯方块
- JS版的俄罗斯方块
- js版俄罗斯方块（二）
- js版俄罗斯方块（三）
- JS写俄罗斯方块完美注释版
- js版俄罗斯方块设计思想及实现
- js 俄罗斯方块
- JS-俄罗斯方块
- js 俄罗斯方块
- js俄罗斯方块
- Excel版俄罗斯方块
- android4.0平台通过echo命令控制LED-基于x210v3开发板
- android4.0平台通过IOCTL控制LED-基于x210v3开发板
- C语言实现冒泡、插入、选择、快速排序
- Js开发中遇到过的问题
- JS版的俄罗斯方块
- JS版俄罗斯方块第二版
- 牛B的代码--97年Mekka ’97 4K Intro比赛
- 最短路径--Dijkstra算法
- 后缀表达式笔记
- 最短路径--Floyd算法
- 查找一
- 查找二--二叉排序树
- 排序一--基础排序
- 排序二--堆排序
