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

Продолжаем дела игру на языке программирования JavaScript. Сегодня добавим возможность передвижения по экрану для нашего элемента, который в будущем превратится в игрового персонажа.

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

Ссылка на предыдущий урок:

Также если ты слабо знаком с JS, сначала посмотри это видео, а потом можеш глянуть вот это:

Ссылка на видео где я за 15 минут объяснюю основной синтаксис языка программирования JavaScript:

Ссылка на оффициальный сайт, где можно скачать Visual Studio Code [для компьютера]:

Ссылка на Visual Studio Code Mobile [для телефона]:

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

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

[AterosDev]

<button id="right" style="
font-size: 20pt;
padding: 10pt;
">Right</button>
<p id="hero" style="
background-color: blue;
font-size: 25pt;
padding: 20pt;
width: 30%;
text-align: center;
position: relative;
left: 0px;
">Text</p>

<script>
let hero =
let rightButton =
let rightPosition = 0;
const clickHandler = () =>{
if (hero.style.backgroundColor === 'grey') {
hero.style.backgroundColor = 'blue';
} else {
hero.style.backgroundColor = 'grey';
}
}
const rightHandler = () => {
rightPosition = rightPosition + 20;
hero.style.left = `${rightPosition}px`;
}
hero.onclick = clickHandler;
rightButton.onclick = rightHandler;
</script>

[vitaliybokalo]

в мене питання стосовно автоповтору в js для клавіш, затримка перед автоповтором дуже давга що мішає іграти.Чи можна якось присвидшити автоповтор чи його відключити?
P.S Дякую за дефіцитні відео)

[suslik]

Добавил кнопку Left, изменил цвет фона Left и Right на белый, квадрат с синего цвета поменял на фиолетовый, при нажатии кнопки, квадрат ходит в левую сторону(прочитал с комментов).
Какой никакой, но это прогресс:p

[gus-eqkg]

кнопку left добавил, text визуально не двигается, но когда я тыкаю в left, то кнопка функционирует(text движется влево), но визуально этого не видно, просто когда после лефт прожимаю райт, то кнопка text передвигается налево ровно столько, сколько я на него раз нажал(на кнопку left)

[Dark_GameR]

как сделать через елемент <div> в html текст в центре по висоте?

[GATCU]

А как сделать движение по кнопкам с клавиатуры?

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

Подскажите пожалуйста, как сделать кнопку для движения в обратную сторону ( то что было в качестве домашнего задания)

[MaximumPower]

midlePosition надо ввести наверное для глобальной переменной
ну я немного по г*кодил_)
<button id="left" style="
font-size: 20pt;
padding: 10 pt ;
">Left</button>
<button id="right" style="
font-size: 20pt;
padding: 10 pt ;
">Right</button>
<p id="hero" style="
background-color: blue;
font-size: 25pt;
padding: 20pt;
width: 30%;
text-align: center;
position: relative;
left: 0px;
">Text</p>

<script>
let hero =
let rightButton =
let leftButton =
let leftPosition = 0;
let rightPosition = 0;
const clickHandler = () =>{
if (hero.style.backgroundColor === 'grey') {
hero.style.backgroundColor = 'blue';
} else {
hero.style.backgroundColor = 'grey';
}
}
const rightHandler = () => {
rightPosition = rightPosition + 20;
leftPosition = rightPosition;
hero.style.left = `${rightPosition}px`;
}
const leftHandler = () => {
leftPosition = leftPosition - 20;
rightPosition = leftPosition;
hero.style.left = `${leftPosition}px`;
}
hero.onclick = clickHandler;
rightButton.onclick = rightHandler;
leftButton.onclick = leftHandler;
</script>

[tenor]

сидел думал почему код не работает, пробовал через райт позицию, вернулся к вычетанию с лефт, дальше думал, в итоге я ивент действие забыл добавить, чтоб при нажатии оно запустилось)

[oldborodach]

Скажи, а есть более интереснее игры на js и как я понял ты чисто по js программируешь, то есть знаток!

[ВладиславНазаров-уб]

<button id="left" style="
font-size: 20pt;
padding: 10pt;
">Left</button>
<button id="right" style="
font-size: 20pt;
padding: 10pt;
">Right</button>
<p id="hero" style="
background-color: blue;
font-size: 25pt;
padding: 20pt;
width: 30%;
text-align: center;
position: relative;
left: 0px;
">Text</p>

<script>
let hero =
let rightButton =
let leftButton =
let rightPosition = 0;
let leftPosition = 0;
const clickHandler = () =>{
if (hero.style.backgroundColor === 'grey') {
hero.style.backgroundColor = 'blue';
} else {
hero.style.backgroundColor = 'grey';
}
}
const rightHandler = () => {
rightPosition = rightPosition + 20;
hero.style.left = `${rightPosition}px`;
}
const leftHandler = () => {
leftPosition = leftPosition - 20;
hero.style.left = `${leftPosition}px`;
}
hero.onclick = clickHandler;
rightButton.onclick = rightHandler;
leftButton.onclick = leftHandler;
</script>

Всё работает. Но смущает что после нескольких кликов right при попытке нажать left кнопка переходит в исходное положение и потом двигается в лево. Как сделать так что бы после нажатия left расстояние отнималось не от исходного а от положения в котором она сейчас находится.

const leftHandler = () => {
leftPosition = leftPosition - 20; (если здесь поменять на leftPosition = rightPosition - 20; то кнопка срабатывает 1 раз и всё. Как автоматизировать шаблон?)
hero.style.left = `${leftPosition}px`;

[virtuosoalarm]

<Button id="left" style="
font-size: 20pt ;
padding: 10pt"
>Left</Button>

<button id="right" style="
font-size: 20pt;
padding: 10pt;
">Right</button>

<p id = "hero" style="
font-size: 20pt;
background-color: blueviolet;
width: 4%;
padding: 10pt;
text-align: center;
margin-left: 3%;
margin-top: 5%;
position: relative;
left: 0px;
"></p>

<script>
let hero =

let RightButton =
let rightPosition = 0;

let LeftButton =
let leftPosition = 0;

const clickHandler = () => {
if(hero.style.backgroundColor === 'blueviolet') {
hero.style.backgroundColor = 'aqua';
} else {
hero.style.backgroundColor = 'blueviolet';
}
}
const rightHandler = () => {
rightPosition = rightPosition + 20;
hero.style.left = `${rightPosition}px`;
}
const leftHandler = () => {
leftPosition = leftPosition + 20;
hero.style.left = `${leftPosition}px;`
}
hero.onclick = clickHandler;

RightButton.onclick = rightHandler;

LeftButton.onclick = leftHandler;
</script>

левая кнопка не работает, где ошибка?

[ТатьянаТомина-ьк]

<button id="right" style="
font-size: 20pt;
padding: 10pt;
">Right</button>
<p id="hero" style="
font-size: 25pt;
background-color: red;
width: 30%;
padding: 20pt;
text-align: center;
position: relative;
left: 0px;
">Text</p>

<script>
let hero =
let rightButton =
let rihtPosition = 0;
const clickHandler = () => {
if (hero.style.backgroundColor === 'red') {
hero.style.backgroundColor = 'blue';
} else {
hero.style.backgroundColor = 'red';
}
}
const rightHandler =() => {
rihtPosition = rightPosition + 20;
hero.style.left = `${rightPosition}px`;
}
hero.onclick = clickHandler;
rightButton.onclick = rightHandler;
</script>

где ошибка кнопка не двиается и когда прописал прописал второй скрипт кнопка text тоже перестала менять цвет