javascript俄罗斯方块游戏
在线试玩：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俄罗斯方块游戏的更多相关文章
- 经典 HTML5 & Javascript 俄罗斯方块游戏
Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...
- Javascript 俄罗斯方块 游戏代码解释!
俄罗斯方块代码说明 /** 名称:Javascript 俄罗斯方块! 作者:Gloot 邮箱:glootz@gmail.com QQ:345268267 网站:http://www.cnblogs.c ...
- 教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏
早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用C写一个功能基本齐全的俄罗斯方块的话,大 ...
- 俄罗斯方块游戏JavaScript代码
JavaScript代码俄罗斯方块游戏 早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要是以注释的形式). 我用 ...
- 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
- 使用JS实现俄罗斯方块游戏
简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 从零开始---控制台用c写俄罗斯方块游戏（1）
从零开始---控制台用c写俄罗斯方块游戏(1) 很少写博文,一来自身知识有限,二来自己知道,已经有很多这样的博文了,三就是因为懒,文笔也一般,四来刚出来工作,时间也不多 之所以写这篇博文,是因为应群里 ...
- 用C写的俄罗斯方块游戏 By: hoodlum1980 编程论坛
/************************************ * Desc: 俄罗斯方块游戏 * By: hoodlum1980 * Email: jinfd@126.com * Dat ...
- HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
随机推荐
- fir.im Log Guru 正式开源，快速找到 iOS 应用无法安装的原因
很开心的宣布 Log Guru 正式开源! Log Guru,是 fir.im 开发团队创造的小轮子,用在 Mac 电脑上的日志获取,Github 地址:FIRHQ/LogGuru. Log Guru ...
- JavaScript随笔1
1.NaN不等于NaN 2.判断是不是NaN:isNaN; (强制类型转换) 3.parseInt(3.5) ->3 parseInt(3px)->3 4.pareFloat(3.7)- ...
- jQuery对象与DOM对象之间的转换方法
刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- Jquery中的(function($){...})(jQuery)
当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...
- 每天多一点（2016.12.04）》Javascript隐式转换
乱想 javascript为什么需要隐式转换?如果没有会出现什么情况? 找了一圈没有看到关于这个的讨论,只好自己研究了,可能不一定正确,自行辨知. 郁闷就是郁闷在好好的,为什么要搞个隐式转换,一般来讲 ...
- jQuery 2.0.3 源码分析core - 选择器
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...
- WindowsError的错误代码详解
0操作成功完成. 1功能错误. 2系统找不到指定的文件. 3系统找不到指定的路径. 4系统无法打开文件. 5拒绝访问. 6句柄无效. 7存储控制块被损坏. 8存储空间不足,无法处理此命令. 9存储控制 ...
- .Net 转战 Android 4.4 日常笔记目录
.Net 转战 Android 4.4 日常笔记(1)--工具及环境搭建 .Net 转战 Android 4.4 日常笔记(2)--HelloWorld入门程序 .Net 转战 Android 4.4 ...
- Expression Template（表达式模板,ET）
1.前言 在前一篇文章自己实现简单的string类中提到在实现+操作符重载函数时,为了防止返回时生成的临时对象调用拷贝构造函数动态申请内存空间,使用了一个叫move的函数,它是C++0x新增的特性.既 ...
- css3实现的动画效果
在线演示:莲花盛开 在线演示:忙碌光标效果 在线演示:发光效果