在线试玩：http://keleyi.com/game/5/

操作指南：
键盘方向键←→控制左右移动，↑键变形，↓键快速下落。

别看这段js代码只有短短的100多行，效果却非常不错，用键盘的方向键操作，向上键是变形，赶紧试试。

把下面代码保存到html文件，打开就可以。

 <html><head><title>俄罗斯方块-柯乐义</title>

 <link href="http://keleyi.com/game/5/index/keleyielsfk.css" type="text/css" rel="Stylesheet" /></head>

 <body><a href="http://keleyi.com/a/bjac/600xsi0s.htm">原文</a></body></html>

 <script>

 var over = false, 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(";");

 function create(tag, css) {

 var elm = document.createElement(tag);

 elm.className = css;

 document.body.appendChild(elm);

 return elm;

 }

 function Tetris(c, t, x, y) {

 var c = c ? c : "c";

 this.divs = [create("div", c), create("div", c), create("div", c), create("div", c)];

 this.reset = function () {

 this.x = typeof x != 'undefined' ? x : 3;

 this.y = typeof y != 'undefined' ? y : 0;

 this.shape = t ? t : shapes[Math.floor(Math.random() * (shapes.length - 0.00001))].split(",");

 this.show();

 if (this.field && this.field.check(this.shape, this.x, this.y, 'v') == 'D') {

 over = true;

 this.field.fixShape(this.shape, this.x, this.y);

 alert('游戏结束。http://keleyi.com/game/5/');

 }

 }

 this.show = function () {

 for (var i in this.divs) {

 this.divs[i].style.left = (this.shape[i * 2] * 1 + this.x) * 20 + 'px';

 this.divs[i].style.top = (this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px';

 }

 }

 this.field = null;

 this.hMove = function (step) {

 var r = this.field.check(this.shape, this.x - -step, this.y, 'h');

 if (r != 'N' && r == 0) {

 this.x -= -step;

 this.show();

 }

 }

 this.vMove = function () {

 if (this.field.check(this.shape, this.x, this.y - -1, 'v') == 'N') {

 this.y++;

 this.show();

 }

 else {

 this.field.fixShape(this.shape, this.x, this.y);

 this.field.findFull();

 this.reset();

 }

 }

 this.rotate = function () {

 var s = this.shape;

 var newShape = [3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4], 3 - s[7], s[6]];

 var r = this.field.check(newShape, this.x, this.y, 'h');

 if (r == 'D') return;

 if (r == 0) {

 this.shape = newShape;

 this.show();

 }

 else if (this.field.check(newShape, this.x - r, this.y, 'h') == 0) {

 this.x -= r;

 this.shape = newShape;

 this.show();

 }

 }

 this.reset();

 }

 function Field(w, h) {

 this.width = w ? w : 10;

 this.height = h ? h : 20;

 this.show = function () {

 var f = create("div", "f")

 f.style.width = this.width * 20 + 'px';

 f.style.height = this.height * 20 + 'px';

 }

 this.findFull = function () {

 for (var l = 0; l < this.height; l++) {

 var s = 0;

 for (var i = 0; i < this.width; i++) {

 s += this[l * this.width + i] ? 1 : 0;

 }

 if (s == this.width) {

 this.removeLine(l);

 }

 }

 }

 this.removeLine = function (line) {

 for (var i = 0; i < this.width; i++) {

 document.body.removeChild(this[line * this.width + i]);

 }

 for (var l = line; l > 0; l--) {

 for (var i = 0; i < this.width; i++) {

 this[l * this.width - -i] = this[(l - 1) * this.width - -i];

 if (this[l * this.width - -i]) this[l * this.width - -i].style.top = l * 20 + 'px';

 }

 }

 }

 this.check = function (shape, x, y, d) {

 var r1 = 0, r2 = 'N';

 for (var i = 0; i < 8; i += 2) {

 if (shape[i] - -x < 0 && shape[i] - -x < r1)

 { r1 = shape[i] - -x; }

 else if (shape[i] - -x >= this.width && shape[i] - -x > r1)

 { r1 = shape[i] - -x; }

 if (shape[i + 1] - -y >= this.height || this[shape[i] - -x - -(shape[i + 1] - -y) * this.width])

 { r2 = 'D' }

 }

 if (d == 'h' && r2 == 'N') return r1 > 0 ? r1 - this.width - -1 : r1;

 else return r2;

 }

 this.fixShape = function (shape, x, y) {

 var d = new Tetris("d", shape, x, y);

 d.show();

 for (var i = 0; i < 8; i += 2) {

 this[shape[i] - -x - -(shape[i + 1] - -y) * this.width] = d.divs[i / 2];

 }

 }

 }

 var f = new Field();

 f.show();

 var s = new Tetris();

 s.field = f;

 s.show();

 window.setInterval("if(!over)s.vMove();", 500);

 document.onkeydown = function (e) {

 if (over) return;

 var e = window.event ? window.event : e;

 switch (e.keyCode) {

 case 38: //up keleyi.com

 s.rotate();

 break;

 case 40: //down

 s.vMove();

 break;

 case 37: //left

 s.hMove(-1);

 break;

 case 39: //right

 s.hMove(1);

 break;

 }

 }

 </script>

