Воскресенье, 24.11.2024, 21:46 | Приветствую Вас Гость

...

Код

Главная » Статьи » Js
Бегующий квадрат

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;" >
</canvas>

<script>
var x = 0;
var y = 0;
var direction = 0;
document.addEventListener("keydown", handler,false);

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);

function handler(event){

ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
ctx.fillStyle = '#' + Math.floor(Math.random()*16777215).toString(16);
if (event.code == 'KeyX'){
direction = 0;
}
if (event.code == 'KeyZ'){
direction = 1;
}
if (event.code == 'KeyQ'){
direction = 2;
}

if (event.code == 'KeyW'){
direction = 3;
}

ctx.fillRect(x,y,25,25);

if (direction == 0 && x <=490){
x = x + 10;
}

if (direction == 1 && x >=0){

x = x - 10;
}

if (direction == 2 && y <=490){
y = y + 10;
}

if (direction == 3 && y >= 0){

y = y - 10;
}


}


</script>

</body>
</html>

Категория: Js | Добавил: moskov (31.03.2021)
Просмотров: 123 | Рейтинг: 0.0/0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Меню сайта

Категории раздела

PHP [41]
C++ [71]
Autoit [108]
Processing [105]
Basic4GL [7]
Fasm [2]
PABC [7]
Js [234]
Gentee [1]
Python [204]
Java android [3]
Small Basic [9]

Мини-чат

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Друзья сайта

  • ЗОВ КОСМОСА

  • Хулиган Вселенной

  • Тюремная поэзия

  • Религиозная поэзия

  • Сайт клана ЛеГиоН

    • Поиск