DOM游戏开发入门（乒乓球）

最新推荐文章于 2021-06-01 09:21:49 发布

Alice_Flower_Long

最新推荐文章于 2021-06-01 09:21:49 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： html 游戏开发

本文链接：https://blog.csdn.net/Alice_Flower_Long/article/details/78924902

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我的收获：

设置游戏元素。

包括球拍为矩形，球为圆形，背景。（均可用图片代替）

获取玩家的键盘输入移动球拍

只能监听一个按键，只能移动一个球拍。

定时器扫描读取按键的状态，同时移动两个球拍

间隔移动乒乓球

定义乒乓球的三个属性：速度，方向，X/Y坐标

碰到百上下边缘反弹（方向的变化），碰到左右赢方积分并将球重置在中间

显示html文本^玩家比分

html函数

html部分
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charst = "utf-8">
    <title>ping pong</title>

    <style>
        #playground
        {
            background: #e0ffe0 url(images/1234.JPG);
            width:400px;
            height:200px;
            position:relative;
            overflow:hidden;
        }
        #ball
        {
            background: #fbb;
            width:20px;
            height:20px;
            left:150px;
            top:100px;          
            position:absolute;
            border-radius:10px;
        }
        .paddle
        {
            background: #bbf;
            width:30px;
            height:70px;
            left:50px;
            top:70px;
            position:absolute;      
        }
        #paddleB
        {
            left:320px;
        }
    </style>

</head>

<body>
    <header>
        <h1>ping pong</h1>
    </header>

    <div id="game">
        <div id="playground">
            <div id="paddleA" class="paddle"></div>
            <div id="paddleB" class="paddle"></div> 
            <div id="ball"></div>
        </div>
    </div>

    <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>


    <footer>
        This is an example of creating a pingpong game.
    </footer>

    <script src = "js/jquery-3.2.1.js"></script>
    <script src = "js/Html5PingPongGames.js"></script>
    <script>

    </script>
</body>

</html>

js部分
var key=
{
    up:38,down:40,
    w:87,s:83
}

var pingpong=
{
    scoreA:0,
    scoreB:0
}

pingpong.ball=
{
        speed:2,
        x:150,
        y:150,
        directionX:1,
        directionY:1
}
pingpong.presssedKeys=[];

$(function()
{
    pingpong.timer = setInterval(gameloop,30);
    $(document).keydown(function(e)
    {
        pingpong.presssedKeys[e.which]=true;
    })
    $(document).keyup(function(e)
    {
        pingpong.presssedKeys[e.which]=false;
    })
})

function gameloop()
{
    movePaddles();
    moveBall();
}

function movePaddles()
{

    var paddleAYBottom = parseInt($("#paddleA").css("top"))+parseInt($("#paddleA").css("height"));
    var paddleAYTop =parseInt($("#paddleA").css("top"));
    var paddleBYBottom =parseInt($("#paddleB").css("top"))+parseInt($("#paddleB").css("height"));
    var paddleBYTop =parseInt($("#paddleB").css("top"));   

    //移动拍子
    if(paddleBYTop-5>=parseInt($("#playground").css("top")))
    {
        if(pingpong.presssedKeys[key.up])
        {
            var top=parseInt($("#paddleB").css("top"));
            $("#paddleB").css("top",top-5);
        }
    }
    if(pingpong.presssedKeys[key.down])
    {
        var top=parseInt($("#paddleB").css("top"));
        $("#paddleB").css("top",top+5);
    }
    if(pingpong.presssedKeys[key.w])
    {
        var top=parseInt($("#paddleA").css("top"));
        $("#paddleA").css("top",top-5);
    }
    if(pingpong.presssedKeys[key.s])
    {
        var top=parseInt($("#paddleA").css("top"));
        $("#paddleA").css("top",top+5);
    }

}

function moveBall()
{
    //检测是否碰撞到周围
    var playgroundHeight=parseInt($("#playground").height());
    var playgroundWidth=parseInt($("#playground").width());
    var ball=pingpong.ball;


    if(ball.y+ball.speed*ball.directionY < 0)
    {
        ball.directionY = 1;
    }
    if(ball.y+ball.speed*ball.directionY > playgroundHeight)
    {
        ball.directionY = -1;
    }
    if(ball.x+ball.speed*ball.directionX > playgroundWidth )
    {
        //A得分
        (pingpong.scoreA)++;
        $("#scoreA").html(pingpong.scoreA);
        ball.x=250;
        ball.y=100;
        $("#ball").css(
        {
            "left": ball.x,
            "top":  ball.y
        });
        ball.directionX = -1;   

    }
    if(ball.x+ball.speed*ball.directionX < 0 )
    {
        //B得分
        pingpong.scoreB++;
        $("#scoreB").html(pingpong.scoreB);
        ball.x=250;
        ball.y=100;
        $("#ball").css(
        {
            "left": ball.x,
            "top":  ball.y
        });
        ball.directionX = 1;            

    }


    ball.x+=ball.speed*ball.directionX;
    ball.y+=ball.speed*ball.directionY;

    //检测是否碰撞到球拍
    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;
        }
    }


    var paddleBX= parseInt($("#paddleB").css("left"));
    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 <= paddleAYBottom)&&(ball.y+ball.speed*ball.directionY >= paddleBYTop))
        {
            ball.directionX =-1;
        }
    }

    //碰到边缘，重置在中间

    $("#ball").css(
        {
            "left": ball.x,
            "top":  ball.y
        });

}

参考书籍：Makzan《html5游戏开发实战》

Alice_Flower_Long

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM游戏开发入门（乒乓球）

DOM游戏开发入门（乒乓球）我的收获：设置游戏元素。包括球拍为矩形，球为圆形，背景。（均可用图片代替）获取玩家的键盘输入移动球拍只能监听一个按键，只能移动一个球拍。定时器扫描读取按键的状态，同时移动两个球拍间隔移动乒乓球定义乒乓球的三个属性：速度，方向，X/Y坐标碰到百上下边缘反弹（方向的变化），碰到左右赢方积分并将球重置在中间显示html文本^玩家比分html函数html部分<!DOCT
复制链接

扫一扫