本文主要介绍如何使用HTML三件套来实现制作一个网页小游戏-----球球坠落,玩家需要控制键盘来移动小球落在不断上升的台阶上,避免碰到最顶部或者掉进悬崖中,看能持续多久时间,获得更高的得分
游戏效果图
HTML+CSS部分
<html><head></head><body><!-- 4个board --><divid="board1"style="position: absolute; width:80px; height:10px; left:420px; top:555px; background-color: cadetblue;"></div><divid="board2"style="position: absolute; width:80px; height:10px; left:520px; top:555px; background-color: cadetblue;"></div><divid="board3"style="position: absolute; width:80px; height:10px; left:620px; top:555px; background-color: cadetblue;"></div><divid="board4"style="position: absolute; width:80px; height:10px; left:720px; top:555px; background-color: cadetblue;"></div><!-- 小球 --><divid="ball"class="circle"style="width:20px; height:20px; background-color:crimson; border-radius: 50%; position:absolute; left:600px; top:100px"></div><!-- 框 --><divid="box"style="border: 5px solid #555555; width:400px; height:550px"></div><!-- 分数 过的board越多，分数越高 --><divid="score"style="width:200px; height:10px; position:absolute; left:900px; font-family:'隶书'; font-size: 30px;">分数：0</div><!-- 游戏结束 --><divid="gg"style="width:200px; height:10px; position:absolute; left:550px; top:200px;font-family:'隶书'; font-size: 30px; display: none;">游戏结束</div></body></html>
JAVASCRIPT部分
<script>// 设置box的样式varbox=document.getElementById("box"); box.style.position="absolute"; box.style.left="400px"; // 设置board的样式varboard1=document.getElementById("board1"); varboard2=document.getElementById("board2"); varboard3=document.getElementById("board3"); varboard4=document.getElementById("board4"); // 声音varshengyin=newAudio(); shengyin.src="声音2.mp3"; shengyinFlag=0; // 用来表示小球在第几块board上// 键盘事件函数varball=document.getElementById("ball"); document.onkeydown=f; functionf(e){ vare=e||window.event; switch(e.keyCode){ case37: // 按下左键，小球左移，但不要超过左边框if(ball.offsetLeft>=box.offsetLeft+10) ball.style.left=ball.offsetLeft-8+"px"; break; case39: // 按下右键，小球右移，但不要超过由边框if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10) ball.style.left=ball.offsetLeft+8+"px"; break; case32: } } // 定义一个分数变量varfenshu=0; // 定义一个函数，移动给定的一个boardfunctionmoveBoard(board) { vart1=board.offsetTop; if(t1<=0) { // 如果board移到最上面了，就随机换个水平位置，再移到最下面t2=Math.floor(Math.random() * (720-420) +420); board.style.left=t2+"px"; board.style.top="555px"; fenshu+=1; //分数增加1document.getElementById("score").innerHTML="分数："+fenshu; } // elseboard.style.top=board.offsetTop-1+"px"; } // 定义小球的速度变量varstartSpeed=1; varballSpeed=startSpeed; // step函数是游戏界面的单位变化函数functionstep() { // board直接上下隔得太近，就逐个移动，否则，同时移动vart1=Math.abs(board1.offsetTop-board2.offsetTop); vart2=Math.abs(board2.offsetTop-board3.offsetTop); vart3=Math.abs(board3.offsetTop-board4.offsetTop); // 定义一个board之间的间隔距离vart4=140; if(t1<t4) { moveBoard(board1); } elseif(t2<t4) { moveBoard(board1); moveBoard(board2); } elseif(t3<t4) { moveBoard(board1); moveBoard(board2); moveBoard(board3); } else{ moveBoard(board1); moveBoard(board2); moveBoard(board3); moveBoard(board4); } // 定义小球的垂直移动规则，1、向下匀加速运动，2、如果碰到board就被board持续抬上去，// 直到按左右键离开了该board// 如果小球的纵坐标等于某个board的纵坐标，就被抬起vart5=Math.abs(ball.offsetTop-board1.offsetTop); vart6=Math.abs(ball.offsetTop-board2.offsetTop); vart7=Math.abs(ball.offsetTop-board3.offsetTop); vart8=Math.abs(ball.offsetTop-board4.offsetTop); if(t5<=ball.offsetHeight&&t5>0&&ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth) { ball.style.top=board1.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=1) { shengyin.play(); shengyinFlag=1; } } elseif(t6<=ball.offsetHeight&&t6>0&&ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth) { ball.style.top=board2.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=2) { shengyin.play(); shengyinFlag=2; } } elseif(t7<=ball.offsetHeight&&t7>0&&ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth) { ball.style.top=board3.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=3) { shengyin.play(); shengyinFlag=3; } } elseif(t8<=ball.offsetHeight&&t8>0&&ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth) { ball.style.top=board4.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=4) { shengyin.play(); shengyinFlag=4; } } else{ ballSpeed=ballSpeed+0.01; // 数字相当于加速度ball.style.top=ball.offsetTop+ballSpeed+"px"; } // ballSpeed = ballSpeed + 0.01; // 数字相当于加速度// ball.style.top = ball.offsetTop + ballSpeed + "px";// 如果小球跑出来box，就结束游戏if(ball.offsetTop==0||ball.offsetTop>=box.offsetTop+box.offsetHeight) { clearInterval(gameover); ball.style.display='none'; board1.style.display='none'; board2.style.display='none'; board3.style.display='none'; board4.style.display='none'; vargg=document.getElementById("gg"); //显示游戏结束gg.style.display='block'; } } vargameover=setInterval("step();", 8); </script>
代码整合
<!DOCTYPEhtml><html><head></head><body><!--4个board--><divid="board1"style="position: absolute; width:80px; height:10px; left:420px; top:555px; background-color: cadetblue;"></div><divid="board2"style="position: absolute; width:80px; height:10px; left:520px; top:555px; background-color: cadetblue;"></div><divid="board3"style="position: absolute; width:80px; height:10px; left:620px; top:555px; background-color: cadetblue;"></div><divid="board4"style="position: absolute; width:80px; height:10px; left:720px; top:555px; background-color: cadetblue;"></div><!--小球--><divid="ball"class="circle"style="width:20px; height:20px; background-color:crimson; border-radius: 50%; position:absolute; left:600px; top:100px"></div><!--框--><divid="box"style="border: 5px solid #555555; width:400px; height:550px"></div><!--分数过的board越多，分数越高--><divid="score"style="width:200px; height:10px; position:absolute; left:900px; font-family:'隶书'; font-size: 30px;">分数：0</div><!--游戏结束--><divid="gg"style="width:200px; height:10px; position:absolute; left:550px; top:200px;font-family:'隶书'; font-size: 30px; display: none;">游戏结束</div><script>// 设置box的样式varbox=document.getElementById("box"); box.style.position="absolute"; box.style.left="400px"; // 设置board的样式varboard1=document.getElementById("board1"); varboard2=document.getElementById("board2"); varboard3=document.getElementById("board3"); varboard4=document.getElementById("board4"); // 声音varshengyin=newAudio(); shengyin.src="声音2.mp3"; shengyinFlag=0; // 用来表示小球在第几块board上// 键盘事件函数varball=document.getElementById("ball"); document.onkeydown=f; functionf(e){ vare=e||window.event; switch(e.keyCode){ case37: // 按下左键，小球左移，但不要超过左边框if(ball.offsetLeft>=box.offsetLeft+10) ball.style.left=ball.offsetLeft-8+"px"; break; case39: // 按下右键，小球右移，但不要超过由边框if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10) ball.style.left=ball.offsetLeft+8+"px"; break; case32: } } // 定义一个分数变量varfenshu=0; // 定义一个函数，移动给定的一个boardfunctionmoveBoard(board) { vart1=board.offsetTop; if(t1<=0) { // 如果board移到最上面了，就随机换个水平位置，再移到最下面t2=Math.floor(Math.random() * (720-420) +420); board.style.left=t2+"px"; board.style.top="555px"; fenshu+=1; //分数增加1document.getElementById("score").innerHTML="分数："+fenshu; } // elseboard.style.top=board.offsetTop-1+"px"; } // 定义小球的速度变量varstartSpeed=1; varballSpeed=startSpeed; // step函数是游戏界面的单位变化函数functionstep() { // board直接上下隔得太近，就逐个移动，否则，同时移动vart1=Math.abs(board1.offsetTop-board2.offsetTop); vart2=Math.abs(board2.offsetTop-board3.offsetTop); vart3=Math.abs(board3.offsetTop-board4.offsetTop); // 定义一个board之间的间隔距离vart4=140; if(t1<t4) { moveBoard(board1); } elseif(t2<t4) { moveBoard(board1); moveBoard(board2); } elseif(t3<t4) { moveBoard(board1); moveBoard(board2); moveBoard(board3); } else{ moveBoard(board1); moveBoard(board2); moveBoard(board3); moveBoard(board4); } // 定义小球的垂直移动规则，1、向下匀加速运动，2、如果碰到board就被board持续抬上去，// 直到按左右键离开了该board// 如果小球的纵坐标等于某个board的纵坐标，就被抬起vart5=Math.abs(ball.offsetTop-board1.offsetTop); vart6=Math.abs(ball.offsetTop-board2.offsetTop); vart7=Math.abs(ball.offsetTop-board3.offsetTop); vart8=Math.abs(ball.offsetTop-board4.offsetTop); if(t5<=ball.offsetHeight&&t5>0&&ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth) { ball.style.top=board1.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=1) { shengyin.play(); shengyinFlag=1; } } elseif(t6<=ball.offsetHeight&&t6>0&&ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth) { ball.style.top=board2.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=2) { shengyin.play(); shengyinFlag=2; } } elseif(t7<=ball.offsetHeight&&t7>0&&ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth) { ball.style.top=board3.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=3) { shengyin.play(); shengyinFlag=3; } } elseif(t8<=ball.offsetHeight&&t8>0&&ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth&&ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth) { ball.style.top=board4.offsetTop-ball.offsetHeight+"px"; ballSpeed=startSpeed; if(shengyinFlag!=4) { shengyin.play(); shengyinFlag=4; } } else{ ballSpeed=ballSpeed+0.01; // 数字相当于加速度ball.style.top=ball.offsetTop+ballSpeed+"px"; } // ballSpeed = ballSpeed + 0.01; // 数字相当于加速度// ball.style.top = ball.offsetTop + ballSpeed + "px";// 如果小球跑出来box，就结束游戏if(ball.offsetTop==0||ball.offsetTop>=box.offsetTop+box.offsetHeight) { clearInterval(gameover); ball.style.display='none'; board1.style.display='none'; board2.style.display='none'; board3.style.display='none'; board4.style.display='none'; vargg=document.getElementById("gg"); //显示游戏结束gg.style.display='block'; } } vargameover=setInterval("step();", 8); </script></body></html>
