how to create a snake game in html css js
function control(e) { if (e.keycode === 39) { direction = 1; // right } else if (e.keycode === 38) { direction = -width; //if we press the up arrow, the snake will go ten divs up } else if (e.keycode === 37) { direction = -1; // left, the snake will go left one div } else if (e.keycode === 40) { direction = +width; // down the snake head will instantly appear 10 divs below from the current div } }
how to create a snake game in html css js
<h1>Nokia 3310 snake</h1> <div class="scoreDisplay"></div> <div class="grid"></div> <div class="button"> <button class="top">top</button> <button class="bottom">bottom</button> <button class="left">left</button> <button class="right">right</button> </div> <div class="popup"> <button class="playAgain">play Again</button> </div>
how to create a snake game in html css js
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("keyup", control); createBoard(); startGame(); playAgain.addEventListener("click", replay); });
how to create a snake game in html css js
function eatApple(squares, tail) { if (squares[currentSnake[0]].classList.contains("apple")) { squares[currentSnake[0]].classList.remove("apple"); squares[tail].classList.add("snake"); currentSnake.push(tail); randomApple(squares); score++; scoreDisplay.textContent = score; clearInterval(interval); intervalTime = intervalTime * speed; interval = setInterval(moveOutcome, intervalTime); } }
how to create a snake game in html css js
function moveSnake(squares) { let tail = currentSnake.pop(); squares[tail].classList.remove("snake"); currentSnake.unshift(currentSnake[0] + direction); // movement ends here eatApple(squares, tail); squares[currentSnake[0]].classList.add("snake"); }
how to create a snake game in html css js
up.addEventListener("click", () => (direction = -width)); bottom.addEventListener("click", () => (direction = +width)); left.addEventListener("click", () => (direction = -1)); right.addEventListener("click", () => (direction = 1));
how to create a snake game in html css js
body { background: rgb(212, 211, 211); } .grid { width: 200px; height: 200px; border: 1px solid red; margin: 0 auto; display: flex; flex-wrap: wrap; } .grid div { width: 20px; height: 20px; /*border:1px black solid; box-sizing:border-box*/ } .snake { background: blue; } .apple { background: yellow; border-radius: 20px; } .popup { background: rgb(32, 31, 31); width: 100px; height: 100px; position: fixed; top: 100px; left: 100px; display: flex; justify-content: center; align-items: center; }
Source: www.freecodecamp.org
how to create a snake game in html css js
function createBoard() { popup.style.display = "none"; for (let i = 0; i < 100; i++) { let div = document.createElement("div"); grid.appendChild(div); } }
how to create a snake game in html css js
function randomApple(squares) { do { appleIndex = Math.floor(Math.random() * squares.length); } while (squares[appleIndex].classList.contains("snake")); squares[appleIndex].classList.add("apple"); }
how to create a snake game in html css js
function replay() { grid.innerHTML = ""; createBoard(); startGame(); popup.style.display = "none"; }