javascript - 如何使乒乓球运动-6ren

javascript - 如何使乒乓球运动

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

这是我的 html:

<html lang="en-US">
<head>
    <meta charset ="UTF-8"/>
    <title>Pong</title>
    <link rel="stylesheet" type="text/css" href="pong.css"/>
</head>
<body>
    <canvas id="mainCanvas" width="700" height="710"></canvas>
    <script type="text/javascript" src="pong.js"></script>
</body>
</html>

这是我的CSS:

#mainCanvas{
    width: 700px;
    height: 710px;
    background-color: black;
}

这是我的js:

//variables

var canvas = document.getElementById('mainCanvas');
var ctx = canvas.getContext('2d');

var keys = [];

var speed = 12,
    playerWidth = 8,
    playerHeight = 75,
    canvasW = 700,
    canvasH = 710,
    player1X = canvasW - 670,
    player2X = canvasW - 30,
    ballS = 15,
    running = true,
    acc = 0,
    ranNum = Math.floor(Math.random() * 10 + 1);

var requestAnimFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;

//objects

function player(x,y,width,height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

function gameObj(x,y,vel,side,speed){
    this.x = x;
    this.y = y;
    this.side = side;
    this.speed = speed;
}

var player1 = new player(player1X,canvasH/2-playerHeight/2,playerWidth,playerHeight);
var player2 = new player(player2X,canvasH/2-playerHeight/2,playerWidth,playerHeight);

var ball = new gameObj(canvasW/2-ballS/2,canvasH/2-ballS/2,ballS,15);

//Events

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*  
    keys
    up-38
    down-40

*/

//functions

function game(){
    update();
    render();
}

function update(){
    if(keys[38])player1.y -=speed;
    if(keys[40])player1.y +=speed;
    if(keys[87])player2.y -=speed;
    if(keys[83])player2.y +=speed;

    if(player1.y <0) player1.y=0;
    if(player1.y >= canvasH - player1.height) player1.y = canvasH - player1.height;

    if(player2.y <0) player2.y=0;
    if(player2.y >= canvasH - player2.height) player2.y = canvasH - player2.height;
    console.log("player1.y: " + player1.y);
    console.log("player2.y: " + player2.y);
}
function render(){
    ctx.clearRect(0,0,canvasW,canvasH);
    ctx.fillStyle="white";
    ctx.fillRect(player1.x, player1.y, player1.width, player1.height);
    ctx.fillStyle="white";

    ctx.fillRect(player2.x, player2.y, player2.width, player2.height);
    ctx.fillStyle="white";

    ctx.fillRect(canvasW/2-3, 0, 3, canvasH);
    ctx.fillStyle="white";
    ctx.fillStyle="red";
    ctx.fillRect(ball.x,ball.y,ball.side,ball.side);
}

function animate() {
    if (running) {
         game();
    }
    requestAnimFrame(animate);
}
animate();

我在打乒乓球时遇到了一些问题。我没有太多经验。我知道你可以做 ball.x += ball.speed 但我不确定如何让它在墙壁和 Racket 上弹跳。我试图做到这一点，所以当球与 Racket 碰撞时，它等于它的 x 和 y 值，但随后球会跟随 Racket 。当我试图通过使速度与碰撞速度相反来改变方向时，球在碰撞时只是保持静止。请帮忙。

欢迎任何帮助。

如果我的代码有点马虎，我很抱歉，我没有接受过正规培训。

最佳答案

这是一个基本的乒乓 Action 。希望它能给你一些帮助。如果你想让别人更正你的代码，你可以把它放在 Code Review 上？这一运动的一个关键部分是拥有比人们最初想象的更多的变量。例如。这段代码是否需要 box1Left1 和 box1Left2。

var box1Left1 = 0; 
var box1Left2;

setInterval(box1Fly, 10); 
function box1Fly() {
  // Fly Right
  if ( box1Left1 < 300 ) {
    box1Left1++; 
    document.getElementById("box1").style.left = box1Left1 + "px"; 
    box1Left2 = box1Left1;
  }
  // Fly Left
  if ( box1Left1 >= (300) ) {
    box1Left2--; 
    document.getElementById("box1").style.left = box1Left2 + "px"; 
  }
  // Fly Right Again
  if( box1Left2 == 0 ) { box1Left1 = box1Left2; }
  
}

<div id="box1" style="position:absolute; top: 10px; left: 0px; width: 50px; height: 50px; background-color: #aa39fc;"></div>

关于javascript - 如何使乒乓球运动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33187978/

文章推荐： html - 将 Bootstrap Navbar 的高度更改为 85px 并保持垂直对齐

文章推荐： c++ - 二阶线性递推方程的矩阵表示

文章推荐： javascript - jQuery 和 CSS 最小高度 :100%

java - 尝试 Java 乒乓球
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
c# - 尝试在运行时调整 bat (桨，乒乓球)的速度
编辑 2: Pastebin link to the full ball, bat, and AIbat classes. 编辑:我已经更新了 turbo 代码，只是对其进行了更好的评论。我也有一个链
ios4 - 将 Opengl 纹理从第一个 fbo 绑定(bind)到第二个 fbo，使用着色器并渲染第二个结果(乒乓球)
我一直在研究乒乓球着色，并认为在我上一个问题之后我已经破解了它。但是，随着对着色器的进一步了解，看起来虽然我能够在 FBO A 和 FBO B 上运行着色器，但 A 的输出并未用作 B 的源。换句话说
c# - 在 Monogame 中 build 乒乓球，但球不会与玩家 1 的 Racket 互动
我是编程新手。基本上刚刚完成了几个教程和准系统说明。我想编写 pong 代码让自己开始尝试自己做一些事情，但我遇到了一些障碍。出于某种原因，我生成的球根本不会与我的玩家 1 Racket 互动，但它会

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使乒乓球运动