[#8] Пишем игру на 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 id="jump-block" style="
position: absolute;
top: 0;
left: 0;
width: 144px;
height: 144px;
overflow: hidden;
opacity: 0.5;
">
<img src="hero-sprite.png" style="
position: absolute;
top: -144px;
left: -144px;
width: 864px;
height: 576px;
transform: scale(-1, 1);
" />
<div style="
position: absolute;
top: 0;
left: 0;
width: 140px;
height: 140px;
border: 2px solid rgb(0, 119, 255);
border-radius: 50%;
"
></div>
</div>
<div id="hit-block" style="
position: absolute;
top: 0;
right: 0;
width: 144px;
height: 144px;
overflow: hidden;
opacity: 0.5;
">
<img src="hero-sprite.png" style="
position: absolute;
top: -452px;
left: -442px;
width: 864px;
height: 576px;
transform: scale(-1, 1);
" />
<div style="
position: absolute;
top: 0;
right: 0;
width: 140px;
height: 140px;
border: 2px solid rgb(0, 119, 255);
border-radius: 50%;
"
></div>
</div>
</div>
<script>

//ПЕРЕМЕННЫЕ

let rightPosition = 0;
let imgBlockPosition = 0;
let direction = 'right';
let hit = false;
let jump = false;
let timer = null;
let x = 0;
let halfWidth = window.screen.width / 2;

let jumpBlock =
let hitBlock =
let heroImg =
let imgBlock =
let canvas =
let fsBtn =

jumpBlock.style.top = `${window.screen.height/2 - 144/2}px`;
hitBlock.style.top = `${window.screen.height/2 - 144/2}px`;

heroImg.onclick = (event) => {
event.preventDefault();
}
fsBtn.onclick = () => {

fsBtn.src = 'fullscreen.png';

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

}
}
jumpBlock.onclick = () => {jump = true};
hitBlock.onclick = () => {hit = true};

//ФУНКЦИИ

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';
}
const hitHandler = () => {
switch (direction) {
case 'right': {
heroImg.style.transform = "scale(-1, 1)";
if (rightPosition > 4) {
= 1;
= false;
}
break;
}
case 'left': {
heroImg.style.transform = "scale(1, 1)";
if (rightPosition > 3) {
= 0;
= false;

break;
}
default: break;
}

rightPosition = rightPosition + 1;
heroImg.style.left = `-${rightPosition * 288}px`;
heroImg.style.top = '-864px';
}
const jumpHandler = () => {
switch (direction) {
case 'right': {
heroImg.style.transform = "scale(-1, 1)";
if (rightPosition > 4) {
= 1;
= false;
}
break;
}
case 'left': {
heroImg.style.transform = "scale(1, 1)";
if (rightPosition > 3) {
= 0;
= false;

break;
}
default: break;
}

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

// ОБРАБОТЧИКИ СОБЫТИЙ

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 lifeCycle = () => {
timer = setInterval(()=>{
if (hit) {
hitHandler();
} else if (jump) {
jumpHandler();
} else {
standHanlder();
}
}, 150);
}

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

[glaby]

Привет!! Подскажи пожалуйста, как решить проблему с тем, что при нажатии на кнопки прыжка/удара срабатывает также и наш onmousedown, созданный для передвижения. В итоге анимация прыжка/удара беспорядочно накладывается на анимацию движения и на странице персонаж не то замахивается, не то идет))) ну и естественно при зажатии кнопки прыжка/удара снова срабатывает onmousedown и перс просто идет вместо серии прыжков/ударов.

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

ТОП!
у меня проблема, он не прыгает почему-то
ну и классический вопрос, когда следующий выпуск?))

[aslanzamash]

А как вы узнали что px какртинки -144? Я просто не понел я хожу зделать другого перса но не могу узнать px перса

[СаидИсмаилов-кр]

зачем центрировать кнопку по вертикали в js, если можно в стилях задать top: 50%; transform: translateY(-50%)? И еще, зачем обращаться к DOM-элементам через window.document, если можно сразу через document. Использование устаревших DOM-свойств событий вместо addEventListener тоже не понятно. А так, круто получается, продолжай в том же духе!

[Veronika_Frightful_Deeeer]

у меня не работали кнопки прыжка и удара. удалось добиться от кнопки прыжка только того, чтобы выводился один кадр прыжка, но не все 4 (для этого пришлось написать код совсем по-другому, не так как в уроке). Поэтому я просто скопировала себе код из закреплённого комментария. Теперь работает точно как в уроке, но я так и не поняла почему мой собственный не работал :(((

[aslanzamash]

Здраствуйте у меня вапрос как вы узнали px top этого картики

[ДенисМартьянов-ыг]

при открытие полного экрана правая иконка убегает (