小时候想玩没的玩的小游戏，现在自己写一个.
简单实现 俄罗斯方块 初级版 ，有空实现个三维的。本身实现代码都比较简单，不对代码作说明了。
1、效果原理图片
2、直接上代码
1、index.html
rasian square 得分: 0
2、common.js 这个方法之前百度上面看到，就蛮用了
var util = (function () { var class2type = {}; ["Null", "Undefined", "Number", "Boolean", "String", "Object", "Function", "Array", "RegExp", "Date"].forEach(function (item) { class2type["[object " + item + "]"] = item.toLowerCase(); }) function isType(obj, type) { return getType(obj) === type; } function getType(obj) { return class2type[Object.prototype.toString.call(obj)] || "object"; } return { isType: isType, getType: getType }})();//对象深，浅拷贝function copy(obj, deep) { if (obj === null || typeof obj !== "object") { return obj; } var i, target = this.util.isType(obj, "array") ? [] : {}, value, valueType; for (i in obj) { value = obj[i]; valueType = this.util.getType(value); if (deep && (valueType === "array" || valueType === "object")) { target[i] = this.copy(value); } else { target[i] = value; } } return target;} 3、data.js
var data = { /** * ###### * ## *下折线 **/ DLine : { init: [ {x: -2, y: 4}, {x: -3, y: 4}, {x: -3, y: 5}, {x: -3, y: 6} ], degree0_90: [ {x: -1, y: 0}, {x: 0, y: 1}, {x: 1, y: 0}, {x: 2, y: -1} ], degree90_180: [ {x: 0, y: 1}, {x: 1, y: 0}, {x: 0, y: -1}, {x: -1, y: -2} ], degree180_270: [ {x: 1, y: 0}, {x: 0, y: -1}, {x: -1, y: 0}, {x: -2, y: 1} ], degree270_360: [ {x: 0, y: -1}, {x: -1, y: 0}, {x: 0, y: 1}, {x: 1, y: 2} ] }, /** * ## * ###### *上折线 **/ ULine : { init: [ {x: -3, y: 4}, {x: -3, y: 5}, {x: -3, y: 6}, {x: -4, y: 4} ], degree0_90: [ {x: 0, y: 1}, {x: 1, y: 0}, {x: 2, y: -1}, {x: 1, y: 2} ], degree90_180: [ {x: 1, y: 0}, {x: 0, y: -1}, {x: -1, y: -2}, {x: 2, y: -1} ], degree180_270: [ {x: 0, y: -1}, {x: -1, y: 0}, {x: -2, y: 1}, {x: -1, y: -2} ], degree270_360: [ {x: -1, y: 0}, {x: 0, y: 1}, {x: 1, y: 2}, {x: -2, y: 1} ] }, /** * ## * ## * ## * ## *直线 **/ Line : { init: [ {x: -1, y: 4}, {x: -2, y: 4}, {x: -3, y: 4}, {x: -4, y: 4} ], degree0_90: [ {x: -2, y: -1}, {x: -1, y: 0}, {x: 0, y: 1}, {x: 1, y: 2} ], degree90_180: [ {x: -1, y: 2}, {x: 0, y: 1}, {x: 1, y: 0}, {x: 2, y: -1} ], degree180_270: [ {x: 2, y: 1}, {x: 1, y: 0}, {x: 0, y: -1}, {x: -1, y: -2} ], degree270_360: [ {x: 1, y: -2}, {x: 0, y: -1}, {x: -1, y: 0}, {x: -2, y: 1} ] }, /** * ## * ###### *凸 **/ Raised : { init: [ {x: -2, y: 3}, {x: -2, y: 4}, {x: -2, y: 5}, {x: -3, y: 4} ], degree0_90: [ {x: -2, y: 1}, {x: -1, y: 0}, {x: 0, y: -1}, {x: 0, y: 1} ], degree90_180: [ {x: 1, y: 2}, {x: 0, y: 1}, {x: -1, y: 0}, {x: 1, y: 0} ], degree180_270: [ {x: 2, y: -1}, {x: 1, y: 0}, {x: 0, y: 1}, {x: 0, y: -1} ], degree270_360: [ {x: -1, y: -2}, {x: 0, y: -1}, {x: 1, y: 0}, {x: -1, y: 0} ] }, /** * #### * #### *方块 **/ Square : { init: [ {x: -2, y: 4}, {x: -2, y: 5}, {x: -3, y: 4}, {x: -3, y: 5} ], degree0_90: [ {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ], degree90_180: [ {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ], degree180_270: [ {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ], degree270_360: [ {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0}, {x: 0, y: 0} ] }, /** * #### * #### *左移块 **/ LSquare : { init: [ {x: -2, y: 4}, {x: -2, y: 5}, {x: -3, y: 3}, {x: -3, y: 4} ], degree0_90: [ {x: -1, y: 0}, {x: 0, y: -1}, {x: -1, y: 2}, {x: 0, y: 1} ], degree90_180: [ {x: 1, y: 2}, {x: 0, y: 1}, {x: 1, y: 0}, {x: 0, y: -1} ], degree180_270: [ {x: 1, y: -2}, {x: 0, y: -1}, {x: 1, y: 0}, {x: 0, y: 1} ], degree270_360: [ {x: -1, y: 0}, {x: 0, y: 1}, {x: -1, y: -2}, {x: 0, y: -1} ] }, /** * #### * #### *右移块 **/ RSquare : { init: [ {x: -2, y: 4}, {x: -2, y: 5}, {x: -3, y: 5}, {x: -3, y: 6} ], degree0_90: [ {x: -1, y: 0}, {x: 0, y: -1}, {x: 1, y: 0}, {x: 2, y: -1} ], degree90_180: [ {x: 0, y: 1}, {x: -1, y: 0}, {x: 0, y: -1}, {x: -1, y: -2} ], degree180_270: [ {x: 1, y: 0}, {x: 0, y: 1}, {x: -1, y: 0}, {x: -2, y: 1} ], degree270_360: [ {x: 0, y: -1}, {x: 1, y: 0}, {x: 0, y: 1}, {x: 1, y: 2} ] }}; 4、game.js
function Game(rows, verticals) { this.rows = rows; this.verticals = verticals; this.tds = []; this.init();}Game.prototype = { constructor: Game, init: function() { var table= document.getElementsByTagName('table')[0]; for(var i = 0; i < this.rows; i++) { var tr = document.createElement('tr'); var tdsTr = []; for(var j = 0;j < this.verticals; j++) { var td = document.createElement('td'); tr.appendChild(td); tdsTr.push(td); }; table.appendChild(tr); this.tds.push(tdsTr); }; }, render: function(array) { var self = this; if(!util.isType(array, "array")) { console.log('game render data must be array'); return; }; for(var i = 0;i < self.tds.length;i++) { for(var j = 0;j < self.tds[i].length;j++) { self.tds[i][j].style.background = ''; } }; for(var i = 0;i < array.length; i++) { if(self.tds[array[i].x] && self.tds[array[i].x][array[i].y]) { self.tds[array[i].x][array[i].y].style.background = '#999999'; } }; }} 5、block.js
;var square = {};Object.keys(data).forEach(function(obj) { square[obj] = function(speed) { this.speed = speed; this.body = copy(data[obj]['init'],"deep"); this.degree0_90 = data[obj]["degree0_90"]; this.degree90_180 = data[obj]["degree90_180"]; this.degree180_270 = data[obj]["degree180_270"]; this.degree270_360 = data[obj]["degree270_360"]; this.preBody = ''; this.move = ''; this.state = 0; this.init(); }; square[obj].prototype = { constructor: square[obj], init: function() { var self = this; self.move = setInterval(function() { self.down(); }, self.speed); }, down: function() { var self = this; self.preBody = copy(self.body,"deep"); self.body[0]["x"] += 1; self.body[1]["x"] += 1; self.body[2]["x"] += 1; self.body[3]["x"] += 1; // console.log('self.body'); // console.log(self.body); }, rotate: function() { var self = this; self.body[0]["x"] += self['degree'+self.state+'_'+(self.state+90)][0]["x"]; self.body[0]["y"] += self['degree'+self.state+'_'+(self.state+90)][0]["y"]; self.body[1]["x"] += self['degree'+self.state+'_'+(self.state+90)][1]["x"]; self.body[1]["y"] += self['degree'+self.state+'_'+(self.state+90)][1]["y"]; self.body[2]["x"] += self['degree'+self.state+'_'+(self.state+90)][2]["x"]; self.body[2]["y"] += self['degree'+self.state+'_'+(self.state+90)][2]["y"]; self.body[3]["x"] += self['degree'+self.state+'_'+(self.state+90)][3]["x"]; self.body[3]["y"] += self['degree'+self.state+'_'+(self.state+90)][3]["y"]; self.state = self.state == 270 ? 0 : self.state + 90; } }});