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

Сегодня будем продолжать разрабатывать нашу игру на языке программирования JavaScript, а именно добавим анимацию для героя, когда он находиться в неподвижном состоянии.

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

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

[AterosDev]

<div id="canvas" style="
background-color: white;
">
<img src="fullscreen.png" id="fsBtn" style="
width: 40px;
height: 40px;
position: absolute;
top: 20px;
right: 20px;
" />
<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: 0px;
left: -288px;
transform: scale(-1, 1);
" src="hero-sprite.png" />
</div>
</div>
<script>
// -576px
//ПЕРЕМЕННЫЕ
let heroImg =
heroImg.onclick = (event) => {
event.preventDefault();
}
let imgBlock =
let canvas =
let fsBtn =
fsBtn.onclick = () => {

fsBtn.src = 'fullscreen.png';

}else{
fsBtn.src = 'cancel.png';

}
}
let rightPosition = 0;
let imgBlockPosition = 0;
let direction = 'right';
//ФУНКЦИИ
const rightHandler = () => {
heroImg.style.transform = "scale(-1, 1)";
rightPosition = rightPosition + 1;
imgBlockPosition = imgBlockPosition + 1;
if (rightPosition > 5) {
rightPosition = 0;
}
heroImg.style.left = `-${rightPosition * 288}px`;
heroImg.style.top = '-576px';
imgBlock.style.left = `${imgBlockPosition * 20}px`;
}
const leftHandler = () => {
heroImg.style.transform = "scale(1, 1)";
rightPosition = rightPosition + 1;
imgBlockPosition = imgBlockPosition - 1;
if (rightPosition > 5) {
rightPosition = 0;
}
heroImg.style.left = `-${rightPosition * 288}px`;
heroImg.style.top = '-576px';
imgBlock.style.left = `${imgBlockPosition * 20}px`;
}
const standHanlder = () => {
switch (direction) {
case 'right': {
heroImg.style.transform = "scale(-1, 1)";
if (rightPosition > 4) {
= 1;
}
break;
}
case 'left': {
heroImg.style.transform = "scale(1, 1)";
if (rightPosition > 3) {
= 0;

break;
}
default: break;
}

rightPosition = rightPosition + 1;
heroImg.style.left = `-${rightPosition * 288}px`;
heroImg.style.top = '0px';
}

// ОБРАБОТЧИКИ СОБЫТИЙ
let timer = null;
const lifeCycle = () => {
timer = setInterval(()=>{
standHanlder();
}, 150);
}
let x = 0;
let halfWidth = window.screen.width / 2;
let onTouchStart = (event) => {
clearInterval(timer);
x = (event.type === 'mousedown') ? event.screenX : event.touches[0].screenX;
timer = setInterval(() => {
if(x > halfWidth) {
direction = 'right';
rightHandler();
} else {
direction = 'left';
leftHandler();
}
}, 130);
}
let onTouchEnd = (event) => {
clearInterval(timer);
lifeCycle();
}

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

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

const start = () => {
lifeCycle();
}
start();
</script>

[Veronika_Frightful_Deeeer]

Классно, уже как настоящая игра выглядит))) Я еще добавила зелёный фон вместо белого, так что смотрится отлично)

[АлексейАндрусенко-ъя]

Привет
когда следующий выпуск?)
очень крутые видео

[ИванМартыненко-хк]

Друг только не подумай что придираюсь.
Очень рад этим видео. И пытаюсь участвовать в жизни канала .
Анимация у тебя прописана немного криво в файлике png 5 кадров в покое.
А за счет того что у тебя в условиях от (1 до 4) и от (0 да 3) получается всего 4 кадра отображается. Один кадр теряется.
надо от 1 до 5 и от 0 до 4.

switch (direction) {
case 'right': {
heroImg.style.transform = "scale(-1, 1)"
heroPosition = heroPosition + 1;

if (heroPosition > 5) {
heroPosition = 1;
}

break;
}

case 'left': {
heroImg.style.transform = "scale(1, 1)"
heroPosition = heroPosition + 1;

if (heroPosition > 4) {
heroPosition = 0;
}


break;
}
default: break;
}
Все работает.
И не дергается так резко персонаж.

[smbrrer]

Я вот немного не понял, зачем присваивать новую переменную, если можно было просто в функции standHandler удалить строку heroImg.style.transform = 'scale(-1, 1)', и тогда получается все тоже самое