javascript - HTML Pong 尝试不工作-6ren

javascript - HTML Pong 尝试不工作

转载作者：行者123 更新时间：2023-11-28 01:51:59

24

4

我开始了一场乒乓球比赛，其中已经为我设定了指导方针，但我对球有疑问。这是开发的早期阶段，但我一直坚持这个问题:X 轴不会上下移动。球尚未从 Racket 上弹起。这是我的代码:

索引.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 库是为我编写的。

最佳答案

您正在使用元素的 height 而不是偏移量 (top)。应该是

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

关于javascript - HTML Pong 尝试不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19528741/

24

4

0

文章推荐： javascript - 同一页面内的偏移链接

文章推荐： c++ - 实现 4 维 Halton 序列

文章推荐： html - 父菜单后面的 CSS 子菜单

swift - 无法将类型 'Pong.MenuVC' (0x1072ea808) 的值转换为 'Pong.GameViewController'
我使用 Xcode 和 swift 5 构建了一个应用程序。每次我点击“简单”、“中等”、“困难”或“2 人”按钮时，我都会收到错误消息: Could not cast value of type
pong - 打乒乓球怎么让电脑输？
所以我和我的搭档正在尝试制作一个玩家对电脑的乒乓球游戏，但我们就是不知道如何让电脑输。我们已经完成了基本的工作，它运行良好，但计算机永远不会丢失。我们还尝试使用 sleep 来减慢计算机的速度，但是
oop - 正确的OO Pong
我应该如何设计“适当的” OO Pong？正确的想法是可以更改任何元素:球，球场和 Racket 的形状，增加了障碍，甚至是“助力”，例如“可以将球粘在 Racket 上”。目前，还有两个紧迫的问
Java Pong 游戏从桨中弹起球
我正在尝试用 Java 制作 Pong 游戏，但在球从 Racket 上弹起时遇到了一些问题。我有两个桨:左桨1，右桨2。我的想法如下:ball_Y应该在 Racket 的高度之间，ball_X触
Java Pong 游戏碰撞检测问题
我对 Java 还很陌生，需要一些帮助。我已经创建了 Pong 游戏(使用 Eclipse)，并且在大多数情况下，它运行得很好。然而，碰撞检测有些不对劲。球从人类控制的 Racket 上反弹得很好，但
Java - Pong 桨和球碰撞错误？
我正在打乒乓球，我已经将球的 x 坐标设置为在它碰到 Racket 时立即反转，并在它没有击中 Racket 时停止。此代码在“大部分”时间都有效，但“有时”球会在没有明显原因的情况下一击中 Rack
JavaScript Pong 游戏延迟
我正在创建一个 JS Pong 游戏，但 Pong 游戏中的球在几秒钟后开始滞后。我尝试停止动画帧，优化代码以获得更好的性能并重写球的代码，但没有任何效果。有人可以帮我吗？ HTML(无 CSS)
java - Pong 得分未更新
我很困惑为什么我的记分板没有在屏幕上更新。分数正在增加(我用调试器检查过，球也正在居中)。但记分牌根本不更新，它不断显示“0:0” 乒乓球类 package com.dheraxysgames.pon
python - 如何在pygame中计算球击中球时的得分 'Pong'
最近我编写了一个pygame 'Pong'，我还没有完成它，因为桨还不能移动。但是，我在这里遇到了一个问题。因为我想要得到的分数等于球击中 window 边缘的次数。对于我的程序，当球撞到墙壁时，得
c++ - Pong - 球弹跳和碰撞检测算法
嗨，我写了这个简单的碰撞检测和弹跳算法，但是碰撞检测到 y 就好像它是 x 轴一样 bool Ball::DetectCollision(Paddle p) { if(GetPosition().y
python - 您如何预先计算球的轨迹以及它在 Pong 游戏中的终点？
我正在用 Python 制作经典的 Pong，但我需要帮助。对于/在这个游戏中，我想计算球的轨迹，因此对于给定的开始点(在左桨上弹跳)和角度(绿色物体)，我想计算终点(蓝色 X)。这一切都是为了将
iphone - "ping pong"你如何做一个UIView图像序列动画
我有一个 UIImageView，其中加载了一个 png 图像序列。我的问题是 - 你知道有什么方法可以“乒乓”动画序列吗？这样就从 1-24 向前播放，然后从 24-1 向后播放并循环。 (技术上
java - 如果客户端没有转发端口，如何从服务器接收 "pong"
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。这个问题似乎不是关于 a specific programming problem, a software
Java-Pong AI 不动
我正在用java制作乒乓球，但敌人的AI没有动。它应该向球移动的方向移动。请问有人可以帮助我吗？主类: import javax.swing.*; public class Main extends
java - 墙壁上的 Pong 反射
我正在用java制作一个乒乓球类型的游戏，我试图让球从墙上弹开，但每当球撞到球时，它就会停止，它不会从墙上反射出来，我看不到找出原因。处理球运动的球类 public class Ball { pri
数学 - 困难的 Pong AI
我正在为我的 Pong 克隆编写一些困难，我写这些是为了熟悉 SFML 和 Xcode。对于最难的难度，我想创建一个人工智能关卡，让计算机立即知道球会去哪里。所以，如果我有 xVelocity 和 y
JavaScript Canvas : Pong - Animation
我是 HTML 5 + Canvas 游戏开发新手。试图在我的 Pong 游戏中为球制作动画。这是我的 code .相关片段: 增加球的速度: Ball.prototype.update = func
c# - Pong Paddle 碰撞速度和回弹角度
好吧，我为此搜索了很多，但我能找到的只是人们说的像 pi * direction，方向是我假设的球进入的角度。但我的问题是，我不知道我是如何得到球进入的角度的，所以我做不到这些。如果有人可以解释我将如
Java pong 不能同时移动两个 Racket
试图在 java 中制作乒乓球但不能同时移动两个 Racket 。您可以移动其中一个，但不能同时移动两者。我是否需要创建具有 2 个不同面板的 2 个线程？这里是我指定关键事件的地方 public
c++ - While 循环失控 Pong 游戏
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th

首页

博学

6Ren·AI

商城

javascript - HTML Pong 尝试不工作