[#4] Пишем игру на JavaScript (HTML + CSS + JS) | Игра на JS

Продолжаем работать над анимацией передвижения персонажа нашей игры на JavaScript. Сегодня сделаем ее более плавной, познакомимся с функцией setInterval(), а также с такими событиями обьекта window, как:

- onmousedown;
- onmouseup;
- ontouchstart;
- ontouchend.

Даже если ты слабо знаеш HTML / CSS ничего страшного, я все буду объяснять по ходу дела.

Ссылка на изображение (спрайт для персонажа):

Ссылка на приложение для смартфона (Файловый менеджер):

Репозиторий проекта:

#програмирование #javascript #уроки #js #пишемигру #практика #html #css #js #разработкаигр #програмируемнателефоне #телефон #разработканателефоне #анимация #спрайт

[AterosDev]

Содержимое index.html:
<div id="img-block" style="
width: 288px;
height: 288px;
overflow: hidden;
position: relative;
left: 0px;
">
<img id="hero-img" style="
width: 1728px;
height: 1152px;
position: relative;
top: -576px;
left: 0px;
transform: scale(-1, 1);
" src="hero-sprite.png" />
</div>
<script src="script.js">
</script>

Содержимое script.js:

let heroImg =
let imgBlock =
let rightPosition = 0;
let imgBlockPosition = 0;
//ФУНКЦИИ
const rightHandler = () => {
rightPosition = rightPosition + 1;
imgBlockPosition = imgBlockPosition + 1;
if(rightPosition > 5) {
rightPosition = 0;
}
heroImg.style.left = `-${rightPosition*288}px`;
imgBlock.style.left = `${imgBlockPosition*20}px`;
}
// ОБРАБОТЧИКИ СОБЫТИЙ
let timer = null;
let onTouchStart = (event) => {
timer = setInterval(()=>{
rightHandler();
}, 130);
}
let onTouchEnd = (event) => {
clearInterval(timer);
}

window.onmousedown = onTouchStart;
window.ontouchstart = onTouchStart;

window.onmouseup = onTouchEnd;
window.ontouchend = onTouchEnd;

[Veronika_Frightful_Deeeer]

Большое спасибо! Очень ценю ваш труд. Учу язык по вашим урокам каждый день.

[elchinallakhverdiev]

Все бы хорошо, но моделька персонажа багается и бежит бесконечно, если зажать на ней курсор и перетянуть в сторону :) А если много раз поперетягивать успеть, то как соник втопит