JavaScript小游戏

最新推荐文章于 2024-03-10 23:32:57 发布

技术空间

最新推荐文章于 2024-03-10 23:32:57 发布

阅读量648

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Ping Pong</title>  
    <script src="jquery-1.11.0.min.js"></script>  
    <style>
    	* {  
  box-sizing: border-box;  
  margin: 0px;  
  padding: 0px;  
}  
  
#playground{  
  background: url(images/bg1.png);  
  width: 400px;  
  height: 200px;  
  position: relative;  
}  
  
.paddle{  
  background: #bbf;  
  position: absolute;  
  left: 50px;  
  top: 70px;  
  width: 10px;  
  height: 70px;  
}  
  
#paddleB{  
  left:320px;  
}  
  
#ball{  
  background: #fbb;  
  position: absolute;  
  left: 150px;  
  top: 100px;  
  width: 10px;  
  height: 10px;  
  border-radius: 5px;  
}  
  
.score{  
  font-size: 24px;  
  position: relative;  
  left: 70px;  
  top: 50px;  
}  
  
#scoreboard{  
  position: relative;  
  left: 50px;  
  width: 250px;  
  height: 140px;  
  background: url(images/bg1.png) no-repeat center blue;  
}  
  
#game{  
  position: relative;  
  left: 500px;  
} 
    </style>
</head>  
<body>  
    <header>  
        <h1>Ping Pong</h1>  
    </header>  
  
    <div id="game">  
  
        <div id="scoreboard">  
            <div class="score">player A : <span id="scoreA">0</span></div>  
            <div class="score">player B : <span id="scoreB">0</span></div>  
        </div>  
  
        <div id="playground">  
            <div id="paddleA" class="paddle"></div>  
            <div id="paddleB" class="paddle"></div>  
            <div id="ball"></div>  
        </div>  
          
    </div>  
  
  
    <footer>  

    </footer>  
    <script>
    	window.οnlοad=function(){
    		var KEY = {  
    UP: 38,  
    Down: 40,  
    W: 87,  
    S: 83  
};  
  
var pingpong = {};  
pingpong.pressedKey = [];  
pingpong.ball = {  
    speed: 3,  
    x: 150,  
    y: 100,  
    radius: 5,  
    directionX: 1,  
    directionY: 1  
};  
pingpong.scoreA = 0;  
pingpong.scoreB = 0;  
  
$(function() {  
    pingpong.timer = setInterval(gameloop, 30);  
  
    $(document).keydown(function(e) {  
        pingpong.pressedKey[e.which] = true;  
    });  
    $(document).keyup(function(e) {  
        pingpong.pressedKey[e.which] = false;  
    });  
  
});  
  
function gameloop() {  
    moveBall();  
    movePaddles();  
}  
  
function moveBall() {  
    var playgroundHeight = parseInt($("#playground").height());  
    var playgroundWidth  = parseInt($("#playground").width());  
    var ball = pingpong.ball;  
  
    //check the directions for walls  
    if(ball.y + ball.speed*ball.directionY + 2*ball.radius > playgroundHeight)  
        ball.directionY = -1;  
    if(ball.y + ball.speed*ball.directionY < 0)  
        ball.directionY = 1;  
    if(ball.x + ball.speed*ball.directionX + 2*ball.radius > playgroundWidth)  
        ball.directionX = -1;  
    if(ball.x + ball.speed*ball.directionX < 0)  
        ball.directionX = 1;  
  
    //check the directions for paddles  
    var paddleAX = parseInt($("#paddleA").css("left")) +   
                    parseInt($("#paddleA").css("width"));  
    var paddleABottom = parseInt($("#paddleA").css("top")) +   
                        parseInt($("#paddleA").css("height"));  
    var paddleAUp = parseInt($("#paddleA").css("top"));  
      
    if(ball.x + ball.speed * ball.directionX <= paddleAX)  
        if(ball.y + ball.speed * ball.directionY <= paddleABottom &&   
            ball.y + ball.speed * ball.directionY >= paddleAUp)        
            ball.directionX = 1;          
  
    var paddleBX = parseInt($("#paddleB").css("left")) - 2 * ball.radius;  
    var paddleBBottom = parseInt($("#paddleB").css("top")) +   
                        parseInt($("#paddleB").css("height"));  
    var paddleBUp = parseInt($("#paddleB").css("top"));  
      
    if(ball.x + ball.speed * ball.directionX >= paddleBX)  
        if(ball.y + ball.speed * ball.directionY <= paddleBBottom &&   
            ball.y + ball.speed * ball.directionY >= paddleBUp)        
            ball.directionX = -1;     
  
    //update the position of ball  
    ball.x += ball.speed * ball.directionX;  
    ball.y += ball.speed * ball.directionY;  
  
    setBall(ball.x, ball.y);  
  
    if(ball.x > paddleBX) {    
        ball.x = 250;  
        ball.y = 100;  
        setBall(ball.x, ball.y);  
        ball.directionX = -1;  
        pingpong.scoreA++;  
        $("#scoreA").html(pingpong.scoreA);  
          
        pingpong.pressedKey = [];  
        alert("play A goal, press to continue");  
        for (var i = 100000000 - 1; i >= 0; i--);  
    }  
    if(ball.x < paddleAX) {    
        ball.x = 250;  
        ball.y = 100;  
        setBall(ball.x, ball.y);  
        ball.directionX = 1;  
        pingpong.scoreB++;  
        $("#scoreB").html(pingpong.scoreB);  
          
        pingpong.pressedKey = [];  
        alert("play B goal, press to continue");  
        for (var i = 100000000 - 1; i >= 0; i--);  
    }  
  
}  
  
function setBall(x, y) {  
    $("#ball").css({  
        "left": x,  
        "top":  y     
    });  
}  
  
function movePaddles() {  
    if(pingpong.pressedKey[KEY.UP]) {  
        var top = parseInt($("#paddleB").css("top"));  
        $("#paddleB").css("top", top-5);  
    }  
    if(pingpong.pressedKey[KEY.Down]) {  
        var top = parseInt($("#paddleB").css("top"));  
        $("#paddleB").css("top", top+5);  
    }   
    if(pingpong.pressedKey[KEY.W]) {  
        var top = parseInt($("#paddleA").css("top"));  
        $("#paddleA").css("top", top-5);  
    }  
    if(pingpong.pressedKey[KEY.S]) {  
        var top = parseInt($("#paddleA").css("top"));  
        $("#paddleA").css("top", top+5);  
    }  
} 
}//控制左边上下的是w,s,控制右边上下的是上下箭头
    </script>  
</body>  
</html>

技术空间

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小游戏

Ping Pong * { box-sizing: border-box; margin: 0px; padding: 0px; } #playground{ background: url(images/bg1.png); width: 400px; height: 200px; posi
复制链接

扫一扫