原生js小游戏——俄罗斯方块

还记得童年时期的小游戏俄罗斯方块吗？我发现用js就可以写出来

页面效果如下：

具体代码如下：

首先展示css样式：

.c {margin: 1px;width: 19px;height: 19px;background: red;position: absolute;}.d {margin: 1px;width: 19px;height: 19px;background: gray;position: absolute;}.f {top: 0px;left: 0px;background: black;position: absolute;}.e {top: 0px;background: #151515;position: absolute;}.g {width: 100px;height: 20px;color: white;position: absolute;}

然后是js的代码

 <script type="text/javascript">var row = 18;var col = 10;var announcement = 6;var size = 20;var isOver = false;var shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");var tetris;var container;function createElm(tag, css) {var elm = document.createElement(tag);elm.className = css;document.body.appendChild(elm);return elm;}function Tetris(css, x, y, shape) {// 创建4个div用来组合出各种方块var myCss = css ? css : "c";this.divs = [createElm("div", myCss), createElm("div", myCss), createElm("div", myCss), createElm("div", myCss)];if (!shape) {this.divs2 = [createElm("div", myCss), createElm("div", myCss), createElm("div", myCss), createElm("div", myCss)];this.score = createElm("div", "g");this.score.style.top = 10 * size + "px";this.score.style.left = (col - -1) * size + "px";this.score.innerHTML = "score:0";}this.container = null;this.refresh = function () {this.x = (typeof (x) != 'undefined') ? x : 3;this.y = (typeof (y) != 'undefined') ? y : 0;// 如果有传参，优先使用参数的，如果有预告，优先使用预告，都没有就自己生成if (shape)this.shape = shape;else if (this.shape2)this.shape = this.shape2;elsethis.shape = shape ? shape : shapes[Math.floor((Math.random() * shapes.length - 0.000000001))].split(",");this.shape2 = shapes[Math.floor((Math.random() * shapes.length - 0.000000001))].split(",");if (this.container && !this.container.check(this.x, this.y, this.shape)) {isOver = true;alert("游戏结束");}else {this.show();this.showScore();this.showAnnouncement();}}// 显示方块this.show = function () {for (var i in this.divs) {this.divs[i].style.top = (this.shape[i * 2 + 1] - -this.y) * size + "px";this.divs[i].style.left = (this.shape[i * 2] - -this.x) * size + "px";}}// 显示预告this.showAnnouncement = function () {for (var i in this.divs2) {this.divs2[i].style.top = (this.shape2[i * 2 + 1] - -1) * size + "px";this.divs2[i].style.left = (this.shape2[i * 2] - -1 - -col) * size + "px";}}// 显示分数this.showScore = function () {if (this.container && this.score) {this.score.innerHTML = "score:" + this.container.score;}}// 水平移动方块的位置this.hMove = function (step) {if (this.container.check(this.x - -step, this.y, this.shape)) {this.x += step;this.show();}}// 垂直移动方块位置this.vMove = function (step) {if (this.container.check(this.x, this.y - -step, this.shape)) {this.y += step;this.show();}else {this.container.fixShape(this.x, this.y, this.shape);this.container.findFull();this.refresh();}}// 旋转方块this.rotate = function () {var newShape = [this.shape[1], 3 - this.shape[0], this.shape[3], 3 - this.shape[2], this.shape[5], 3 - this.shape[4], this.shape[7], 3 - this.shape[6]];if (this.container.check(this.x, this.y, newShape)) {this.shape = newShape;this.show();}}this.refresh();}function Container() {this.init = function () {// 绘制方块所在区域var bgDiv = createElm("div", "f");bgDiv.style.width = size * col + "px";bgDiv.style.height = size * row + "px";// 绘制预告所在区域var bgDiv = createElm("div", "e");bgDiv.style.left = size * col + "px";bgDiv.style.width = size * announcement + "px";bgDiv.style.height = size * row + "px";// 清空积分this.score = 0;}this.check = function (x, y, shape) {// 检查边界越界var flag = false;var leftmost = col;var rightmost = 0;var undermost = 0;for (var i = 0; i < 8; i += 2) {// 记录最左边水平坐标if (shape[i] < leftmost)leftmost = shape[i];// 记录最右边水平坐标if (shape[i] > rightmost)rightmost = shape[i];// 记录最下边垂直坐标if (shape[i + 1] > undermost)undermost = shape[i + 1];// 判断是否碰撞if (this[(shape[i + 1] - -y) * 100 - -(shape[i] - -x)])flag = true;}// 判断是否到达极限高度for (var m = 0; m < 3; m++)for (var n = 0; n < col; n++)if (this[m * 100 + n])flag = true;if ((rightmost - -x + 1) > col || (leftmost - -x) < 0 || (undermost - -y + 1) > row || flag)return false;return true;}// 用灰色方块替换红色方块，并在容器中记录灰色方块的位置this.fixShape = function (x, y, shape) {var t = new Tetris("d", x, y, shape);for (var i = 0; i < 8; i += 2)this[(shape[i + 1] - -y) * 100 - -(shape[i] - -x)] = t.divs[i / 2];}// 遍历整个容器，判断是否可以消除this.findFull = function () {var s = 0;for (var m = 0; m < row; m++) {var count = 0;for (var n = 0; n < col; n++)if (this[m * 100 + n])count++;if (count == col) {s++;this.removeLine(m);}}this.score -= -this.calScore(s);}this.calScore = function (s) {if (s != 0)return s - -this.calScore(s - 1)elsereturn 0;}// 消除指定一行方块this.removeLine = function (row) {// 移除一行方块for (var n = 0; n < col; n++)document.body.removeChild(this[row * 100 + n]);// 把所消除行上面所有的方块下移一行for (var i = row; i > 0; i--) {for (var j = 0; j < col; j++) {this[i * 100 - -j] = this[(i - 1) * 100 - -j]if (this[i * 100 - -j])this[i * 100 - -j].style.top = i * size + "px";}}}}function init() {container = new Container();container.init();tetris = new Tetris();tetris.container = container;document.onkeydown = function (e) {if (isOver) return;var e = window.event ? window.event : e;switch (e.keyCode) {case 38: //uptetris.rotate();break;case 40: //downtetris.vMove(1);break;case 37: //lefttetris.hMove(-1);break;case 39: //righttetris.hMove(1);break;}}setInterval("if(!isOver) tetris.vMove(1)", 500);}

还要在body标签上加上 οnlοad="init(),让页面加载完成再执行，如下

<body οnlοad="init()">

</body>

然后运行就可以了

原生js小游戏——俄罗斯方块相关推荐

是男人就要坚持30秒：原生JS小游戏
在继之前完成的数个JavaScript demo后,我发现我还没有写过JS小游戏,这次呢,我就来分享一个,非常经典的"是男人就要坚持30s"的小游戏.当然我肯定 is a man, ...
祖玛弹珠js小游戏代码
下载地址简单的祖玛弹珠js小游戏代码,原生JavaScript带实现的祖玛游戏. dd:
鸿蒙小游戏-俄罗斯方块
作者:225王宗振前言为了更好地熟练掌握鸿蒙手机应用开发,查阅资料和算法尝试开发鸿蒙小游戏--俄罗斯方块. 概述完成鸿蒙小游戏APP在手机上的编译在项目中所使用到的软件为DevEco Studi ...
js小游戏（飞行的小鸟--canvas）
js小游戏 (飞行的小鸟) 这个里面用到的主要是 canvas 绘图 <!DOCTYPE html> <html><head><meta charset=&q ...
python tkinter火柴人_用Python实现童年小游戏俄罗斯方块！别说还挺好玩！
原标题:用Python实现童年小游戏俄罗斯方块!别说还挺好玩! 前言大三上学期的程序设计实训大作业,挑了其中一个我认为最简单的的<图书管理系统>来写.用python写是因为py有自带的G ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
js小游戏之经典炸弹人（1）--地图实现
前段时间,写了一款js小游戏--经典炸弹人,因为这是第一次写游戏,对很多东西都不是很熟悉.于是,疯狂的上网找资料,结果发现,关于经典炸弹人的js资料少的可怜.所以,很是头疼了一段时间.在写完经典炸弹人 ...
js小游戏动物连连看代码
下载地址 js小游戏动物连连看代码,有多种语言切换,默认是中文.不用部署本地解压即可预览. dd:
糖果粉碎js小游戏代码
下载地址糖果粉碎js小游戏代码,糖果消消乐小游戏源码下载. dd:

原生js小游戏——俄罗斯方块

原生js小游戏——俄罗斯方块相关推荐

最新文章

热门文章