Я пытаюсь сделать гоночную игру с использованием холста и файл png с прозрачным фоном для автомобиля.
У меня проблема, когда я держусь за одну из стрелок. В противоположном направлении движения он выглядит как белая тень старой позиции автомобиля.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas;
var ctx;
var car = new Image();
var x = 0;
var y = 0;
function startUp(){
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
loadImages();
startGameLoop();
}
function startGameLoop() {
setInterval(function() {
drawScreen();
drawCar();
}, 16);
window.addEventListener('keydown', whatKey, true);
}
function drawScreen(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#aaaaaa';
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
}
function drawCar(){
ctx.drawImage(car, x ,y, 200, 103);
}
function whatKey(evt) {
switch (evt.keyCode) {
// Left arrow.
case 37: {
x -= 15;
}
break;
// Right arrow.
case 39:{
x += 15;
}
break;
// Down arrow
case 40:{
y += 15;
}
break;
// Up arrow
case 38: {
y -= 15;
}
break;
}
}
function loadImages() {
car.src = 'http://sammywasem.com/images/f3-top.png';
}
</script>
</head>
<body onload="startUp()">
<canvas id="myCanvas" width="1050" height="620">
</canvas>
</body>
</html>
Движение автомобиля на самом деле является правильным способом.
Скажем, вы нажимаете правую клавишу: событие отправляется в окно и попадает в ловушку по вашему коду: машина идет вправо. Но событие также обрабатывается всем окном, где его понимают как: переместите окно вправо.
Итак, что вы видите в конце, так как окно перемещается больше, чем автомобиль, это движение слева от машины.
Что вам нужно сделать, так это предотвратить дальнейшее активирование ключевого события после его обработки: это делается с помощью
event.preventDefault();
а также
event.stopPropagation();
посмотрите mdn, чтобы увидеть спецификации preventDefault или stopPropagation.
я сделал скрипку из вашего кода и обновил ее: