【转】js版的俄罗斯方块！！
2024-06-11 02:21:55
摘自：http://topic.csdn.net/u/20100817/18/38dc20a3-86d5-45be-a750-123e7b41e188.html?29783
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style>
div {display:block;background-color:black;position:absolute;font:17px Tahoma;color:#fff;}
span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}
p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}
#main {width:375px;height:430px;display:block;background-color:gray;position:relative;}
#body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}
#score {width:80px;height:24px;left:270px;top:15px;padding:4px;}
#level {width:80px;height:24px;left:270px;top:50px;padding:4px;}
#next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;}
#ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}
#ctrl button{width:80px;height:25px;}
</style>
<script>
//By: X!ao_f QQ:120000512
var G = {
fs:[],
fn:[],
score:0,
l:['#9F0','#FF3','#F33','#C0C','#33C','#0F3','#F93'],
v:[0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0xFFFF],
d:[[0xCC00],[0x4444,0xF0],[0x8C40,0x6C00],[0x4C80,0xC600],[0x44C0,0x8E00,0xC880,0xE200],[0x88C0,0xE800,0xC440,0x2E00],[0x4E00,0x8C80,0xE400,0x4C40]],
init:function(){
var body = document.getElementById('body');
var next = document.getElementById('next');
for(var i=0;i <240;i++){
G.fs.push(body.appendChild(document.createElement("span")));
}
for(var i=0;i <16;i++){
G.fn.push(next.appendChild(document.createElement("p")));
}
G.domScore = document.getElementById('score');
G.domLevel = document.getElementById('level');
document.onkeydown=function(e){G.event(e||window.event,0)};
G.rand();
G.next();
},
timeTesk:function(){
if(G.pause)return;
if(!G.move(G.x, G.y+1, G.t)){
var s = 0;
for(var i=0;i <19;i++){
G.v[i]=G.v[i]|G.m[i];
if(G.v[i]==0xFFF){
for(var k=i;k>0;k--){
G.v[k] = G.v[k-1];
}
G.score+=++s;
}
}
G.next();
return false;
}
G.draw();
return true;
},
move:function(x,y,t){
var m = [];
for(var k=0;k <4;k++){
m[y+k] = (G.d[G.n][t]>>(3-k)*4&0xF) <<Math.max(x,0)>>-Math.min(x,0);
if(m[y+k] & G.v[y+k]){
return false;
}
}
G.x = x;
G.y = y;
G.t = t;
G.m = m;
G.draw();
return true;
},
rand:function(){
G.n = G._n;
G.t = G._t;
G.c = G._c;
G._n = parseInt(Math.random()*G.d.length);
G._t = parseInt(Math.random()*G.d[G._n].length);
G._c = parseInt(Math.random()*G.l.length);
},
next:function(){
G.rand();
if(parseInt(G.score/20)!=G.level){
G.level = parseInt(G.score/20);
clearInterval(G.handle);
G.handle = setInterval("G.timeTesk()",500/(G.level+1));
}
G.domScore.innerHTML = 'Score:'+G.score;
G.domLevel.innerHTML = 'Level:'+G.level;
var i = 0;
while(!(G.d[G.n][G.t]>>i*4&0xF))i++;
if(!G.move(3, i-3, G.t)){
alert('Game over!');
clearInterval(G.handle);
}
},
draw:function(){
for(var i=0;i <240;i++){
if((G.v[parseInt(i/12)]>>(11-i%12))&0x1){
G.fs[i].style.visibility = '';
}else if((G.m[parseInt(i/12)]>>(11-i%12))&0x1){
G.fs[i].style.visibility = '';
G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c];
}else{
G.fs[i].style.visibility ='hidden';
}
}
for(var i=0;i <16;i++){
if(G.d[G._n][G._t]>>(15-i)&0x1){
G.fn[i].style.visibility = '';
G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c];
}else{
G.fn[i].style.visibility ='hidden';
}
}
},
event:function(e,t){
switch(e.keyCode){
case 37:
G.move(G.x + 1, G.y, G.t);
break;
case 39:
G.move(G.x - 1, G.y, G.t);
break;
case 38:
G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length);
break;
case 40:
G.timeTesk();
break;
case 32:
while(G.timeTesk());
}
}
}
</script>
<body onload='G.init();'>
<div id='main'>
<div id='body'> </div>
<div id='score'> </div>
<div id='level'> </div>
<div id='next'> </div>
<div id='ctrl'>
<button onclick="javascript:location.href=location.href;">New </button>
<button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">Pause </button>
</div>
</GMain>
</body>
</html>
<html>
<style>
div {display:block;background-color:black;position:absolute;font:17px Tahoma;color:#fff;}
span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}
p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}
#main {width:375px;height:430px;display:block;background-color:gray;position:relative;}
#body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}
#score {width:80px;height:24px;left:270px;top:15px;padding:4px;}
#level {width:80px;height:24px;left:270px;top:50px;padding:4px;}
#next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;}
#ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}
#ctrl button{width:80px;height:25px;}
</style>
<script>
//By: X!ao_f QQ:120000512
var G = {
fs:[],
fn:[],
score:0,
l:['#9F0','#FF3','#F33','#C0C','#33C','#0F3','#F93'],
v:[0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0x801,0xFFFF],
d:[[0xCC00],[0x4444,0xF0],[0x8C40,0x6C00],[0x4C80,0xC600],[0x44C0,0x8E00,0xC880,0xE200],[0x88C0,0xE800,0xC440,0x2E00],[0x4E00,0x8C80,0xE400,0x4C40]],
init:function(){
var body = document.getElementById('body');
var next = document.getElementById('next');
for(var i=0;i <240;i++){
G.fs.push(body.appendChild(document.createElement("span")));
}
for(var i=0;i <16;i++){
G.fn.push(next.appendChild(document.createElement("p")));
}
G.domScore = document.getElementById('score');
G.domLevel = document.getElementById('level');
document.onkeydown=function(e){G.event(e||window.event,0)};
G.rand();
G.next();
},
timeTesk:function(){
if(G.pause)return;
if(!G.move(G.x, G.y+1, G.t)){
var s = 0;
for(var i=0;i <19;i++){
G.v[i]=G.v[i]|G.m[i];
if(G.v[i]==0xFFF){
for(var k=i;k>0;k--){
G.v[k] = G.v[k-1];
}
G.score+=++s;
}
}
G.next();
return false;
}
G.draw();
return true;
},
move:function(x,y,t){
var m = [];
for(var k=0;k <4;k++){
m[y+k] = (G.d[G.n][t]>>(3-k)*4&0xF) <<Math.max(x,0)>>-Math.min(x,0);
if(m[y+k] & G.v[y+k]){
return false;
}
}
G.x = x;
G.y = y;
G.t = t;
G.m = m;
G.draw();
return true;
},
rand:function(){
G.n = G._n;
G.t = G._t;
G.c = G._c;
G._n = parseInt(Math.random()*G.d.length);
G._t = parseInt(Math.random()*G.d[G._n].length);
G._c = parseInt(Math.random()*G.l.length);
},
next:function(){
G.rand();
if(parseInt(G.score/20)!=G.level){
G.level = parseInt(G.score/20);
clearInterval(G.handle);
G.handle = setInterval("G.timeTesk()",500/(G.level+1));
}
G.domScore.innerHTML = 'Score:'+G.score;
G.domLevel.innerHTML = 'Level:'+G.level;
var i = 0;
while(!(G.d[G.n][G.t]>>i*4&0xF))i++;
if(!G.move(3, i-3, G.t)){
alert('Game over!');
clearInterval(G.handle);
}
},
draw:function(){
for(var i=0;i <240;i++){
if((G.v[parseInt(i/12)]>>(11-i%12))&0x1){
G.fs[i].style.visibility = '';
}else if((G.m[parseInt(i/12)]>>(11-i%12))&0x1){
G.fs[i].style.visibility = '';
G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c];
}else{
G.fs[i].style.visibility ='hidden';
}
}
for(var i=0;i <16;i++){
if(G.d[G._n][G._t]>>(15-i)&0x1){
G.fn[i].style.visibility = '';
G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c];
}else{
G.fn[i].style.visibility ='hidden';
}
}
},
event:function(e,t){
switch(e.keyCode){
case 37:
G.move(G.x + 1, G.y, G.t);
break;
case 39:
G.move(G.x - 1, G.y, G.t);
break;
case 38:
G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length);
break;
case 40:
G.timeTesk();
break;
case 32:
while(G.timeTesk());
}
}
}
</script>
<body onload='G.init();'>
<div id='main'>
<div id='body'> </div>
<div id='score'> </div>
<div id='level'> </div>
<div id='next'> </div>
<div id='ctrl'>
<button onclick="javascript:location.href=location.href;">New </button>
<button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">Pause </button>
</div>
</GMain>
</body>
</html>
转载于:https://www.cnblogs.com/novus/archive/2010/08/18/1802628.html
【转】js版的俄罗斯方块！！相关推荐
- js版俄罗斯方块（二）
之前曾发过一个js版的俄罗斯方块,界面比较简单,Bug也不少.抽空重构了一下,加入了javaScript面向对象的知识,修复了一些明显的BUG. 斌斌 (给我写信) 原创博文(http://blog. ...
- IIS日志清理CMD版,VBS版,JS版,WSH版
'IIS日志清理之IIS日志生成系统(CreateIISLog.vbs) '创建文件夹 Function CreateFolder(Folder) On Error Resume Next ...
- 前端开发周边（js版页内锚点跳转方法）
js版页内锚点跳转方法 关键词:focus(获取光标) 使用方法: 1.首先引入 jQuery HTML代码段 <div><h1 id="text1">12 ...
- JS版数据结构第三篇(链表)
链表分为单链表,双链表,以及环形链表,我将分三个模块分别介绍,并有相应的题目对应讲解. 单链表 定义 还是按照老规矩先看一下百度百科对单链表的定义 根据以上文字我们可以得出 单链表是一种链式的数据结构 ...
- 两款简易计算器纯js版附源码下载
效果如图: 还有一款更简易的 下载地址: csdn下载需要c币,没有c币可从微信公众号[无心有云] 发送[js版计算器],可获取百度云地址下载
- 团购、定时抢购倒计时js版
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 身份证号码有效性检测算法 ( js版 转 C#版 )
C#版 #region 检测是否是正确的身份证 /// <summary> /// 身份证验证 /// </summary> /// <param name=" ...
- 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法
转自:小茗同学的博客:小茗同学博客 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼 ...
- js版palppy brid代码_从 JS 引擎到 JS 运行时（上）
V8 和 Node.js 的关系,是许多前端同学们所津津乐道的--浏览器里的语言,又兼容了浏览器外的环境,两份快乐重叠在一起.而这两份快乐,又带来了更多的快乐--但你有没有想过,这两份快乐到底是如何重 ...
最新文章
- 好事也要好做---孔子责子贡
- ffmpeg 怎么处理udp音频_STREAM: srs 2.0release，ffmpeg实时转码udp流，出现只有音频没有视频的问题？...
- Java虚拟机学习（4）：JDK可视化监控工具
- 0125互联网新闻 | 抖音海外版 TikTok 12月新增7500万;少儿编程平台“编程猫”计划在2 年内IPO...
- CodeForces - 466C Number of Ways(推公式/dp)
- python是什么-马哥教育官网-专业Linux培训班,Python培训机构
- centos7.x使用yum安装nginx
- Pygame 安装教程
- python工具箱系列（三）
- 基于TI Davinci架构的多核/双核开发高速扫盲（以OMAP L138为例），dm8168多核开发參考以及达芬奇系列资料user guide整理...
- 私有云计算机械硬盘还是固态硬盘,机械硬盘居然也限制写入量，吓得我又买一块固态硬盘...
- 干货！量子技术入门、进阶、行业专家观点、最新资讯！1000篇好文帮你揭开量子技术神秘面纱!
- 台式机主板常见接口资料
- Oracle SPARC T5-2 服务器：硬件规格
- matlab求解不等式方程组解集,matlab求不等式方程组的可行解
- 微信小程序（八）实战——加载图片images
- tl-wdr5620虚拟服务器设置,TP-Link TL-WDR5620路由器怎么设置
- 谷歌小恐龙作弊+作死方法
- 提示程序需要Windows 7 Service Pack 1或更高版本问题如何解决？
- 小米路由器3G R3G 刷入Breed和OpenWrt 20.02.2 的记录
热门文章
- 关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别
- 自动化测试---Assert
- 网站链接自动化测试原理及工具介绍
- 目标检测二十年间的那些事儿——从传统方法到深度学习
- Nature调查再聚焦读博压力：超1/3博士生焦虑抑郁，大学有没有能哭的地方？
- 场景文字识别的算法创新与应用，来自百度的技术前沿
- 腾讯 PCG 招计算机视觉实习生！52CV关注者可加速面试进程
- 3D建模突然火起来了之后应该如何面对？
- 收藏 | Python必备技能之 25个Matplotlib常用代码！
- 独家分享| 2019年校招大厂算法自己经历和好友经验（大疆，百度，腾讯……）