原文： http://keleyi.com/a/bjac/600xsi0s.htm

web前端：http://www.cnblogs.com/jihua/p/webfront.html

javascript俄罗斯方块游戏的更多相关文章

  1. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

  2. Javascript 俄罗斯方块 游戏代码解释!

    俄罗斯方块代码说明 /** 名称:Javascript 俄罗斯方块! 作者:Gloot 邮箱:glootz@gmail.com QQ:345268267 网站:http://www.cnblogs.c ...

  3. 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏

    早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...

  4. 俄罗斯方块游戏JavaScript代码

    JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用 ...

  5. 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)

    在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...

  6. 使用JS实现俄罗斯方块游戏

    简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. 从零开始---控制台用c写俄罗斯方块游戏（1）

    从零开始---控制台用c写俄罗斯方块游戏(1) 很少写博文,一来自身知识有限,二来自己知道,已经有很多这样的博文了,三就是因为懒,文笔也一般,四来刚出来工作,时间也不多 之所以写这篇博文,是因为应群里 ...

  8. 用C写的俄罗斯方块游戏 By: hoodlum1980 编程论坛

    /************************************ * Desc: 俄罗斯方块游戏 * By: hoodlum1980 * Email: jinfd@126.com * Dat ...

  9. HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）

    HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...

随机推荐

  1. Spring学习记录(四)---bean之间的关系：继承、依赖

         继承 这里说的继承和java的继承是不一样的,不是父类子类.但思想很相似,是父bean和子bean 1.父bean是一个实例时.它本身是一个完整的bean 2.父bean是模板,抽象bean ...

  2. Extend Volume 操作 - 每天5分钟玩转 OpenStack（56）

    前面我们讨论了 volume 的 attach 和 detach 操作,今天讨论如何扩大 volume 的容量.为了保护现有数据,cinder 不允许缩小 volume. Extend 操作用于扩大 ...

  3. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

  4. 在Windows环境中开始Docker的学习和体验

    研究docker有一段时间了,当然我主要的使用环境还是在Linux中,确实很方便. 但也有不少朋友希望使用Windows来工作学习,这里介绍一下在Windows中如何快速开始Docker的学习和体验吧 ...

  5. Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试

    在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...

  6. 用十条命令在一分钟内检查Linux服务器性能

    转自:http://www.infoq.com/cn/news/2015/12/linux-performance 如果你的Linux服务器突然负载暴增,告警短信快发爆你的手机,如何在最短时间内找出L ...

  7. 2014 Visual Studio Contact(); 直播笔记

    昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS)和Visual Studio免费(Visual Studio ...

  8. 用CSS3动画，让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  9. 探秘Tomcat——连接篇

    前两篇我们分别粗线条和细粒度的讲解了tomcat的服务是如何启动以及连接器Connector和容器Container又分别是如何被启动的. 本篇我们主要侧重tomcat中server.service以 ...

  10. SqlSugar ORM已经支持读写分离

    目前只有MYSQL版 3.5.2.9 支持,其库版本12月3号更新该功能 用例讲解 using (var db = new SqlSugarClient("主连接字符串", &qu ...