- 浏览: 43731 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
nange223:
你的二维数组的数据"int data[][]&quo ...
Java解最短路径问题 -
zpsailor:
superobin 写道贴个早些年写的,带AI的。。。。那时候 ...
JS版俄罗斯方块(带程序说明文档) -
zpsailor:
kingdom031 写道楼主写的不错,我大致看了一下,你那个 ...
JS版俄罗斯方块(带程序说明文档) -
kingdom031:
楼主写的不错,我大致看了一下,你那个bug。
1、可以加一个全 ...
JS版俄罗斯方块(带程序说明文档) -
superobin:
贴个早些年写的,带AI的。。。。那时候还不太懂闭包。。。。
h ...
JS版俄罗斯方块(带程序说明文档)
这几天用js写了个俄罗斯方块游戏,贴出来给大家分享下,由于在测试中为了方便,有些功能是没有添加上去的,这些在程序说明文档中都有记载,如果你对这个程序感兴趣,可以加载了自己将其完善下,相当于对程序的一个升级版本吧,呵呵~
由于没有过多时间来测试,所以程序中应该还存在不够严谨的地方,相信广大程序爱好者可以将其升级成为更完美的版本。我衷心的希望你能将完善后的版本通过邮件分享给我。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>俄罗斯方块游戏</title> <script type="text/javascript" src="tetris.js"></script> <style type="text/css"> .gridStyle{ border-left: solid;#ffffff 1px; border-top: solid;#ffffff 1px; border-right: solid;#969696 1px; border-bottom: solid;#969696 1px; font-size: 10pt; } tr { font-family:"楷体"; font-size: 10pt; } </style> </head> <body onload="InitGame();" onkeydown="keyDown();"> <table border="1" cellpadding="1" cellspacing="1" align="center"> <tr> <td><span id="GameBody"></span></td> <td> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td><span id="ForeBody"></span></td> </tr> <tr> <td><br><input type="button" value="开始游戏" onclick="startGame();"></td> </tr> <tr> <td><br><input type="button" value="暂停游戏" onclick="pause();"></td> </tr> <tr> <td><br><input type="button" value="结束游戏" onclick="stopGame();"></td> </tr> <tr> <td><br>当前积分:<span id="curScore">0</td> </tr> <tr> <td><br>当前级别:<span id="curLevel">1</td> </tr> <tr> <td><br>已消行数:<span id="curDelRows">0</td> </tr> </table> </td> </tr> </table> </body> </html>
/*********************************************************************************** * @author: sailor * * @version: Tetris1.0 * * date : 2010-04-05 * * E-Mail:zpsailor@yahoo.com.cn * * QQ:251396377 ***********************************************************************************/ var cols=12,rows=20,grid=20; var type=-1,nextType; var curSqure,nextSqure;//当前图形块和下一个图形块 var Score=0,dels=0,level=1;//记录积分,消除行数,当前游戏级别 var MyTimer; var speed = new Array(500,450,400,350,300,250,200,150,100); var myColor=new Array("gray","cyan","cyan","cyan","cyan","cyan","cyan","cyan"); function $(id){return document.getElementById(id);} function CreateArea(rows,cols,name){ var str="<table align='center' border='1' style=\"background: "+myColor[0]+"\">"; for(var i=0;i<rows;i++){ str+="<tr height="+grid+">"; for(var j=0;j<cols;j++){ var id=name+i+"#"+j; str+="<td id="+id+" width="+grid+" class='gridStyle' style=\"background: "+myColor[0]+"\"></td>" } str+="</tr>"; } str+="</table>"; return str; } /** * 初始化游戏 */ function InitGame(){ $("GameBody").innerHTML=CreateArea(rows,cols,"gameGrid"); $("ForeBody").innerHTML=CreateArea(4,4,"foreGrid"); type=parseInt((Math.random()*7))+1; var mainSqure=chooseSqure(type,cols/2,1); nextType=parseInt((Math.random()*7))+1; var foreSqure=chooseSqure(nextType,4/2-1,1); reDraw(mainSqure,"gameGrid"); reDraw(foreSqure,"foreGrid"); curSqure=mainSqure; nextSqure=foreSqure; } /** * 随即产生图形 */ function chooseSqure(type,x,y){ var mySqure=new Array(4); switch(type){ case 1: case 15: mySqure[0]=new Squre(x-1,y,1); mySqure[1]=new Squre(x,y,1); mySqure[2]=new Squre(x+1,y,1); mySqure[3]=new Squre(x+2,y,1); break; case 2: case 9: case 16: case 23: mySqure[0]=new Squre(x,y-1,2); mySqure[1]=new Squre(x,y,2); mySqure[2]=new Squre(x+1,y-1,2); mySqure[3]=new Squre(x+1,y,2); break; case 3: mySqure[0]=new Squre(x,y-1,3); mySqure[1]=new Squre(x,y,3); mySqure[2]=new Squre(x,y+1,3); mySqure[3]=new Squre(x+1,y,3); break; case 4: case 18: mySqure[0]=new Squre(x,y-1,4); mySqure[1]=new Squre(x,y,4); mySqure[2]=new Squre(x+1,y,4); mySqure[3]=new Squre(x+1,y+1,4); break; case 5: case 19: mySqure[0]=new Squre(x+1,y-1,5); mySqure[1]=new Squre(x,y,5); mySqure[2]=new Squre(x+1,y,5); mySqure[3]=new Squre(x,y+1,5); break; case 6: mySqure[0]=new Squre(x+1,y-1,6); mySqure[1]=new Squre(x,y,6); mySqure[2]=new Squre(x,y-1,6); mySqure[3]=new Squre(x,y+1,6); break; case 7: mySqure[0]=new Squre(x-1,y-1,7); mySqure[1]=new Squre(x,y,7); mySqure[2]=new Squre(x,y-1,7); mySqure[3]=new Squre(x,y+1,7); break; case 8: case 22: mySqure[0]=new Squre(x,y-1,1); mySqure[1]=new Squre(x,y,1); mySqure[2]=new Squre(x,y+1,1); mySqure[3]=new Squre(x,y+2,1); break; case 10: mySqure[0]=new Squre(x-1,y,3); mySqure[1]=new Squre(x,y,3); mySqure[2]=new Squre(x+1,y,3); mySqure[3]=new Squre(x,y+1,3); break; case 11: case 25: mySqure[0]=new Squre(x-1,y+1,4); mySqure[1]=new Squre(x,y,4); mySqure[2]=new Squre(x,y+1,4); mySqure[3]=new Squre(x+1,y,4); break; case 12: case 26: mySqure[0]=new Squre(x-1,y,5); mySqure[1]=new Squre(x,y,5); mySqure[2]=new Squre(x,y+1,5); mySqure[3]=new Squre(x+1,y+1,5); break; case 13: mySqure[0]=new Squre(x-1,y,6); mySqure[1]=new Squre(x,y,6); mySqure[2]=new Squre(x+1,y,6); mySqure[3]=new Squre(x+1,y+1,6); break; case 14: mySqure[0]=new Squre(x+1,y-1,7); mySqure[1]=new Squre(x,y,7); mySqure[2]=new Squre(x+1,y,7); mySqure[3]=new Squre(x-1,y,7); break; case 17: mySqure[0]=new Squre(x-1,y,3); mySqure[1]=new Squre(x,y,3); mySqure[2]=new Squre(x,y-1,3); mySqure[3]=new Squre(x,y+1,3); break; case 20: mySqure[0]=new Squre(x-1,y,6); mySqure[1]=new Squre(x,y,6); mySqure[2]=new Squre(x,y-1,6); mySqure[3]=new Squre(x,y-2,6); break; case 21: mySqure[0]=new Squre(x,y-1,7); mySqure[1]=new Squre(x,y,7); mySqure[2]=new Squre(x,y-2,7); mySqure[3]=new Squre(x+1,y,7); break; case 24: mySqure[0]=new Squre(x-1,y,3); mySqure[1]=new Squre(x,y,3); mySqure[2]=new Squre(x+1,y,3); mySqure[3]=new Squre(x,y-1,3); break; case 27: mySqure[0]=new Squre(x,y-1,6); mySqure[1]=new Squre(x,y,6); mySqure[2]=new Squre(x+1,y,6); mySqure[3]=new Squre(x+2,y,6); break; case 28: mySqure[0]=new Squre(x,y-1,7); mySqure[1]=new Squre(x,y,7); mySqure[2]=new Squre(x+1,y-1,7); mySqure[3]=new Squre(x+2,y-1,7); break; } return mySqure; } function Squre(col,row,color){ this.col=col; this.row=row; this.color=color; } /** * 重画 */ function reDraw(squre,name){ var area=$(name); for(var i=0;i<squre.length;i++){ var id=name+squre[i].row+"#"+squre[i].col; // alert(id); $(id).style.background=myColor[squre[i].color]; } } function clearDraw(squre,name){ var area=$(name); for(var i=0;i<squre.length;i++){ var id=name+squre[i].row+"#"+squre[i].col; // alert(id); $(id).style.background=myColor[0]; } } function keyDown(){ switch(event.keyCode){ case 38: overTurn();break; case 40: moveCurSqure(0,1,"down");break; case 37: moveCurSqure(-1,0,"left");break; case 39: moveCurSqure(1,0,"right");;break; } } /** * 移动当前图块 */ function moveCurSqure(x,y,kind){ var nextChange=new Array(4); for(var i=0;i<curSqure.length;i++){ nextChange[i]=new Squre(curSqure[i].col+x,curSqure[i].row+y,curSqure[i].color); } if(isBound(kind,nextChange)&&kind=="down"){ if(isGameOver()){ window.clearInterval(MyTimer); alert("游戏结束!"); return ; } deleteRows();//执行消除行 doSwitch(); } if(isBound(kind,nextChange)){ return ; } clearDraw(curSqure,"gameGrid"); //如果是想要移动的下一个位置已经有了阻碍物,障碍物在左右两侧,则拒绝移动,在底端,则当前图块落定,切换下一图块 for(var i=0;i<nextChange.length;i++){ var id="gameGrid"+nextChange[i].row+"#"+nextChange[i].col; if($(id).style.background!=myColor[0]){ if(kind=="down"){ reDraw(curSqure,"gameGrid"); if(isGameOver()){ window.clearInterval(MyTimer); alert("游戏结束!"); return ; } deleteRows();//执行消除行 doSwitch(); } reDraw(curSqure,"gameGrid"); return; } } reDraw(nextChange,"gameGrid"); curSqure=nextChange; } /** * 判断图块是否到了边界了 */ function isBound(kind,squre){ var theSqure=squre; var downMax=Math.max(Math.max(theSqure[0].row,theSqure[1].row),Math.max(theSqure[2].row,theSqure[3].row)); var rightMax=Math.max(Math.max(theSqure[0].col,theSqure[1].col),Math.max(theSqure[2].col,theSqure[3].col)); var leftMax=Math.min(Math.min(theSqure[0].col,theSqure[1].col),Math.min(theSqure[2].col,theSqure[3].col)); var upMax=Math.min(Math.min(theSqure[0].row,theSqure[1].row),Math.min(theSqure[2].row,theSqure[3].row)); if(downMax>rows-1&&kind=="down"){ return true; } if(rightMax>cols-1&&kind=="right"){ return true; } if(leftMax<0&&kind=="left"){ return true; } if(upMax<0&&kind=="up"){ return true; } return false; } /** * 判断图块显示区域是否有障碍物 */ function haveObstacle(kind,squre){ var theSqure=squre; var downMax=Math.max(Math.max(theSqure[0].row,theSqure[1].row),Math.max(theSqure[2].row,theSqure[3].row)); var rightMax=Math.max(Math.max(theSqure[0].col,theSqure[1].col),Math.max(theSqure[2].col,theSqure[3].col)); var leftMax=Math.min(Math.min(theSqure[0].col,theSqure[1].col),Math.min(theSqure[2].col,theSqure[3].col)); var upMax=Math.min(Math.min(theSqure[0].row,theSqure[1].row),Math.min(theSqure[2].row,theSqure[3].row)); clearDraw(curSqure,"gameGrid"); for(var i=0;i<theSqure.length;i++){ var id="gameGrid"+theSqure[i].row+"#"+theSqure[i].col; //alert(id); if($(id).style.background!=myColor[0]){ if(kind=="left"&&theSqure[i].col<rightMax){ reDraw(curSqure,"gameGrid"); return true; } if(kind=="right"&&theSqure[i].col>leftMax){ reDraw(curSqure,"gameGrid"); return true; } if(kind=="down"&&theSqure[i].col<downMax){ reDraw(curSqure,"gameGrid"); return true; } } } return false; } /** * 一个图块已落定,切换到下一个图块 */ function doSwitch(){ type=nextType; nextType=parseInt((Math.random()*7))+1; var mainSqure=chooseSqure(type,cols/2,1); var foreSqure=chooseSqure(nextType,4/2-1,1); reDraw(mainSqure,"gameGrid"); clearDraw(nextSqure,"foreGrid"); reDraw(foreSqure,"foreGrid"); curSqure=mainSqure; nextSqure=foreSqure; window.clearInterval(MyTimer); startGame(); } /** * 实现当前图形的翻转 */ function overTurn(){ var nextChange; var oldType=type; type+=7; if(type>28){ type-=28; } var nextChange=chooseSqure(type,curSqure[1].col,curSqure[1].row); //判断边界处的旋转 while(isBound("left",nextChange)){ var x=1,y=0; for(var i=0;i<nextChange.length;i++){ nextChange[i].col+=x; nextChange[i].row+=y; } } while(isBound("right",nextChange)){ var x=-1,y=0; for(var i=0;i<nextChange.length;i++){ nextChange[i].col+=x; nextChange[i].row+=y; } } while(isBound("up",nextChange)){ var x=0,y=1; for(var i=0;i<nextChange.length;i++){ nextChange[i].col+=x; nextChange[i].row+=y; } } while(isBound("down",nextChange)){ var x=0,y=-1; for(var i=0;i<nextChange.length;i++){ nextChange[i].col+=x; nextChange[i].row+=y; } } //处理有障碍物处的旋转 if(haveObstacle("left",nextChange)&&haveObstacle("right",nextChange)){ type=oldType; return ; } if(haveObstacle("left",nextChange)){ while(haveObstacle("left",nextChange)){ var x=1,y=0; for(var i=0;i<nextChange.length;i++){ nextChange[i].col+=x; nextChange[i].row+=y; } if(isBound("right",nextChange)){ type=oldType; return ; }else{ if(haveObstacle("right",nextChange)){ type=oldType; return ; } } } } if(haveObstacle("right",nextChange)){ while(haveObstacle("right",nextChange)){ var x=-1,y=0; for(var i=0;i<nextChange.length;i++){ nextChange[i].col+=x; nextChange[i].row+=y; } if(isBound("left",nextChange)){ type=oldType; return ; }else { if(haveObstacle("left",nextChange)){ type=oldType; return ; } } } } if(haveObstacle("down",nextChange)){ while(haveObstacle("down",nextChange)){ var x=0,y=-1; for(var i=0;i<nextChange.length;i++){ nextChange[i].col+=x; nextChange[i].row+=y; } if(isBound("up",nextChange)){ type=oldType; return ; } } } clearDraw(curSqure,"gameGrid"); curSqure=nextChange; reDraw(curSqure,"gameGrid"); } /** * 消去一行或多行 */ function deleteRows(){ var delRows=new Array();//记录需要删除的行 var downMax=Math.max(Math.max(curSqure[0].row,curSqure[1].row),Math.max(curSqure[2].row,curSqure[3].row)); var upMax=Math.min(Math.min(curSqure[0].row,curSqure[1].row),Math.min(curSqure[2].row,curSqure[3].row)); for(var i=upMax;i<=downMax;i++){ var mark=true; for(var j=0;j<cols;j++){ var id="gameGrid"+i+"#"+j; if($(id).style.background==myColor[0]){ mark=false; } } if(mark) { delRows.push(i); } } //执行删除 for(var i=0;i<delRows.length;i++){ for(var j=0;j<cols;j++){ var id="gameGrid"+delRows[i]+"#"+j; $(id).style.background=myColor[0]; } } if(delRows.length>0) moveRows(delRows); } /** * 移动一行或多行 */ function moveRows(moveR){ var mRows=moveR.length; Score+=mRows*100+parseInt(mRows/2)*100; dels+=mRows; level=parseInt(Score/2000)+1; if(level>8){ level-=8; } $("curLevel").innerText=level; $("curScore").innerText=Score; $("curDelRows").innerText=dels; window.clearInterval(MyTimer); startGame(); //将消除的行的上面部分移动下来 for(var n=0;n<mRows;n++){ var upRows=moveR[n]-1; for(var i=upRows;i>0;i--) for(var j=0;j<cols;j++){ var id="gameGrid"+i+"#"+j; var moveID="gameGrid"+(1+i)+"#"+j; $(moveID).style.background=$(id).style.background; $(id).style.background=myColor[0]; } } } /** * 开始游戏 */ function startGame(){ MyTimer=window.setInterval("moveCurSqure(0,1,'down')",speed[level-1]); } /** * 游戏暂停 */ function pause(){ window.clearInterval(MyTimer); } function stopGame(){ if(window.confirm("确定结束游戏?")){ window.close(); } } /** * 判断游戏是否结束 */ function isGameOver(){ var downMin=Math.min(Math.min(curSqure[0].row,curSqure[1].row),Math.min(curSqure[2].row,curSqure[3].row)); if(downMin<=0){ return true; } else { return false; } }
- readme.rar (2.1 KB)
- 下载次数: 1022
评论
3 楼
gaozi131
2010-04-10
楼主 厉害
下载学习了 也感谢分享
下载学习了 也感谢分享
2 楼
zpsailor
2010-04-10
ccxw1983 写道
不错,赞一个
呵呵~,期待着大家帮忙完善下
1 楼
ccxw1983
2010-04-10
不错,赞一个
相关推荐
使用HTML+JS实现的一个俄罗斯方块小游戏,该项目有很高的自由性,你可以修改其中的许多内容。 系统在生活中的应用十分广泛,无论是个人还是企业,在日常生活中都需要系统,不仅可以提高工作效率和质量,也可以提高...
【标题】"自己写的js 版 俄罗斯方块 html div js dom" 揭示了这个项目的核心技术点:使用JavaScript编程语言实现了一个基于HTML和CSS的俄罗斯方块游戏。在这个游戏中,HTML元素(尤其是div)被用作游戏的图形表示,...
【标题】:“自己写的小程序俄罗斯方块” 这个标题揭示了一个个人编程项目,开发者编写了一个小型的俄罗斯方块游戏。俄罗斯方块是一款经典的电子游戏,玩家需要操控各种形状的方块下落,通过合理布局使它们在底部...
【描述】中提到,这是一个使用HTML5编写的俄罗斯方块程序。HTML5是超文本标记语言(HTML)的第五个版本,它在传统HTML的基础上添加了许多新特性,如离线存储、媒体元素、 canvas画布、svg矢量图以及geolocation定位...
8. **文档说明**:压缩包中可能包含的程序说明文档,会详细解释代码结构、关键函数的用途,帮助初学者理解项目的实现细节。 这个项目不仅展示了JavaScript的基本语法和面向对象编程,还涉及到动画制作、游戏设计、...
在线俄罗斯方块网页游戏程序的源码是一份用于学习编程和游戏开发的宝贵资源,它提供了实现经典游戏“俄罗斯方块”的完整代码。通过研究这份源码,开发者可以深入理解如何利用HTML、CSS和JavaScript等前端技术来创建...
HTML文件“俄罗斯方块.html”可能是游戏的说明文档或在线版本的代码预览。如果是文档,它可能包含了游戏的玩法说明、开发过程的记录或者源代码的解释。如果是在线版本的代码预览,那么可能利用了HTML5的Canvas或者...
在【TetrisGame-master】这个压缩包中,你可能会找到包含源代码、资源文件(如图像和音频)、文档说明甚至示例运行程序。通过阅读和分析这些文件,你可以逐步学习并掌握以上提到的知识点,从而自己动手制作一个功能...
标题 "c语言Turbo C下写的俄罗斯方块.rar" 暗示了这是一个使用C语言在 Turbo C 编译器环境下实现的俄罗斯方块游戏项目。这个项目可能包含了一个完整的C语言源代码文件,用于展示如何用低级别的编程语言创建一个经典...
资源内容:项目全套源码+完整文档 源码说明: 全部项目源码都是经过测试校正后百分百成功运行。 SpringBoot 毕业设计,SpringBoot 课程设计,基于SpringBoot+Vue开发的,含有代码注释,新手也可看懂。ssm整合开发,...
资源内容:项目全套源码+完整文档 源码说明: 全部项目源码都是经过测试校正后百分百成功运行。 SpringBoot 毕业设计,SpringBoot 课程设计,基于SpringBoot+Vue开发的,含有代码注释,新手也可看懂。ssm整合开发,...
资源内容:项目全套源码+完整文档 源码说明: 全部项目源码都是经过测试校正后百分百成功运行。 SpringBoot 毕业设计,SpringBoot 课程设计,基于SpringBoot+Vue开发的,含有代码注释,新手也可看懂。ssm整合开发,...
资源内容:项目全套源码+完整文档 源码说明: 全部项目源码都是经过测试校正后百分百成功运行。 SpringBoot 毕业设计,SpringBoot 课程设计,基于SpringBoot+Vue开发的,含有代码注释,新手也可看懂。ssm整合开发,...
文中提到的“js方块躲避游戏”就是一个使用JavaScript实现的简单交互游戏。 2. 鼠标事件处理:游戏通过鼠标事件控制方块移动。事件包括`mousedown`(鼠标按下)、`mousemove`(鼠标移动)和`mouseup`(鼠标释放)。...
资源内容:项目全套源码+完整文档 源码说明: 全部项目源码都是经过测试校正后百分百成功运行。 SpringBoot 毕业设计,SpringBoot 课程设计,基于SpringBoot+Vue开发的,含有代码注释,新手也可看懂。ssm整合开发,...
1. **小游戏**:JavaScript可以用于创建各种类型的小游戏,如经典的贪吃蛇、打地鼠、俄罗斯方块等。这些游戏通常涉及定时器(setInterval或setTimeout)来控制游戏循环,事件监听(如键盘和鼠标事件)来响应用户操作...
java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密 Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。 ...
java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密 Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。 ...
java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密 Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。 ...