Fatal编程技术网

Javascript HTML5移动对象

javascript html html5-canvas

Javascript HTML5移动对象,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我已经阅读了很多帖子，并专门阅读了一些关于HTML5和画布的教程，但到目前为止，我还无法复制我的确切问题。如果已经有了答案，请给我指出正确的方向 我的最终目标是做一个简单的乒乓球游戏。我已经使用JavaScript绘制了基本对象，现在我正在尝试让玩家（左）划桨移动。我当前的代码遇到的问题是，它没有移动划片，而是填充了它要移动的区域。通过各种尝试和错误的适应和尝试不同的方法，我不认为桨被拉长（增加像素的高度），但它似乎是一个新的桨对象正在创建，而不是一个正在移动 我已经看了一遍又一遍（你们不是第一

我已经阅读了很多帖子，并专门阅读了一些关于HTML5和画布的教程，但到目前为止，我还无法复制我的确切问题。如果已经有了答案，请给我指出正确的方向

我的最终目标是做一个简单的乒乓球游戏。我已经使用JavaScript绘制了基本对象，现在我正在尝试让玩家（左）划桨移动。我当前的代码遇到的问题是，它没有移动划片，而是填充了它要移动的区域。通过各种尝试和错误的适应和尝试不同的方法，我不认为桨被拉长（增加像素的高度），但它似乎是一个新的桨对象正在创建，而不是一个正在移动

我已经看了一遍又一遍（你们不是第一次尝试），但似乎不知道发生了什么。任何帮助都将不胜感激

// Requests a callback 60 times per second from browser
var animate = window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
    function(callback) { window.setTimeout(callback, 1000/60) };

// Get canvas and set context
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.fillStyle = "white";

// Settle variables for canvas width and height
var canvas_width = 500;
var canvas_height = 400;

// Set varaibles for paddle width and height
var paddle_width = 15;
var paddle_height = 75;

// Initializes variables
var playerScore = 0;
var computerScore = 0;
var player = new Player();
var computer = new Computer();
var ball = new Ball((canvas_width/2),(canvas_height/2));

// Renders the pong table
var render = function() {
  player.render();
  computer.render();
  ball.render();
};

var update = function() {
  player.update();
};

// Callback for animate function
var step = function() {
  update();
  render();
  animate(step);
};

// Creates paddle object to build player and computer objects
function Paddle(x, y, width, height) {
  this.x = x;
  this.y = y; 
  this.width = width;
  this.height = height;
  this.x_speed = 0;
  this.y_speed = 0;
};

function Player() {
  this.paddle = new Paddle(1, ((canvas_height/2) - (paddle_height/2)), paddle_width, paddle_height);
};

function Computer() {
  this.paddle = new Paddle((canvas_width - paddle_width - 1), ((canvas_height/2) - (paddle_height/2)), paddle_width, paddle_height);
};

// Creates ball object
function Ball(x, y) {
  this.x = x;
  this.y = y;
  this.radius = 10;
};

// Adds render functions to objects allowing them to be drawn on canvas
Ball.prototype.render = function() {
  context.beginPath();
  context.arc(this.x, this.y, this.radius, Math.PI * 2, false);
  context.fillStyle = "white";
  context.fill();
  context.closePath();
};

Paddle.prototype.render = function() {
  context.fillStyle = "white";
  context.fillRect(this.x, this.y, this.width, this.height);
};

Player.prototype.render = function() {
  this.paddle.render();
};

// Appends a move method to Paddle prototype
Paddle.prototype.move = function(x, y) {
  this.y += y;
  this.y_speed = y;
};

// Updates the location of the player paddle
Player.prototype.update = function() {
  for(var key in keysDown) {
    var value = Number(key);
    if(value == 38) {
      this.paddle.move(0, -4);
    } else if (value == 40) {
      this.paddle.move(0, 4);
    } else {
      this.paddle.move(0, 0);
    }
  }
};

Computer.prototype.render = function() {
  this.paddle.render();
};

// Draws center diving line
context.strokeStyle = "white";
context.setLineDash([5, 3]);
context.beginPath();
context.moveTo((canvas_width/2), 0);
context.lineTo((canvas_width/2), canvas_height);
context.stroke();
context.closePath();

// Draws score on canvas
context.font = "40px Arial";
context.fillText('0', (canvas_width * .23), 50);
context.fillText('0', (canvas_width * .73), 50);

window.onload = function() {
  animate(step);
};

var keysDown = {};

window.addEventListener("keydown", function(event) {
  keysDown[event.keyCode] = true;
});

window.addEventListener("keyup", function(event) {
  delete keysDown[event.keyCode];
});
我的道歉：我剪切了html/css代码并打算粘贴它，但是忘记了

pong.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pong</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <canvas id="canvas" width="500" height="400"></canvas>

    <script src="main.js"></script>
  </body>
</html>
画布本身没有“对象”，它只是一个位图，你在上面画的任何东西都会改变某些像素的颜色，使它看起来像是在“上面”画已经存在的东西，但它甚至没有这样做。它只是翻转像素颜色

我没有看到任何代码为下一帧“重置”画布，因此您实际上只是在不同的高度值上绘制相同的挡板，使用挡板的颜色为不同的像素着色，而不使用背景色重新绘制原始像素

这里最简单的解决方案是添加
context.clearRect（0，0，canvas.width，canvas.height）在
渲染（）的开始处
：

请注意，这表明您还需要在每一帧绘制分数和中心线。或者，你需要确保你的球拍（和球）首先恢复原来位置的背景色，然后再在新位置上绘制，这需要更多的代码。
画布本身没有“对象”，它只是一个位图，你在它上面画的任何东西都会改变某些像素的颜色，使它看起来像是在已经存在的东西的“上面”画，但它甚至不这样做。它只是翻转像素颜色

我没有看到任何代码为下一帧“重置”画布，因此您实际上只是在不同的高度值上绘制相同的挡板，使用挡板的颜色为不同的像素着色，而不使用背景色重新绘制原始像素

这里最简单的解决方案是添加
context.clearRect（0，0，canvas.width，canvas.height）在
渲染（）的开始处
：


请注意，这表明您还需要在每一帧绘制分数和中心线。或者，你需要确保你的球拍（和你的球）首先恢复到原来位置的背景色，然后再在新位置上绘制，这需要更多的代码。
请提供一个。请提供一个。啊，谢谢！这当然做到了。我非常感谢事先的解释。事实上，这澄清了我的几个问题，让我对画布有了更好的理解。我本来想问关于中心分界线和文本的问题，但你已经回答了！谢谢你，先生啊，谢谢你！这当然做到了。我非常感谢事先的解释。事实上，这澄清了我的几个问题，让我对画布有了更好的理解。我本来想问关于中心分界线和文本的问题，但你已经回答了！谢谢你，先生

#canvas {
  background-color: black;
}



var render = function() {
  // clear the canvas so we can draw a new frame
  context.clearRect(0,0,canvas.width,canvas.height);
  // draw the frame content to the bitmap
  player.render();
  computer.render();
  ball.render();
};