Okay so I just started with the game.Actually just started is a huge lie because I am struggeling since 10:00 and we now have 17:00.I used a tutorial and tried to just start basic with making a little jumping game but the objects …They do not exist because the whole generating thing does not work .I first need to get everything working before upgrading the graphics and stuff.I really would like some help! CSS:#background { position: absolute; background-image: url('https://files.catbox.moe/xqsbzm.png'); height: 200px; width: 100%; animation: slideright 600s infinite linear; bottom: 0;}.wendy { background-image: url('https://files.catbox.moe/u52u37.png'); height: 60px; width: 60px; position: absolute; bottom: 0;}.obstacle { background-image: url('https://files.catbox.moe/n5f03w.png'); width: 60px; height: 60px; position: absolute; bottom: 0;}@keyframes slideright { from { background-position: 0 0; } to { background-position: -10000px 0; }} HTML:<div id="gameWindow"> <div class="base5"> <div class="symbolegame"> <p id="galerieWindowheader"> <img src="https://i.imgur.com/Y4OL1On.gif"></p> <p style="cursor: pointer" id="gameclose"><img src="https://i.imgur.com/q5TmYNg.gif"></p> <p style="cursor: pointer" id="gameopen"><img src="https://i.imgur.com/3nBda2J.gif"></p> </div> <div id="background"> <h6 id="alert"></h6> <div class="wendy"></div> <div class="grid"></div> </div> </div> </div> </div> JS:document.addEventListener('DOMContentLoaded', () => { const wendy = document.querySelector('.wendy') const grid = document.querySelector('.grid') const alert = document.getElementById('alert') let gravity = 0.9 let isJumping = false let isGameOver = false function control(e) { if (e.code === "Space") { if (!isJumping) { jump() } } } document.addEventListener('keydown', control) let position = 0 function jump() { isJumping = true let count = 0 let timerId = setInterval(function () { //move down if (count === 15) { clearInterval(timerId) let downTimerId = setInterval(function () { if (count === 0) { clearInterval(downTimerId) isJumping = false } position -= 5 count-- position = position * gravity wendy.style.bottom = position + 'px' }, 20) } //move up position += 20 count++ position = position * gravity wendy.style.bottom = position + 'px' }, 20) } function generateObstacles() { if (!isGameOver) { let randomTime = Math.random() * 4000 let obstaclePosition = 1000 const obstacle = document.createElement('div') obstacle.classList.add('obstacle') grid.appendChild(obstacle) obstacle.style.left = obstaclePosition + 'px' let timerId = setInterval(function () { if (obstaclePosition > 0 && obstaclePosition < 60 && position < 60) { clearInterval(timerId) alert.innerHTML = 'Game Over' isGameOver = true //remove all children while (grid.firstChild) { grid.removeChild(grid.lastChild) } } obstaclePosition -= 10 obstacle.style.left = obstaclePosition + 'px' }, 20) setTimeout(generateObstacles, randomTime) } } generateObstacles()}) Thanks for reading<3
Comments 1
WOW this is so cool keep up the good work!
Sign in to join the conversation.