<!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="paddleA"></div> </div> <style> #ball{ background:white; position:absolute; width: 20px; height: 20px; border: 1px solid #088; border-radius: 20px; background-color: #0FF; opacity: 0.5; } #paddleA{ margin-top:70px; margin-left:300px; background:red; height:60px; width:20px; position:absolute; } #paddleB{ margin-top:70px; margin-left:50px; background:red; height:60px; width:20px; position:absolute; } #playground{ background:#00f; width:400px; height:200px; position:relative; overflow: hidden; } </style> <script> var KEY={ UP:38, DOWN:40, W:87, S:83 } var ball={ speed:5, x:150, y:100, directionX:1, directionY:1 } $(document).ready(function() { timer1 = window.setInterval(moveBall,100); hit(); }) 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-20){ ball.directionX=-1; } if(ball.x+ball.speed*ball.directionX<0){ ball.directionX=1; } ball.x+=ball.speed*ball.directionX; ball.y+=ball.speed*ball.directionY; $("#ball").css({ "left":ball.x, "top":ball.y }); } function hit(){ 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(){ $(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>
实现乒乓球互打(待完善,板子和球碰撞在写)
最新推荐文章于 2022-05-18 16:16:47 发布