JS实现——俄罗斯方块
把以下代码保存成Tetris.html文件,使用Google或360浏览器打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="charset-8"/>
<title> new document </title>
</head> <body>
<div id="space"></div>
<div id="debug" style="position:relative;top:-600px;left:330px"></div>
</body> <script>
//定义按键
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_ROTATE = 38;
var KEY_ACCELERATE = 40;
var KEY_PAUSE = 13;
var KEY_ONE_STOP = 32; //定义地图大小
var MAP_R = 18;
var MAP_C = 10; //定义方块大小
var BLOCK_R = 4;
var BLOCK_C = 4;
//定义各种方块
var BLOCKS = [
//I
[
[[1,1,1,1],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,0,0],
[0,1,0,0],
[0,1,0,0],
[0,1,0,0]],
[[1,1,1,1],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,0,0],
[0,1,0,0],
[0,1,0,0],
[0,1,0,0]]
], //L
[
[[1,0,0,0],
[1,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[1,1,0,0],
[1,0,0,0],
[1,0,0,0],
[0,0,0,0]],
[[1,1,1,0],
[0,0,1,0],
[0,0,0,0],
[0,0,0,0]],
[[1,0,0,0],
[1,0,0,0],
[1,1,0,0],
[0,0,0,0]]
], //J
[
[[1,1,1,0],
[1,0,0,0],
[0,0,0,0],
[0,0,0,0]],
[[1,1,0,0],
[0,1,0,0],
[0,1,0,0],
[0,0,0,0]],
[[0,0,1,0],
[1,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[1,0,0,0],
[1,0,0,0],
[1,1,0,0],
[0,0,0,0]]
], //O
[
[[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]]
], //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]],
[[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]]
], //T
[
[[0,1,0,0],
[1,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,0,0],
[0,1,1,0],
[0,1,0,0],
[0,0,0,0]],
[[0,0,0,0],
[1,1,1,0],
[0,1,0,0],
[0,0,0,0]],
[[0,1,0,0],
[1,1,0,0],
[0,1,0,0],
[0,0,0,0]]
], //Z
[
[[1,1,0,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,0,0],
[1,1,0,0],
[1,0,0,0],
[0,0,0,0]],
[[1,1,0,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]],
[[0,1,0,0],
[1,1,0,0],
[1,0,0,0],
[0,0,0,0]]
]
]; var map = [];
for(var r = 0; r < MAP_R; r++) {
map.push([]);
for(var c = 0; c < MAP_C; c++) {
map[r][c] = {};
map[r][c].b = 0;
}
} var colors = ['darkorange','darkviolet','mediumblue','red','lightseagreen','yellow','lime']; var enableShadow = true;
var shadow = {}; var currR, currC; //方格当前在Space的左顶点位置
var currType; //当前正在落下方块的种类
var currDir = 0; //当前正在落下方块的方向
var pause = false; //可以落下
function canFall(currR, currC) {
for(var c = 0; c < BLOCK_C; c++)
for(var r = BLOCK_R - 1; r >= 0; r--) {
if(!BLOCKS[currType][currDir][r][c])
continue;
if(currR + r + 1 > MAP_R - 1)
return false;
if(map[currR + r + 1][currC + c].b)
return false;
}
return true;
} //找方块的投影坐标
function makeShadow() {
shadow.r = currR;
shadow.c = currC;
while(canFall(shadow.r, shadow.c)) {
shadow.r++;
}
} //落下状态设置到map
function fall(block) {
for(var r = 0; r < BLOCK_R; r++)
for(var c = 0; c < BLOCK_C; c++)
if(BLOCKS[currType][currDir][r][c]) {
map[currR + r][currC + c].b = BLOCKS[currType][currDir][r][c];
map[currR + r][currC + c].c = currType;
}
} //可以左移
function canLeft() {
for(var r = 0; r < BLOCK_R; r++)
for(var c = 0; c < BLOCK_C; c++) {
if(!BLOCKS[currType][currDir][r][c])
continue;
if(currC + c - 1 < 0)
return false;
if(map[currR + r][currC + c - 1].b)
return false;
}
return true;
} //可以右移
function canRight() {
for(var r = 0; r < BLOCK_R; r++)
for(var c = BLOCK_C - 1; c >= 0; c--) {
if(!BLOCKS[currType][currDir][r][c])
continue;
if(currC + c + 1 > MAP_C - 1)
return false;
if(map[currR + r][currC + c + 1].b)
return false;
}
return true;
} //可以旋转
function canRotate() {
return true;
} //获得满行的行位置
function checkFullRows() {
var rows = [];
var full;
for(var r = currR; r < MAP_R; r++) {
full = true;
for(var c = 0; full && c < MAP_C; c++)
full = map[r][c].b;
if(full)
rows.push(r);
}
return rows;
} function showPop(rows) {
for(var i = 0; i < rows.length; i++)
for(var c = 0; c < MAP_C; c++)
$(rows[i] + '-' + c).style.backgroundColor = 'transparent';
} //在map消除指定行位置的行
function popRows(rows) {
for(var i = 0; i < rows.length; i++)
for(var r = rows[i] - 1; r >= 0; r--)
for(var c = 0; c < MAP_C; c++) {
map[r + 1][c].b = map[r][c].b;
map[r + 1][c].c = map[r][c].c;
}
} document.onkeydown = function(event) {
var keyCode = window .event?event.keyCode:event.which; if(keyCode == KEY_LEFT || keyCode == KEY_RIGHT) {
easeBlock();
if(enableShadow)
easeShadow();
if(keyCode == KEY_LEFT) {
if(canLeft())
--currC;
} else if(keyCode == KEY_RIGHT) {
if(canRight())
++currC;
}
drawBlock();
if(enableShadow) {
makeShadow();
drawShadow();
}
} else if(keyCode == KEY_ROTATE) {
if(canRotate()) {
easeBlock();
if(enableShadow)
easeShadow();
currDir = [1,2,3,0][currDir];
drawBlock();
if(enableShadow) {
makeShadow();
drawShadow();
}
}
} else if(keyCode == KEY_ACCELERATE) {
loop();
} else if(keyCode == KEY_PAUSE) {
pause = !pause;
if(pause)
clearInterval(timer);
else
timer = setInterval(loop, 300);
} else if(keyCode == KEY_ONE_STOP) {
easeBlock();
makeShadow();
currR = shadow.r;
currC = shadow.c;
drawBlock();
} //printMapState();
} function nextBlock() {
function randInt(n, m) {
return Math.floor(Math.random() * (m - n)) + n;
} currR = 0;
currC = MAP_C / 2 - BLOCK_C / 2;
currType = randInt(0, BLOCKS.length);
currDir = randInt(0, 4);
} function printMapState() {
var debug = $('debug');
var html = '';
for(var r = 0; r < MAP_R; r++) {
for(var c = 0; c < MAP_C; c++)
html += map[r][c].b;
html += '</br>';
}
debug.innerHTML = html;
} onload = function() {
init();
nextBlock();
drawBlock();
makeShadow();
drawShadow(); timer = setInterval(loop, 300);
}; function loop() {
if(canFall(currR, currC)) {
easeBlock();
++currR;
drawBlock();
} else {
fall();
if(currR == 0) {
drawBlock();
clearInterval(timer);
alert('Game Over');
return;
}
var rows = checkFullRows();
if(rows.length > 0) {
showPop(rows);
popRows(rows);
setTimeout(function(){
drawMap();
}, 100);
}
if(enableShadow)
easeShadow();
nextBlock();
drawBlock();
if(enableShadow) {
makeShadow();
drawShadow();
}
}
} function drawMap() {
for(var r = 0; r < MAP_R; r++)
for(var c = 0; c < MAP_C; c++) {
var div = $(r + '-' + c);
if(map[r][c].b) {
div.style.backgroundColor = colors[map[r][c].c];
} else {
div.style.backgroundColor = 'transparent';
}
}
} function drawBlock() {
for(var r = 0; r < BLOCK_R; r++)
for(var c = 0; c < BLOCK_C; c++) {
if(BLOCKS[currType][currDir][r][c]) {
var div = $((currR + r) + '-' + (currC + c));
div.style.backgroundColor = colors[currType];
div.style.border = '1px solid ' + colors[currType];
}
}
} function easeBlock() {
for(var r = 0; r < BLOCK_R; r++)
for(var c = 0; c < BLOCK_C; c++) {
if(BLOCKS[currType][currDir][r][c]) {
var div = $((currR + r) + '-' + (currC + c));
div.style.backgroundColor = 'transparent';
div.style.border = '1px solid ' + 'transparent';
}
}
} function drawShadow() {
for(var r = 0; r < BLOCK_R; r++)
for(var c = 0; c < BLOCK_C; c++) {
if(BLOCKS[currType][currDir][r][c]) {
var div = $((shadow.r + r) + '-' + (shadow.c + c));
div.style.border = '1px solid blue';
}
}
} function easeShadow() {
for(var r = 0; r < BLOCK_R; r++)
for(var c = 0; c < BLOCK_C; c++) {
if(BLOCKS[currType][currDir][r][c]) {
var div = $((shadow.r + r) + '-' + (shadow.c + c));
div.style.border = '1px solid ' + 'transparent';
}
}
} function init() {
var size = 28; var space = $('space');
space.style.position = 'relative';
space.style.width = size * MAP_C + (MAP_C + 1) * 3 + 1 + 'px';
space.style.height = size * MAP_R + (MAP_R + 1) * 3 + 1 + 'px';
//space.style.backgroundColor = 'lavender';
space.style.border = '2px solid black'; for(var r = 0; r < MAP_R; r++) {
for(var c = 0; c < MAP_C; c++) {
var div = document.createElement('div');
div.id = r + '-' + c;
div.style.position = 'absolute';
div.style.top = size * r + (r + 1) * 3 + 'px';
div.style.left = size * c + (c + 1) * 3 + 'px';
div.style.width = size + 'px';
div.style.height = size + 'px';
space.appendChild(div);
}
}
} function $(id) {
return document.getElementById(id);
}
</script>
</html>
出处:qq群--编程算法&思想 459909287
JS实现——俄罗斯方块的更多相关文章
- 使用JS实现俄罗斯方块游戏
简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 纯JS实现俄罗斯方块,打造属于你的游戏帝国
纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...
- 用纯JS做俄罗斯方块 - 简要思路介绍(1)
大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...
- 60行JS实现俄罗斯方块
参考文献:http://www.cnblogs.com/jimaojin/p/5413857.html 原版: <!doctype html><html><head> ...
- [前端 3]纯Js制作俄罗斯方块游戏
导读:在别人文章里看到了,然后写了一遍.结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法.忘了在 哪一篇上面看的了,就贴不出来链接地址.原谅.呃,真没自己的东西,权当练打字了吧.其实, ...
- JS实现俄罗斯方块
在80后.90后的儿时记忆里,俄罗斯方块是必备的消遣小游戏,它的玩法非常简单基本大家都懂,但如何用编程语言开发一款儿时同款「俄罗斯方块」,恐怕知道的同学就很少啦. 位置掩码和旋转掩码 俄罗斯方块游戏中 ...
- JAVASCRIPT实现网页版:俄罗斯方块
HTML+CSS+JS实现俄罗斯方块完整版,素材只有图片,想要的下载图片按提示名字保存,css中用的时候注意路径!!主要在JS中!JS附有详细注释 效果: 按键提示:[键盘按键] 素材:图片名字与代码 ...
- 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)
在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...
- jQuery原型属性和方法总结
从大四下学期开始了解jquery源码相关的东西,在回校参加毕业典礼(准确的说是参加补考挂科太多)期间便开始借着<jQuery>内幕学习jquery源码,然后在博客园写笔记也已经两个月了,也 ...
随机推荐
- Java学习知识体系大纲梳理
感悟 很奇怪,我怎么会想着写这么一篇博客——Java语言的学习体系,这不是大学就已经学过的课程嘛.博主系计算机科班毕业,大学的时候没少捧着Java教程来学习,不管是为了学习编程还是为了期末考个高分,都 ...
- 宿主机Windows访问虚拟机Linux文件(二)
上一篇文章中详细讲述FTP服务(基于文件传输协议的服务),本文则介绍另一种能够实现此功能Telnet(Telecommunications network 远程登陆)服务.本文介绍的telnet我常用 ...
- 本号讯 | 永不消失的协作“空间站”开课;微软推出微软云Azure文档网站
8月29日,针对企业常面临的“协同办公”困难,开展以“还有这种操作?永不消失的协作'空间站'”为主题的协同办公培训课. 课程内容包含:在Office 365环境中,如何利用Teams与Groups等功 ...
- SharePoint 2010 缺少站点保存为模板选项
如果您尝试在SharePoint Server 2010中保存网站,并且没有看到"将网站另存为模板"选项,则可能是因为该网站已启用发布功能.如果使用站点发布功能,则有几个选项可将网 ...
- Python+selenium之截图图片并保存截取的图片
本文转载:http://blog.csdn.net/u011541946/article/details/70141488 http://www.cnblogs.com/timsheng/archiv ...
- android 内存泄露测试
Android 程序由java语言编写,android的内存管理与java相似,通过new为对象分配内存,所有对象在java堆内分配空间,对象回收有个垃圾回收器来完成.GC就是垃圾收集的意思(Gaba ...
- JavaScript 的 parseInt 取整
http://www.neoease.com/javascript-get-integer-via-parseint/ JavaScript 是弱类型语言, 为了保证数值的有效性, 在处理数值的时候, ...
- 扒一扒IT大佬高考:马云数学1分考北大 李彦宏是状元
http://news.cnblogs.com/n/522622/ 高考今天正式拉开序幕,而像李彦宏.马云等 IT 大佬之前也都参加过高考,他们成绩又都是怎样的呢? 马化腾:放弃天文梦选择计算机 20 ...
- 一点对原生HTTP请求的理解与总结
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10946165.html,多谢,=.=~ 术语 HTTP:超文本传输协议,规定Web浏览器如何从W ...
- ABAP system landscape和vue项目webpack构建的最佳实践
基于Netweaver的ABAP transport route一般都有dev,test和prod三种类型的系统. 而Vue前端项目的webpack build设置也类似. 以SAP成都研究院数字创新 ...