HTML5 Перемещение объектов

Question

Я прочитал много сообщений и прочитал несколько руководств по 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> 

style.css:

#canvas { 
    background-color: black; 
} 

Answer 1

Полотно сам не имеет "объекты", это просто растровый, и все, что вы рисовать на нем просто меняет цвета определенных пикселей, что делает его похожим на то, что он рисует «сверху» того, что уже существует, но это даже не делает этого. Он просто переворачивает пиксельные цвета.

Я не вижу никакого кода, который «сбрасывает» холст для ваших следующих кадров, поэтому вы буквально просто рисуете тот же весло с другим значением высоты, окрашивая разные пиксели цветами весла, не перекрашивая исходные пиксели используя цвет фона.

Самым простым решением здесь является добавление context.clearRect(0, 0, canvas.width, canvas.height); в начале render():

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(); 
}; 

Обратите внимание, что это показывает, вы также должны сделать свои оценки и центральную линию каждый кадр. Либо это, либо вам нужно убедиться, что ваши весла (и ваш шар) сначала восстанавливают цвет фона в их прежнем положении, прежде чем приступать к их новой позиции, что потребует значительно большего количества кода.