Очень много людей сейчас учит программирование на JavaScript, а учить нужно весело. Один из способов это сделать игру на Javascript, и я покажу для начинающих как это сделать легко и быстро. Игра на JavaScript для начинающих это способ реализации возможностей js в браузере с исполнением интересных действий. JavaScript программирование по урокам дает возможность создавать игры с нуля без глубоких знаний. Мы сделаем игру с гугл динозавром, где каждый новичек js сможет попробовать написать своими руками. Если вам интересна тема уроки создания игр на JavaScript для начинающих, пишите обязательно в комментарии!
31 Comments
Leave a Reply
You must be logged in to post a comment.
привет. Зделай видео как зделать в етой игре щот очков пж!
Для всех кто это смотрит, если ваш дино не прыгает вернитесь в html и проверьте, что написано в <script src= "script.js"> </script> Если у вас по другому назван файл ….JS, то дино не прыгает потому как HTML не видит файла js так как его название и src= не совпадают
Ничего не понял, но очень интересно!
Где исходник?
слушай, игра не работает, хотя код один в один как у тебя, в чём может быть приччина?
спасибо за урок, но вопрос такой, динозаврик никак не спускается вниз на линию, а остаётся вверху, хотя и пишу код в один в один как у тебя, как исправить?
Очень мало обясняешь, для новичков надо обяснять больше деталей
Мужик, ты офигенен, все понятно и увлекательно, только файлы бы прикрепил с картинками)
у меня не получилось но пишет что ошибок нет…
Если ты пишешь на JavaScript то и должен писать там (название видео говорит о том что пишем на JavaScript), но не затрагивать верстку html элементов, я считаю это видео бесполезным, вообще нужно игру создавать в canvas элементе
Блин, все, получилось, даже с др картинками! Класс:) а реально замутить типа танчиков, не те что ща все рубятся, а старые желтые, в начале 2000х рубились в школе помню
Переписал проект, но не рабртает движение кактуса
А у меня не прыгает динозаврик 🙁 Просмотрела код несколько раз и не знаю, в чем проблема.
Привет я новенький в этом деле только учусь сделал все почти как в видео только со своими значениями
У меня когда я смотрю консоль разработчика в браузере почему-то не добавляется class jump хотя все написал как в видео. В чем может быть проблема ?
Отлично
у меня не получается " Дино "не прыгает что делать все наптсал я код как видео
а можете скинуть код?
Первое знакомство с кодом случилось когда я решил помочь друзьям сделать мод к джава игре Rusted Warfare я ничего не умел, но быстро понял, что можно копировать основу и менять цифры, теперь хочу большего
у меня почему то кактус не показывается , что делать ?
прыжок не работает выдает ошибку в консоле хзы
пиксели для жампа плохо устроены. Я сделал 110 75 40
что делать если dino не прыгает
я весь код посмотрел ошибок 0
У меня не работает
I have to project this game 😁
линия на верху стоит
че делать?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game">
<div id="dino"></div>
<div id="cactus"></div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
document.addEventListener("keydown",
function(event) {
jump();
})
function jump() {
if (dino.classList != "jump") {
dino.classList.add("jump");
}
setTimeout(function() {
dino.classList.remove("jump")
}, 500)
}
let isAlive = setInterval(function() {
let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue("left"));
if (cactusLeft < 50 && cactusLeft > 0 && dinoTop >= 140) {
alert("GAME OVER!!")
}
})
style.css
.game {
width: 600px;
height: 200px;
border-bottom: 1px solid #000;
margin: auto;
}
#dino {
background-image: url(images/dino-removebg-preview.png);
background-size: 50px 50px;
width: 50px;
height: 50px;
position: relative;
top: 150px;
}
#cactus {
background-image: url(images/cactus.png);
background-size: 20px 40px;
width: 20px;
height: 40px;
position: relative;
top: 110px;
left: 580px;
animation: cactus 1.5s infinite linear;
}
@keyframes cactus {
0% {
left: 580px;
}
100% {
left: -20px;
}
}
.jump {
animation: jump 0.5s linear;
}
@keyframes jump {
0% {
top: 150px;
}
30% {
top: 120px;
}
50% {
top: 80px;
}
70% {
top: 120px;
}
100% {
top: 150px;
}
}
вот код кому нужно
У меня он не прыгает. Какая строка отвечает за прыжок ?
Родной след раз , файлы архива из уроки скидывай в описание), чтобы люди повторили твой шедевр и был сэмпл!)
можно готовый код? не совсем получается
Очень круто и понятно
я переписал код но когда пытаюсь его запустить просто белый экран в браузере 🙁