h5乒乓球游戏大战完整版（不含音乐）

阅读：评论：0

h5乒乓球游戏大战完整版（不含音乐）

读了h5游戏制作这本书，看到一个好玩的简单的游戏，自己完善写如下，核心部分参考本书：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="playground"><div id="paddleB"></div><div id="ball"></div><div id="line"></div><div id="paddleA"></div>
</div>
<button id="start">开始</button>
<div>
<span>左边得分</span><div id="score1">0</div>
</div>
<div><span>右边得分</span><div id="score2">0</div>
</div>
<style>#line{left:200px;width:1px;height:200px;background:yellow;top:0px;border: 1px solid #088;position:absolute;}#ball{background:white;position:absolute;width: 20px;height: 20px;border: 1px solid #088;border-radius: 20px;background-color: #0FF;opacity: 0.5;}#paddleA{top:70px;left:300px;background:red;height:60px;width:20px;position:absolute;}#paddleB{top:70px;left:50px;background:red;height:60px;width:20px;position:absolute;}#playground{background:#00f;width:400px;height:200px;position:relative;overflow: hidden;}</style>
<script>var leftscore=0;var rightscore=0;var KEY={UP:38,DOWN:40,W:87,S:83}var ball={speed:5,x:150,y:100,directionX:1,directionY:1}$("#start").click(function() {timer1 = window.setInterval(moveBall,100);timer2 = window.setInterval(hitA,1);timer3 = window.setInterval(hitB,1);});function moveBall(){var playgroundheight=parseInt($("#playground").height());var playgroundwidth=parseInt($("#playground").width());if(ball.y+ball.speed*ball.directionY>playgroundheight-20){ball.directionY=-1;}if(ball.y+ball.speed*ball.directionY<0){ball.directionY=1;}if(ball.x+ball.speed*ball.directionX>playgroundwidth){ball.x=250;ball.y=100;$("#ball").css({"left":ball.x,"top":ball.y});ball.directionX=-1;leftscore++;$("#score1").text(leftscore);}if(ball.x+ball.speed*ball.directionX<0){ball.x=150;ball.y=100;$("#ball").css({"left":ball.x,"top":ball.y});ball.directionX=1;rightscore++;$("#score2").text(rightscore);}ball.x+=ball.speed*ball.directionX;ball.y+=ball.speed*ball.directionY;
$("#ball").css({"left":ball.x,"top":ball.y
});}
function hitB(){var paddleBX=parseInt($("#paddleB").css("left"))+parseInt($("#paddleB").css("width"));var paddleBYBottom=parseInt($("#paddleB").css("top"))+parseInt($("#paddleB").css("height"));var paddleBYTop=parseInt($("#paddleB").css("top"));if(ball.x+ball.speed*ball.directionX<paddleBX){if(ball.y+ball.speed*ball.directionY<=paddleBYBottom&&ball.y+ball.speed*ball.directionY>=paddleBYTop){ball.directionX=1;}}
}
function hitA(){var paddleAX=parseInt($("#paddleA").css("left"))-parseInt($("#paddleA").css("width"));var paddleAYBottom=parseInt($("#paddleA").css("top"))+parseInt($("#paddleA").css("height"));var paddleAYTop=parseInt($("#paddleA").css("top"));if(ball.x+ball.speed*ball.directionX>=paddleAX){if(ball.y+ball.speed*ball.directionY<=paddleAYBottom&&ball.y+ball.speed*ball.directionY>=paddleAYTop){ball.directionX=-1;}}
}$(function(){$(document).keydown(function(e){switch(e.which){case KEY.UP:var top=parseInt($("#paddleB").css("top"));$("#paddleB").css("top",top-5);break;case KEY.DOWN:var top=parseInt($("#paddleB").css("top"));$("#paddleB").css("top",top+5);break;case KEY.W:var top=parseInt($("#paddleA").css("top"));$("#paddleA").css("top",top-5);break;case KEY.S:var top=parseInt($("#paddleA").css("top"));$("#paddleA").css("top",top+5);break;}});});</script></body>
</html>

本文发布于:2024-01-28 14:19:33，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17064227778029.html

上一篇：牛客国庆集训派对Day4

下一篇：基于Arduino的乒乓球机器人

标签：不含完整版乒乓球大战游戏

留言与评论（共有 0 条评论）