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

...

Код

Главная » Статьи » Js
Забавный квадрат

<!doctype html>
<html>
<head>
<title>canvasExample</title>
<meta charset='utf-8' />
</head>
<body onload="setInterval('myfunc()', 10)" >
<canvas height='500' width='500' id='example'></canvas>
<script>
let size = 25;
let x = 0;
let y = 0;
let direction = 0;
document.addEventListener('keydown', function(event) {
if (event.code == 'KeyX') {
direction = 0;
}
if (event.code == 'KeyZ') {
direction = 1;
}
if (event.code == 'KeyA') {
direction = 2;
}

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

if (event.code == 'KeyQ') {
size += 5;
}

if (event.code == 'KeyW') {
size -= 5;
}

});

const canvas = document.querySelector('#example');
const ctx = canvas.getContext('2d');

function myfunc(){


ctx.clearRect(0,0,500,500);

ctx.fillStyle = 'red';

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

if (direction == 0 && x > 0){
x = x - 1;
}
if (direction == 1 && x < 450){
x = x + 1;

}

if (direction == 2 && y < 450){
y = y + 1;

}

if (direction == 3 && y > 0){
y = y - 1;

}

}


</script>
</body>
</html>

Категория: Js | Добавил: moskov (30.03.2022)
Просмотров: 97 | Рейтинг: 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

Форма входа

Друзья сайта

  • ЗОВ КОСМОСА

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

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

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

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

    • Поиск