Перемещение нарисованных фигур

@Зеликов · Регистрация: 22.10.2013

Author24 — интернет-сервис помощи студентам

PHP

<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet" href = "index.css">
    
    <script src="canvas.js"></script>
    
    <script src="index.js"></script>
    
    <meta charset="utf-8">
    <title>Konva</title>
</head>
<body>
<canvas width='1000' height='600' id='example' style="border:1px solid black;"></canvas>
 
</body>
</html>
 
<script>
 
var c = document.getElementById("example");
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
 
function draw(){
    ctx.clearRect(0,0, 1000, 600);
    ctx.fillStyle = "green";
    ctx.fillRect(x,y,15,15);
    
    window.requestAnimationFrame(draw);
}
draw();
 
$(document).keydown(function (draw) {
    if(input.isDown('UP') || input.isDown('w')) {
        if (y + 1 > 10) {
        y -= 1;
        }
    }
    if(input.isDown('DOWN') || input.isDown('s')) {
        if (y - 1 < 575) {
        y += 1;
        }
    }
    if(input.isDown('LEFT') || input.isDown('a')) {
        if (x + 1 > 10) {
        x -= 1;
        }
    }
    if(input.isDown('RIGHT') || input.isDown('d')) {
        if (x - 1 < 975) {
        x += 1;
        }
    }
});
</script>

Всех приветствую. Подскажите пожалуйста. Вот есть кодик такой. Рисую навасом квадратик и клавишами его туда сюда таскаю. У меня ряд вопросов.. и не знаю как гуглить или куда смотреть.
Во первых залипание клавиши происходит не сразу. Когда зажимаю клавишу первый сдвиг делает, потом ждёт пол секунды и только после этого уходит в бесконечность, пока не отпущу клавишу. Я понимаю, что там UP у клавиши сробатывает.. но как это убрать? Что бы было чётко. Зажал - поехала. Без остановки этой в начале.

Второе. Прибавляю количество пикселей у Y или X, за счёт чего хочу что бы быстрее двигался квадратик. Но если ставить к примеру 10 пикселей, то получается, что идёт рывками, перескакивая эти 10px. Как мне сделать именно быстроту перемещения, а не ширину шага, так сказать.

Ну и третее.. не могу больше ни чего нарисовать))) я в канвасе только только начинаю разбираться.. и вроде уж способы какие нашёл перепробовал в инете.. Не рисует больше фигур(( где то я глуплю..

В общем нуждаюсь в ваших подсказках и опыте, Господа.

Заранее спасибо =)

PS В index.js обработчик клавишь. Стырил от сюда..
https://github.com/jlongster/c... s/input.js
ну мали кому надо будет или будет интересно, что там

Добавлено через 7 часов 17 минут
Столько мнений, столько мнений)))))

@whiteapps · 10.07.2017, 14:15

Зеликов, что у вас в canvas.js?

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	10.07.2017, 14:15	2
	Зеликов, что у вас в canvas.js? 0