文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML Pong尝试不工作

问HTML Pong尝试不工作
EN

Stack Overflow用户

提问于 2013-10-23 05:30:01

回答 2查看 390关注 0票数 2

我已经开始了一场乒乓球比赛，其中的指导方针已经为我设定了，但我对球有问题。这是非常早期的开发，但我被这个问题卡住了:X轴不会上下移动。球还不能从球拍上弹起。下面是我的代码：

Index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ping Pong</title>
        <link href="pong.css" rel="stylesheet" type="text/css"/>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script src="js/pong.js" type="text/javascript"></script>
</head>
<body>

    <header>
        <h1>Ping Pong</h1>
    </header>

        <!-- Scoreboard goes here -->

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

    <!-- used for debugging -->
    <div id="debug">
    </div>

    <footer>
        This is an example of creating a Ping Pong Game.
    </footer>   

</body>
</html>

Pong.js

var KEY = {
 UP:38,
 DOWN:40,
 W:87,
 S:83
};

var directionX = 1;
var directionY = 1;



$(function(){
   var timer = setInterval(gameloop,30)
});

//This is where the logic for the game goes.
function gameloop(){
    var playground = $("#playground");
    var ball = $("#ball");

    var width = parseInt (playground.css("width"))
    var left = parseInt (ball.css("left"));

    if(left >= width){
        directionX = -1;
    }
    else if (left <= 0){
        directionX = 1;    
    }   

    var height = parseInt (playground.css("height"))
    var top = parseInt (ball.css("top"));

    if(top >= height){
        directionY = -1;
    }
    else if (top <= 0){
        directionY = 1;    
    }   



    ball.css("left",left+5 * directionX);
    ball.css("top",height+5 * directionY);

}

function debug(text){
    $("#debug").text(text);
}

和pong.css

#playground{
    background: #e0ffe0 /*url(images/pixel_grid.jpg)*/;
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

#ball {
    background: #fbb;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 150px;
    top: 100px;
    border-radius: 10px;
}

.paddle {
    background: #bbf;
    left: 50px;
    top: 70px;
    position: absolute;
    width: 30px;
    height: 70px;
}

#paddleB {
    left: 320px;
}

#winner{
    display:none;   
    position: relative;
    width: 200px;
    margin-left: 100px;
    top: 30%;
    font-size: 20px;
    border: 3px solid red;
    padding: 20px;
    background-color: #FFF;
    text-align:center;
    font-family: Comic-Sans;
}

哦，如果你想知道，js库是为我写的。

javascript

css

html

回答 2

Stack Overflow用户

发布于 2013-10-23 15:36:57

使用的是元素的偏移量，而不是偏移量(top)。它应该是

ball.css("top", top + 5 * directionY);

票数 1

Stack Overflow用户

发布于 2013-10-23 05:34:19

我相信你需要使用px设置CSS的顶部和左侧。

ball.css("left",(left+5 * directionX) + "px");
ball.css("top",(height+5 * directionY) + "px");

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19528741

复制

相似问题

问HTML Pong尝试不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Pong尝试不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML Pong尝试不工作
EN