# MY SNAKE GAME
By [Irmak Sinayuc](https://paragraph.com/@irmak-sinayuc) ยท 2022-06-15
---
//HTML PART
Snake
Snake
//JAVA SCRIPT PART
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
class SnakePart{
constructor(x, y){
this.x = x;
this.y = y;
}
}
let speed = 7;
let tileCount = 20;
let tileSize = canvas.width / tileCount - 2;
let headX = 10;
let headY = 10;
const SnakeParts =[];
let tailLength = 2;
let appleX = 5
let appleY = 5
let xVelocity = 0;
let yVelocity = 0;
let score = 0;
function drawGame(){
changeSnakePosition();
let result = isGameOver();
if(result){
return;
}
clearScreen();
checkAppleCollision();
drawApple();
drawSnake();
drawScore();
setTimeout(drawGame, 1000/ speed);
}
function isGameOver(){
let gameOver = false;
if(yVelocity ===0 && xVelocity ===0){
return false;
}
//wals
if(headX < 0){
gameOver = true;
}
else if (headX === tileCount){
gameOver = true;
}
else if( headY < 0){
gameOver = true;
}
else if(headY === tileCount){
gameOver = true;
}
for(let i =0; i< SnakeParts.length; i++){
let part = SnakeParts[i];
if(part.x === headX && part.y === headY){
gameOver = true;
break;
}
}
if(gameOver){
ctx.fillStyle = " #EA9AB2 ";
ctx.font = "50px Arizonia";
ctx.fillText("Game Over!", canvas.width / 6.5, canvas.height / 2)
}
return gameOver;
}
function drawScore(){
ctx.fillStyle = "white";
ctx.font = "10px Verdana"
ctx.fillText(" Score " + score, canvas.width -50, 10);
}
function clearScreen(){
ctx.fillStyle = 'black';
ctx.fillRect(0,0,canvas.clientWidth,canvas.height);
}
function drawSnake(){
ctx.fillStyle = 'green';
for(let i =0; i < SnakeParts.length; i++){
let part = SnakeParts[i];
ctx.fillRect(part.x * tileCount, part.y * tileCount, tileSize, tileSize)
}
SnakeParts.push(new SnakePart(headX, headY));
if(SnakeParts.length >tailLength){
SnakeParts.shift();
}
ctx.fillStyle = 'orange'
ctx.fillRect(headX * tileCount, headY * tileCount, tileSize, tileSize)
}
function changeSnakePosition(){
headX = headX + xVelocity;
headY = headY + yVelocity;
}
function drawApple(){
ctx.fillStyle = "red";
ctx.fillRect(appleX * tileCount, appleY * tileCount, tileSize, tileSize)
}
function checkAppleCollision(){
if(appleX == headX && appleY == headY){
appleX = Math.floor(Math.random()* tileCount);
appleY = Math.floor(Math.random()* tileCount);
tailLength++;
score++;
}
}
document.body.addEventListener('keydown', keyDown);
function keyDown(event){
//up eventcode = 38
if(event.keyCode == 38){
if (yVelocity==1)
return;
yVelocity = -1;
xVelocity = 0;
}
//down
if(event.keyCode == 40){
if (yVelocity==-1)
return;
yVelocity = 1;
xVelocity = 0;
}
//left
if(event.keyCode == 37){
if (xVelocity==1)
return;
yVelocity = 0;
xVelocity = -1;
}
//right
if(event.keyCode == 39){
if (xVelocity==-1)
return;
yVelocity = 0;
xVelocity = 1;
}
}
drawGame();
//I made this game and I would really like to share this but the only way seems that it'll be possible is you copying this code in visual studio code too. And get the live server plugin. I will share the link too but I dont think its going to work. I hope it does. This is not a blog. I couldn't share it normally so I'm getting help.
[http://127.0.0.1:5500/index.html](http://127.0.0.1:5500/index.html)
---
*Originally published on [Irmak Sinayuc](https://paragraph.com/@irmak-sinayuc/my-snake-game)*