javascript俄罗斯方块面向对象编程（jQuery）（附带百度网盘链接）

这个俄罗斯方块游戏是通过javascript面向对象编程的方法编写，代码结构分为游戏类（Game.js），方块类（block.js）,地图类（Map.js）,方块形状对象类（blockjson.js）

，话不多说，直接源码了。(粘贴源码，引入正确路径即可运行)

2.游戏类 Game.js:

3.方块类 block.js：

4.地图类：map.js

5.方块形状对象类blockjson.js:

6.百度网盘链接：

游戏页面

index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;margin: 0 auto;}td {border: 1px solid #000;width: 30px;height: 30px;}.c1 {background-color: rgb(0, 255, 21);}.c2 {background-color: rgb(21, 245, 226);}.c3 {background-color: red;}.c4 {background-color: palevioletred;}.c5 {background-color: olive;}.c6 {background-color: orange;}.c7 {background-color: brown;}.c8 {background-color: yellow;}</style>
</head><body><script src="./js/jquery.min.js"></script><script src="./js/Blockjson.js"></script><script src="./js/Game.js"></script><script src="./js/Block.js"></script><script src="./js/Map.js"></script><script>var game = new Game();</script></body></html>

2.游戏类 Game.js:

实现游戏逻辑，方块下落，平移，旋转等

// 隔绝作用
(function() {// Game类window.Game = function() {this.row = 20;//行this.col = 12;//列this.init();// 生成this.block = new Block();this.map = new Map(this);this.start();this.bindEvent();}// 初始化表格Game.prototype.init = function() {var $table = $("<table></table>")for (var i = 0; i < this.row; i++) {// 创建trvar $tr = $("<tr></tr>")for (var j = 0; j < this.col; j++) {// 创建tdvar $td = $("<td></td>")$td.appendTo($tr)}$tr.appendTo($table)}$($table).appendTo("body")}// 给方块加类名Game.prototype.setColor = function(row, col, num) {$("tr").eq(row).children("td").eq(col).addClass("c" + num);}// 清屏Game.prototype.clear = function() {for (var i = 0; i < this.row; i++) {for (var j = 0; j < this.col; j++) {$("tr").eq(i).children("td").eq(j).removeClass()}}}// 键盘控制方向下落Game.prototype.bindEvent = function() {// 备份var self = this;$(document).keydown(function(e) {console.log(e.keyCode)// 左  向左移动if (e.keyCode == 37) {self.block.checkLeft();} else if (e.keyCode == 39) {// 右  向右移动self.block.checkRight();} else if (e.keyCode == 40) {// 下  向下落到底self.block.checkBlockEnd();} else if (e.keyCode == 38) {// 上    方块旋转self.block.checkRot();}})}Game.prototype.start = function() {var self = this;this.timer = setInterval(function() {// 清屏self.clear();self.block.render();self.map.render(self);self.block.checkDown();}, 500)}})()

3.方块类 block.js：

随机生成方块，封装方块运动函数，方块的状态与更新

(function() {// Block类window.Block = function() {var allType = ["S", "T", "O", "L", "J", "I", "Z"];// 随机得到block类型this.type = allType[parseInt(Math.random() * allType.length)];this.allDir = rublock[this.type].length;this.dir = parseInt(Math.random() * this.allDir);this.code = rublock[this.type][this.dir];// 初始行this.row = 0;// 初始列this.col = 4;}// 渲染方块Block.prototype.render = function() {for (i = 0; i < 4; i++) {for (j = 0; j < 4; j++) {if (this.code[i][j] != 0) {game.setColor(i + this.row, j + this.col, this.code[i][j]);}}}}// 判断下一行是否停止Block.prototype.check = function(row, col) {for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {if (this.code[i][j] !== 0 && game.map.mapCode[i + row][j + col] !== 0) {return false;}}}return true;};// 向下增加Block.prototype.checkDown = function() {// 判断当前地图位置和自己方块位置是否重合if (this.check(this.row + 1, this.col)) {this.row++;} else {game.block = new Block();this.renderMap();game.map.checkRemove();this.checkOver();}}// 向左移动Block.prototype.checkLeft = function() {// 判断是否可以向左if (this.check(this.row, this.col - 1)) {this.col--;}}// 向右移动Block.prototype.checkRight = function() {// 判断是否可以向右if (this.check(this.row, this.col + 1)) {this.col++;}};// 向下落到底Block.prototype.checkBlockEnd = function() {while (this.check(this.row + 1, this.col)) {this.row++;}};// 方块旋转Block.prototype.checkRot = function() {//   备份var olddir = this.dir;this.dir++;if (this.dir > this.allDir - 1) {this.dir = 0;}this.code = rublock[this.type][this.dir];// 如果重合返回原来状态if (!this.check(this.row, this.col)) {this.dir = olddir;this.code = rublock[this.type][this.dir];}};// 将已经到底的方块渲染到地图中Block.prototype.renderMap = function() {for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {// 将现在已有的方块渲染到map类mapcode上if (this.code[i][j] !== 0) {// 改变地图mapcode数据game.map.mapCode[this.row + i][this.col + j] = this.code[i][j];}}}}// 游戏结束Block.prototype.checkOver = function() {for (var i = 0; i < game.col; i++) {if (game.map.mapCode[0][i] !== 0) {clearInterval(game.timer);alert("YOU LOSE");}}}
})()

4.地图类：map.js

绘制方块运动所在地图：

(function() {// 地图类window.Map = function() {this.mapCode = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0],[0, 0, 0, 0, 0, 0, 3, 7, 0, 0, 0, 0],[1, 2, 3, 4, 5, 6, 7, 8, 0, 0, 0, 0],[9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9]]}Map.prototype.render = function(mapGame) {// 渲染地图for (var i = 0; i < mapGame.row; i++) {for (var j = 0; j < mapGame.col; j++) {if (this.mapCode[i][j] != 0) {game.setColor(i, j, this.mapCode[i][j]);}// $("tr").eq(i).children("td").eq(j).html(this.mapCode[i][j])}}}// 消除完整行Map.prototype.checkRemove = function() {for (var i = 0; i < 20; i++) {if (this.mapCode[i].indexOf(0) == -1) {// 删除一行this.mapCode.splice(i, 1)// 补充一行this.mapCode.unshift([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0])}}}})()

5.方块形状对象类blockjson.js:

设置方块不同形状例如L型，T型等：

var rublock = {// s"S": [[[0, 1, 1, 0],[1, 1, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]],[[0, 1, 0, 0],[0, 1, 1, 0],[0, 0, 1, 0],[0, 0, 0, 0]]],// z"Z": [[[2, 2, 0, 0],[0, 2, 2, 0],[0, 0, 0, 0],[0, 0, 0, 0]],[[0, 0, 2, 0],[0, 2, 2, 0],[0, 2, 0, 0],[0, 0, 0, 0]]],// j"J": [[[0, 3, 0, 0],[0, 3, 0, 0],[3, 3, 0, 0],[0, 0, 0, 0]],[[3, 0, 0, 0],[3, 3, 3, 0],[0, 0, 0, 0],[0, 0, 0, 0]],[[0, 3, 3, 0],[0, 3, 0, 0],[0, 3, 0, 0],[0, 0, 0, 0]],[[3, 3, 3, 0],[0, 0, 3, 0],[0, 0, 0, 0],[0, 0, 0, 0]]],// l"L": [[[0, 4, 0, 0],[0, 4, 0, 0],[0, 4, 4, 0],[0, 0, 0, 0],],[[4, 4, 4, 0],[4, 0, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]],[[0, 4, 4, 0],[0, 0, 4, 0],[0, 0, 4, 0],[0, 0, 0, 0]],[[0, 0, 4, 0],[4, 4, 4, 0],[0, 0, 0, 0],[0, 0, 0, 0]]],// i"I": [[[0, 0, 0, 0],[5, 5, 5, 5],[0, 0, 0, 0],[0, 0, 0, 0]],[[0, 5, 0, 0],[0, 5, 0, 0],[0, 5, 0, 0],[0, 5, 0, 0]]],// o"O": [[[0, 7, 7, 0],[0, 7, 7, 0],[0, 0, 0, 0],[0, 0, 0, 0]]],// t"T": [[[8, 0, 0, 0],[8, 8, 0, 0],[8, 0, 0, 0],[0, 0, 0, 0]],[[8, 8, 8, 0],[0, 8, 0, 0],[0, 0, 0, 0],[0, 0, 0, 0]],[[0, 8, 0, 0],[8, 8, 0, 0],[0, 8, 0, 0],[0, 0, 0, 0]],[[0, 8, 0, 0],[8, 8, 8, 0],[0, 0, 0, 0],[0, 0, 0, 0]]]}

6.百度网盘链接：

俄罗斯方块：链接：https://pan.baidu.com/s/1SeKA_aeWrK_ZcoTuZoFBRg
提取码：23bn

其他小游戏源码：贪吃蛇https://blog.csdn.net/weixin_45851686/article/details/120242331?utm_source=app&app_version=4.15.0&code=app_1562916241&uLinkId=usr1mkqgl919blenhttps://blog.csdn.net/weixin_45851686/article/details/120242331?utm_source=app&app_version=4.15.0&code=app_1562916241&uLinkId=usr1mkqgl919blen