Share your repls and programming experiences

← Back to all posts
Snake
YashasShah (37)

Do you know that game where that snake is trying to eat fruits?

I tried making that game and I will come up with one with better graphics.

For now, ENJOY!

Comments
hotnewtop
RahulChoubey1 (126)

instead of using <div class = "thing">, take advantage of Repl.it's custom tag support and use tag <thing> instead. in the CSS, replace div.thing with thing

Muhammad_SJC (115)

@RahulChoubey1 by the way it is not only used in replit. It is called Emmet Abreviation

RahulChoubey1 (126)

@Muhammad_SJC I know. But I'm not talking about abbrs. I'm talking about custom tags.

YashasShah (37)

If anyone wants to join my DevTeam, just let me know (limit 8).

FlaminHotValdez (355)

make the snake faaaaaaaaaaaaaaaaster

Muhammad_SJC (115)

Wait wait wait... how does the snake even move when there is no code there to move it. And not going to lie, the code is very clunky. No offense.

Noahloader12 (9)

@Muhammad_SJC uh the arrow keys it works for me?

Muhammad_SJC (115)

@Noahloader12 No I know that. But I'm trying to work out HOW the snake moves. As in look into the code.

CodingRedpanda (164)

@YashasShah ummm, correct me if im wrong, but the app.js doesnt have anything, so how does the 'snake' move?

CodingRedpanda (164)

@RahulChoubey1
index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="app.js" charset="utf-8"></script>
    <link rel="stylesheet" href="style.css">
    <title>Snake Tutorial</title>
  </head>
  <body>

    <button class='start'>Start/Restart</button>
    <div class='score'>Score:<span>0</span></div>

    <div class='grid'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

  </body>
</html>

app.js

style.css

.grid {
  width: 200px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  border-style: solid;
}

.grid div {
  width: 20px;
  height: 20px;
}

.snake {
  background-color: blue;
}

.apple {
  background-color: purple;
}

and nowhere does it say key sensing or anything!

CodingRedpanda (164)

@YashasShah but then when i view the source it says (in app.js)

document.addEventListener('DOMContentLoaded', () => {
  const squares = document.querySelectorAll('.grid div')
  const scoreDisplay = document.querySelector('span')
  const startBtn = document.querySelector('.start')

  const width = 10
  let currentIndex = 0 //so first div in our grid
  let appleIndex = 0 //so first div in our grid
  let currentSnake = [2,1,0] 
  let direction = 1
  let score = 0
  let speed = 0.9
  let intervalTime = 0
  let interval = 0


  //to start, and restart the game
  function startGame() {
    currentSnake.forEach(index => squares[index].classList.remove('snake'))
    squares[appleIndex].classList.remove('apple')
    clearInterval(interval)
    score = 0
    randomApple()
    direction = 1
    scoreDisplay.innerText = score
    intervalTime = 1000
    currentSnake = [2,1,0]
    currentIndex = 0
    currentSnake.forEach(index => squares[index].classList.add('snake'))
    interval = setInterval(moveOutcomes, intervalTime)
  }


  //function that deals with ALL the ove outcomes of the Snake
  function moveOutcomes() {

    //deals with snake hitting border and snake hitting self
    if (
      (currentSnake[0] + width >= (width * width) && direction === width ) || //if snake hits bottom
      (currentSnake[0] % width === width -1 && direction === 1) || //if snake hits right wall
      (currentSnake[0] % width === 0 && direction === -1) || //if snake hits left wall
      (currentSnake[0] - width < 0 && direction === -width) ||  //if snake hits the top
      squares[currentSnake[0] + direction].classList.contains('snake') //if snake goes into itself
    ) {
      return clearInterval(interval) //this will clear the interval if any of the above happen
    }

    const tail = currentSnake.pop() //removes last ite of the array and shows it
    squares[tail].classList.remove('snake')  //removes class of snake from the TAIL
    currentSnake.unshift(currentSnake[0] + direction) //gives direction to the head of the array

    //deals with snake getting apple
    if(squares[currentSnake[0]].classList.contains('apple')) {
      squares[currentSnake[0]].classList.remove('apple')
      squares[tail].classList.add('snake')
      currentSnake.push(tail)
      randomApple()
      score++
      scoreDisplay.textContent = score
      clearInterval(interval)
      intervalTime = intervalTime * speed
      interval = setInterval(moveOutcomes, intervalTime)
    }
    squares[currentSnake[0]].classList.add('snake')
  }


  //generate new apple once apple is eaten
  function randomApple() {
    do{
      appleIndex = Math.floor(Math.random() * squares.length)
    } while(squares[appleIndex].classList.contains('snake')) //making sure apples dont appear on the snake
    squares[appleIndex].classList.add('apple')
  }


  //assign functions to keycodes
  function control(e) {
    squares[currentIndex].classList.remove('snake')

    if(e.keyCode === 39) {
      direction = 1 //if we press the right arrow on our keyboard, the snake will go right one
    } else if (e.keyCode === 38) {
      direction = -width // if we press the up arrow, the snake will go back ten divs, appearing to go up
    } else if (e.keyCode === 37) {
      direction = -1 // if we press left, the snake will go left one div
    } else if (e.keyCode === 40) {
      direction = +width //if we press down, the snake head will instantly appear in the div ten divs from where you are now
    }
  }

  document.addEventListener('keyup', control)
  startBtn.addEventListener('click', startGame)
})

why is that?

RahulChoubey1 (126)

@CodingRedpanda Maybe it has to do with flex thing or something. I know what it is, but still. THIS IS IMPOSSIBLE WE HAVE A HAKKER AAAA

RahulChoubey1 (126)

@CodingRedpanda flex is a modern way of aligning and managing rows and columns in CSS. Actually, ask Google. I'm terrible at wording these kinds of things.

CodingRedpanda (164)

@RahulChoubey1

flex is a modern way of aligning and managing rows and columns in CSS

ok

Actually, ask Google. I'm terrible at wording these kinds of things.

no, the way you said it was fine

JaydenSavarinat (14)

Nice Job, I like it! Just a little more CSS and it will rock and like @InvisibleOne said you should make the snake faster, but overall good job!

InvisibleOne (2252)

Nice, you should make a little faster though

YashasShah (37)

@InvisibleOne, thank you for the suggestion!

InvisibleOne (2252)

Also, is there a way you could slightly round the corners of the snakes segments so you could easily see how many segments you have? @YashasShah