Skip to content
← Back to Community
Snake
Profile icon
G0RG3

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!

Voters
Profile icon
ShadowWalker258
Profile icon
Whippingdot
Profile icon
forceofyoda
Profile icon
Gr8est
Profile icon
Noahloader12
Profile icon
TsunamiOrSumth
Profile icon
glitchish
Profile icon
bellabonura21
Profile icon
JaydenSavarinat
Profile icon
InvisibleOne
Comments
hotnewtop
Profile icon
BobTheTomatoPie

you could have made this in canvas

Profile icon
NoNameByProgram
Profile icon
RahulChoubey1

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

Profile icon
Muhammad_SJC

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

Profile icon
RahulChoubey1

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

Profile icon
Muhammad_SJC

@RahulChoubey1 oh right. ok

Profile icon
DivaR

Ania used the same code . IDK if it's copied form here or not .
https://www.youtube.com/watch?v=rui2tRRVtc0

Profile icon
G0RG3

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

Profile icon
JakeHu2020

Here I made another version: http://repl.it/@JakeHu2020/snake

Profile icon
G0RG3

@JakeHu2020, awesome job!

Profile icon
JakeHu2020

@YashasShah thanks :)

Profile icon
FlaminHotValdez

make the snake faaaaaaaaaaaaaaaaster

Profile icon
Muhammad_SJC

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.

Profile icon
Noahloader12

@Muhammad_SJC uh the arrow keys it works for me?

Profile icon
Muhammad_SJC

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

Profile icon
glitchish
Profile icon
Muhammad_SJC

@CodingRedpanda ok now I got it. Thanks

Profile icon
glitchish

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

Profile icon
RahulChoubey1

@CodingRedpanda I don't know!

Profile icon
glitchish

@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!

Profile icon
glitchish

@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?

Profile icon
RahulChoubey1

@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

Profile icon
glitchish

@RahulChoubey1

flex

im an idiot, what is flex?

Profile icon
RahulChoubey1

@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.

Profile icon
glitchish

@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

Profile icon
JaydenSavarinat

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!

Profile icon
InvisibleOne

Nice, you should make a little faster though

Profile icon
G0RG3

@InvisibleOne, thank you for the suggestion!

Profile icon
InvisibleOne
Profile icon
InvisibleOne

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