Я не могу понять, о чем ваша игра, и поэтому не знаю, что делать с этим кодом. Однако, поскольку вы упомянули, что у вас возникли проблемы с движением, я написал для вас быстрый движок JavaScript, включающий ускорение и замедление. Используйте клавиши со стрелками для перемещения. Следующий код представляет собой полный HTML-документ, поэтому скопируйте его и вставьте в пустой текстовый файл и сохраните как .html. И убедитесь, что у вас есть изображение 10x10 под названием «1.png» в той же папке, что и файл.
<html>
<head>
<script type='text/javascript'>
// movement vars
var xpos = 100;
var ypos = 100;
var xspeed = 1;
var yspeed = 0;
var maxSpeed = 5;
// boundary
var minx = 0;
var miny = 0;
var maxx = 490; // 10 pixels for character's width
var maxy = 490; // 10 pixels for character's width
// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;
function slowDownX()
{
if (xspeed > 0)
xspeed = xspeed - 1;
if (xspeed < 0)
xspeed = xspeed + 1;
}
function slowDownY()
{
if (yspeed > 0)
yspeed = yspeed - 1;
if (yspeed < 0)
yspeed = yspeed + 1;
}
function gameLoop()
{
// change position based on speed
xpos = Math.min(Math.max(xpos + xspeed,minx),maxx);
ypos = Math.min(Math.max(ypos + yspeed,miny),maxy);
// or, without boundaries:
// xpos = xpos + xspeed;
// ypos = ypos + yspeed;
// change actual position
document.getElementById('character').style.left = xpos;
document.getElementById('character').style.top = ypos;
// change speed based on keyboard events
if (upPressed == 1)
yspeed = Math.max(yspeed - 1,-1*maxSpeed);
if (downPressed == 1)
yspeed = Math.min(yspeed + 1,1*maxSpeed)
if (rightPressed == 1)
xspeed = Math.min(xspeed + 1,1*maxSpeed);
if (leftPressed == 1)
xspeed = Math.max(xspeed - 1,-1*maxSpeed);
// deceleration
if (upPressed == 0 && downPressed == 0)
slowDownY();
if (leftPressed == 0 && rightPressed == 0)
slowDownX();
// loop
setTimeout("gameLoop()",10);
}
function keyDown(e)
{
var code = e.keyCode ? e.keyCode : e.which;
if (code == 38)
upPressed = 1;
if (code == 40)
downPressed = 1;
if (code == 37)
leftPressed = 1;
if (code == 39)
rightPressed = 1;
}
function keyUp(e)
{
var code = e.keyCode ? e.keyCode : e.which;
if (code == 38)
upPressed = 0;
if (code == 40)
downPressed = 0;
if (code == 37)
leftPressed = 0;
if (code == 39)
rightPressed = 0;
}
</script>
</head>
<body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'>
<!-- The Level -->
<div style='width:500;height:500;position:absolute;left:0;top:0;background:black;'>
</div>
<!-- The Character -->
<img id='character' src='1.png' style='position:absolute;left:100;top:100;height:10;width:10;'/>
</body>
</html>
Это работает следующим образом: есть игровой цикл, который вызывается, как только тело загружается. Этот игровой цикл вызывает себя каждые 10 миллисекунд для плавной анимации. Несмотря на то, что из-за скоростей во время выполнения он может не повторяться каждые 10 миллисекунд, такое низкое значение будет гарантировать, что частота кадров будет такой же плавной, как и для любого браузера.
В игровом цикле мы манипулируем позициями x и y объекта в зависимости от его текущей скорости. Просто: добавьте скорость x в положение x, а скорость y в положение y. Затем мы меняем фактическое положение элемента на основе текущих координат x и y.
Чтобы манипулировать скоростями x и y, мы берем ввод с клавиатуры, используя обработчики событий. Основываясь на коде ключа, мы устанавливаем переменную, которая сообщает игре, нажата клавиша или нет. В зависимости от того, нажата клавиша или нет, мы ускоряем или замедляем объект до максимальной скорости. Для более постепенных ускорений и замедлений можно использовать значения с плавающей запятой.
Вы должны быть в состоянии понять суть этого простого движка, изучив код. Надеюсь, это поможет вам реализовать собственный движок для игры.