| 标题 | HTML5+JS实现俄罗斯方块原理及具体步骤 |
| 范文 | 俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置，下面为大家详细介绍下 本游戏实现的基本原理: 游戏区域是限定大小的区域，本游戏的游戏区域有21×25个矩形,每个矩形width为10单位，heght为6个单位(canvas 的绝对单位是固定的，非像素)。 创建RusBlock类包含相应的数据和行为，创建二维数组aState[21][25]记录游戏区域中被标记的矩形。 俄罗斯方块有7个部件，每个部件所占的矩形的个数和位置不同，所以建立部件类，然后建立数组储存7个部件，每个部件包涵数组储存该部件所占的矩形的个数和位置。当下落的部件到底了，就会产生一个新的部件，就部件的被标记的矩形就会赋值给游戏区域的数组。 在游戏循环函数中，打印正在下落的部件，和已经固定好的部件，还有下一下落的部件。 基本知识: HTML5 CSS JS 本游戏包括三个文件: RusBlock.html:设定元素 RusBlock.css:设定样式 RusBlock.js:脚本控制 第一步:界面的设置和素材的准备 RusBlock.html 代码如下: <!DOCTYPE html> <html> <head> <title>RusBlock</title> <link rel=”stylesheet” type=”text/css” href=”RusBlock.css”> <script type=”text/javascript”> function ShareGame() { var URL = “http://share.renren.com/share/buttonshare.do?link=” + document.URL + “&title=RusBlock”; window.showModalDialog([URL]); } </script> </head> <body onkeyup=”Action(event)”> <audio loop=”loop” id=”Background-AudioPlayer” preload=”auto”> <source src=”audio/background.mp3″ type=”audio/mp3″/> </audio> <audio id=”GameOver-AudioPlayer” preload=”auto”> <source src=”audio/gameover.ogg” type=”audio/ogg”> </audio> <audio id=”Score-AudioPlayer” preload=”auto”> <source src=”audio/score.mp3″ type=”audio/mp3″/> </audio> <div id=”Game-Area”> <div id=”Button-Area”> <h1 id=”Game-Name”>RusBlock</h1> <button id=”Button-Game-Start” onclick=”GameStart()”>Start</button> <button id=”Button-Game-End” onclick=”GameEnd()”>End</button> <form id=”Form-Game-Level”> <select id=”Select-Game-Level”> <option value=”500″ selected=”selected”>Easy</option> <option value=”300″>Normal</option> <option value=”200″>Hard</option> </select> </form> <button onclick=”ShareGame()” id=”Button-Game-Share”>分享到人人</button> </div> <canvas id=”Game-Canvas”></canvas> <div id=”Score-Area”> <h2>Score</h2> <p id=”Game-Score”>0</p> </div> </div> <script type=”text/javascript” src=”RusBlock.js”></script> </body> </html> 第二步:样式 RosBlock.css 代码如下: body { background-color:gray; text-align:center; font-family:’Times New Roman’; background-image:url(“”); } h1#Game-Name { background-color:white; width:100%; font-size:x-large; } h2,#Game-Score { font-size:x-large; background-color:white; } #Game-Area { position:absolute; left:10%; width:80%; height:99%; } canvas#Game-Canvas { background-color:white; width:80%; height:98%; float:left; } #Button-Area ,#Score-Area{ width:10%; height:100%; float:left; } #Button-Game-Start ,#Button-Game-End,#Button-Game-Share,#Select-Game-Level{ width:100%; height:10%; font-size:larger; border-right-width:3px; background-color:white; } #Select-Game-Level { width:100%; height:100%; font-size:x-large; border-color:gray; } 第三步:编写js代码 RusBlock.js Rusblock类包括的成员解析: 数据: nCurrentComID:当前下落部件的ID aState[21][25]:存储游戏区域状态的数组 CurrentCom：当前下落的部件 NextCom：下一部件 ptIndex：当前下落的部件相对游戏区域的索引 函数: NewNextCom()：产生新的下一部件 NextComToCurrentCom():将下一部件的数据转移到当前下落的部件上 CanDown():判断当前部件是否还可以下落 CanNew():判断是否还可以产生新的部件 Left():当前部件向左移动 Right():当前部件向右移动 Rotate():当前部件顺时针旋转 Acceleratet():当前部件向下加速 Disappear():消去一行 CheckFail():判断是否游戏失败 InvalidateRect():刷新当前部件的区域 下载Demo |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。