纯JS实现俄罗斯方块，打造属于你的游戏帝国
纯JS俄罗斯方块，打造属于你的游戏帝国。
本文原始作者博客 http://www.cnblogs.com/toutou
俄罗斯方块（Tetris， 俄文：Тетрис）是一款电视游戏机和掌上游戏机游戏，它由俄罗斯人阿列克谢·帕基特诺夫发明，故得此名。
俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜，从而家喻户晓，风靡世界。
那么，我们的问题来了，学挖掘机技术哪家强？
俄罗斯方块可以说是风靡全世界，老少皆知的一款游戏， 那么我们作为web开发是否可以使用代码简单实现这个小游戏呢？
html代码部分：
<!doctype html>
<html>
<head>
</head>
<body>
<h2 style="background-color:yellow;">博客园:请叫我头头哥</h2>
<div id="box"></div>
<div id="info">
NEXT:
<div id="next"></div>
<div id="text"></div>
</div>
</body>
</html>
css部分：
body {
background: blue;
font: 25px / 25px ËÎÌå;
}
#box {
float: left;
width: 252px;
border: #999 20px ridge;
color: #9f9;
text-shadow: 2px 3px 1px #0f0;
}
#info {
float: left;
color: #cfc;
padding: 24px;
}
#next {
padding: 8px;
width: 105px;
color: #9f9;
text-shadow: 2px 3px 1px #0f0;
}
js部分：
var map = eval("[" + Array(23).join("0x801,") + "0xfff]");
var tatris = [[0x6600], [0x2222, 0xf00], [0xc600, 0x2640], [0x6c00, 0x4620], [0x4460, 0x2e0, 0x6220, 0x740], [0x2260, 0xe20, 0x6440, 0x4700], [0x2620, 0x720, 0x2320, 0x2700]];
var char = { x: "\u3000", s: "\u25a0", t: "\u25a1" };
var keycom = { "38": "rotate(1)", "40": "down()", "37": "move(2,1)", "39": "move(0.5,-1)", "32": "0;pause=!pause" };
var dia, pos, bak, run, next, pause = false, info = { speed: 1, lines: 0, score: 0 };
// 开始时间
function start() {
dia = next.d;
bak = pos = {
fk: [],
y: 0,
x: 4,
s: next.s
};
nextdia();
document.getElementById("next").innerHTML = (next.d[next.s % next.d.length] | 0x10000).toString(2).slice(-16).replace(/..../g, "$&<br/>").replace(/1/g, char.t).replace(/0/g, char.x);
document.getElementById("text").innerHTML = "SCORE:" + info.score + "<br/><br/>LINES:" + info.lines + "<br/><br/>SPEED:" + info.speed;
rotate(0);
run = setInterval("pause||down()", ~ ~(Math.pow(1.3, 12 - info.speed) * 30 + 20));
}
// 游戏结束时事件
function over() {
document.onkeydown = null;
// confirm， 是否再来一局
var end = confirm("游戏结束, 是再来一局");
if (end) {
window.location.href = window.location.href;
} else {
alert("骚年，自制力不错!");
}
}
function nextdia() {
next = { d: tatris[~ ~(Math.random() * 7)], s: ~ ~(Math.random() * 4) };
}
function update(t) {
bak = { fk: pos.fk.slice(0), y: pos.y, x: pos.x, s: pos.s };
if (t) return;
for (var i = 0, a2 = ""; i < 22; i++) a2 += map[i].toString(2).slice(1, -1) + "<br/>";
for (var i = 0, n; i < 4; i++)
if (/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g, char.t)))
a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length);
document.getElementById("box").innerHTML = a2.replace(/1/g, char.s).replace(/0/g, char.x);
}
function is() {
for (var i = 0; i < 4; i++)
if ((pos.fk[i] & map[pos.y + i]) != 0)
return pos = bak;
}
function rotate(r) {
var f = dia[pos.s = (pos.s + r) % dia.length];
for (var i = 0; i < 4; i++)
pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x;
update(is());
}
function down() {
++pos.y;
if (is()) {
for (var i = 0, r = 0; i < 4 && pos.y + i < 22; i++)
if ((map[pos.y + i] |= pos.fk[i]) == 0xfff) {
map.splice(pos.y + i, 1), map.unshift(0x801);
++info.lines % 20 == 0 && info.speed++, r++;
}
clearInterval(run);
if (map[1] != 0x801)
return over();
info.score += ~ ~(Math.pow(r, 1.5) * 10) + 2;
start();
}
update();
}
function move(t, k) {
pos.x += k;
for (var i = 0; i < 4; i++)
pos.fk[i] *= t;
update(is());
}
document.onkeydown = function (e) {
eval("pause||" + keycom[(e ? e : event).keyCode]);
};
nextdia();
start();
实现效果图：
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。
本文原始作者博客 http://www.cnblogs.com/toutou
if您看了这篇博客。对您有所帮助，请不要吝啬您的“推荐”，您的推荐将是我最大的动力。有问题的话可以评论交流。
纯JS实现俄罗斯方块，打造属于你的游戏帝国的更多相关文章
- 用纯JS做俄罗斯方块 - 简要思路介绍（1）
大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...
- [前端 3]纯Js制作俄罗斯方块游戏
导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在 哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- 纯js异步无刷新请求(只支持IE)
纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...
- [分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技
好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
- baguetteBox.js响应式画廊插件(纯JS)
baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. D ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
随机推荐
- 压缩和解压文件：tar gzip bzip2 compress(转)
tar[必要参数][选择参数][文件] 压缩:tar -czvf filename.tar.gz targetfile解压:tar -zxvf filename.tar.gz参数说明: -c 建立新的 ...
- (转)socket Aio demo
原文地址: https://my.oschina.net/tangcoffee/blog/305656 参考文档: http://my.oschina.net/u/862897/blog/164425 ...
- kettle中参数和变量的区别
图一: 图二: 何时使用'?'何事使用${}应当根据情况: 在图二中使用的是${}因为此时没有"作为参数的字段",所以只能用el表达式直接获取其值,在图一中有"作为参数的 ...
- c#根据绝对路径获取 带后缀文件名、后缀名、文件名
zz C#根据绝对路径获取 带后缀文件名.后缀名.文件名 1.c#根据绝对路径获取 带后缀文件名.后缀名.文件名. string str =" F:\test\Default.aspx& ...
- Parseval's theorem 帕塞瓦尔定理
Source: wiki: Parseval's theorem As for signal processing, the power within certain frequency band = ...
- 微信随机红包(Java)
概述 最近受一朋友提醒,问微信红包怎么实现的,当时思考了一下,觉得好像很容易,可是当真正实现的时候,发现其中有不少问题,于是小白博主查阅资料,其中资料主要来源于知乎的一篇讨论<微信红包的随机算法 ...
- 用Tensorflow让神经网络自动创造音乐
#————————————————————————本文禁止转载,禁止用于各类讲座及ppt中,违者必究————————————————————————# 前几天看到一个有意思的分享,大意是讲如何用Ten ...
- Activity去Title的几种方式
第一种:直接加一行代码: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...
- Redis设计与实现读书笔记（二） 链表
链表作为最基础的数据结构,在许多高级语言上已经有了很好的实现.由于redis采用C语言编写,需要自己实现链表,于是redis在adlist.h定义了链表类型.作者对于这部分没什么好说,源码比较简单,如 ...
- Android换肤技术总结
原文出处: http://blog.zhaiyifan.cn/2015/09/10/Android%E6%8D%A2%E8%82%A4%E6%8A%80%E6%9C%AF%E6%80%BB%E7%BB ...