<!doctype html><html><head></head><body>
<div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div>
<script>
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 keycom={"38":"rotate(1)","40":"down()","37":"move(2,1)","39":"move(0.5,-1)"};
var dia, pos, bak, run;
function start(){
dia=tatris[~~(Math.random()*7)];
bak=pos={fk:[],y:0,x:4,s:~~(Math.random()*4)};
rotate(0);
}
function over(){
document.onkeydown=null;
clearInterval(run);
alert("GAME OVER");
}
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,"\u25a1")))
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,"\u25a0").replace(/0/g,"\u3000");
}
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; 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);
if(map[1]!=0x801) return over();
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(keycom[(e?e:event).keyCode]);
};
start();
run=setInterval("down()",400);
</script></body></html>
PS：建议使用谷歌打开，其他的浏览器可能不太好看
效果图：
来源：http://www.zuidaima.com/share/1759652641295360.htm
相关推荐
【标题】：HTML5+JS实现俄罗斯方块 在网页上使用HTML5和JavaScript实现俄罗斯方块是一项常见的编程挑战，它涉及到多个技术层面，包括页面布局、事件处理、动画效果以及游戏逻辑。以下是对这个项目中涉及的关键知识...
【jQuery 游戏 俄罗斯方块 代码】是一款基于JavaScript库jQuery实现的网页版俄罗斯方块游戏。这个游戏的特色在于其简洁高效的代码实现，通过利用jQuery的事件处理和DOM操作功能，使得开发者可以用相对较少的代码量...
在这个项目中，JS被用来实现俄罗斯方块的游戏逻辑。 首先，我们要理解游戏的基本机制。俄罗斯方块的基本概念是不同形状的方块（通常由四个单元格组成）从屏幕顶部落下，玩家通过旋转和移动这些方块来使它们在屏幕...
【标题】"简单的js俄罗斯方块游戏源码.zip"是一个包含JavaScript实现的俄罗斯方块小游戏的源代码包。这款游戏以简洁的线条设计风格呈现，旨在为玩家提供一个基础的在线娱乐体验。 【描述】提到的"简单的js俄罗斯...
在俄罗斯方块游戏中，游戏循环通常包含以下几个步骤： 1. 检查当前方块是否可以下落，如果可以，则向下移动。 2. 检查方块是否到达底部或与已有方块重叠，如果是，则固定当前方块并检查行消除。 3. 更新得分和游戏...
用最简短的Javascript代码实现俄罗斯方块游戏。打开文本文档后点击文件->另存为:俄罗斯方块.html ，文件类型选择“所有文件”，打开另存后的文件即可体验简易版俄罗斯方块游戏！！！
在这个"全新版vue.js俄罗斯方块"项目中，开发者利用Vue.js的强大功能，结合算法，创建了一个完整的俄罗斯方块游戏。让我们深入探讨这个项目中的关键知识点。 1. **Vue.js组件化开发**： - Vue.js的核心理念是组件...
在JavaScript（JS）中实现俄罗斯方块是一种对游戏编程的有趣尝试，它展示了JS作为客户端脚本语言的强大功能。俄罗斯方块是一款经典的电子游戏，玩家需要控制不同形状的方块下落并组合成完整的行来消除得分。在这个...
在HTML5俄罗斯方块游戏中，JavaScript代码会监听用户的键盘输入，控制方块的下落速度和方向；同时，它还负责检查行是否被填满并进行消除，以及生成新的随机方块。 3D效果通常需要WebGL的支持，这是一种JavaScript ...
【标题】"用js实现俄罗斯方块小游戏"揭示了该压缩包内容的核心——一个使用JavaScript编程语言构建的在线俄罗斯方块游戏。JavaScript是一种广泛应用于Web开发的脚本语言，它通常用于实现网页的动态功能和交互性。在...
总的来说，"纯JS实现俄罗斯方块"是一个很好的实践项目，它展示了JavaScript在游戏开发中的强大能力，也提供了学习和研究游戏逻辑、交互设计以及前端技术的好机会。无论你是初学者还是有经验的开发者，都能从中受益。
javascript实现的俄罗斯方块小游戏 ，代码预览：function rotate() { var tmpBlock = new Array(4); for (var i = 0; i ; i++) { tmpBlock[i] = { x: 0, y: 0 }; } //先算四个点的中心点，则这四个点围绕中心...
总结来说，这个“原生js简易的俄罗斯方块游戏代码”项目展示了如何使用Web技术构建一个简单的游戏。通过HTML构建基础结构，CSS进行视觉设计，JavaScript负责动态行为，开发者可以创建出一个互动性强且富有挑战性的...
这个项目利用JavaScript语言，一个广泛应用于网页开发的脚本语言，来实现经典的俄罗斯方块游戏。下面将详细讨论这个项目中涉及的JavaScript编程知识点、游戏机制以及如何实现它们。 ### 1. JavaScript基础 ...
综上所述，HTML5俄罗斯方块游戏代码涉及到HTML5 Canvas的图形绘制、JavaScript编程、游戏逻辑设计、用户交互实现以及性能优化等多个方面。通过学习和理解这些知识点，开发者可以进一步掌握Web游戏开发的基础技能。
总的来说，JavaScript实现俄罗斯方块是一个很好的学习项目，它涵盖了事件处理、数组操作、定时器、DOM操作以及简单的游戏逻辑等多个JavaScript编程的关键点。通过这个项目，开发者可以深入理解JavaScript在实时交互...
本文介绍了一个通过60行JavaScript代码实现的俄罗斯方块游戏，游戏的核心逻辑包括基本的方块移动、旋转、下落以及碰撞检测。在这个简短的代码实现中，虽然可能存在一些小bug，但整体运行效果是值得肯定的，因此鼓励...
在这款俄罗斯方块游戏中，开发者充分利用了JavaScript的事件处理、DOM操作和定时器等核心功能。 1. **基本结构与布局** 游戏通常由HTML构建界面，CSS负责样式，而JavaScript则处理逻辑。在这个项目中，HTML可能...