Notes

if(!localStorage.bestScore) {
localStorage.setItem("bestScore", 0);
}

function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}

class SnakeGame {
constructor() {
this.canvas = document.getElementById('game');
this.context = this.canvas.getContext('2d');
this.deathSound = new Audio("https://freesound.org/data/previews/335/335906_5865517-lq.mp3");
this.pointSound = new Audio("https://freesound.org/data/previews/270/270303_5123851-lq.mp3");
this.apple = document.getElementById('apple');
this.grass = document.getElementById('grass');
// this.rat = document.getElementById('rat');
this.bestScore = localStorage.bestScore;
// Basılan tuşları algılıyoruz:
document.addEventListener('keydown', this.onKeyPress.bind(this));
}

init() {
// Menu
this.context.fillStyle = 'black';
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.context.fillStyle = 'white';
this.context.font = '20px Arial';
this.context.fillText("Snake", 198, 150);
this.context.fillText("PLAY", 200,200);


// Yeni oyun için ilk değer atamaları:
this.positionX = this.positionY = 10;s
this.appleX = this.appleY = 5;
this.ratX = this.ratY = 10;
this.tailSize = 5;
this.trail = [];
this.gridSize = this.tileCount = 20;
this.velocityX = this.velocityY = 0;
this.time = 0;

// Oyun döngümüz çalışmaya başlıyor.
// Her saniyede 15 kez çalışacak, yani 15 FPS olacak.
// Üç boyutlu çok daha büyük oyunlar genelde 60 FPS üzerinde çalışıyor.
this.timer = setInterval(this.loop.bind(this), 1000 / 15);
}

reset() {
// Oyun göngüsünü durdur:
clearInterval(this.timer);

// Oyun ile alakalı detayları en baştaki haline geri döndür:
this.init();
}

// Oyun döngümüz
loop() {
// Matematiksel hesaplamaları yap:
this.update();

// Sonrasında ekrana çizimi gerçekleştir
this.draw();
}

update() {
// Yılanın başını X ve Y koordinat düzleminde gittiği yöne hareket ettir
this.positionX += this.velocityX;
this.positionY += this.velocityY;

// Yılan sağ, sol, üst ya da alt kenarlara değdi mi?
// Değdiyse ekranın diğer tarafından devam ettir
if (this.positionX < 0) {
this.positionX = this.tileCount - 1;
} else if (this.positionY < 0) {
this.positionY = this.tileCount - 1;
} else if (this.positionX > this.tileCount - 1) {
this.positionX = 0;
} else if (this.positionY > this.tileCount - 1) {
this.positionY = 0;
}

// Yılan kendi üstüne bastı mı?
this.trail.forEach(t => {
if (this.positionX === t.positionX && this.positionY === t.positionY) {
if (this.time!==0) {
this.deathSound.play();
}
// Bastıysa game over olduk, oyunu resetle:
this.reset();
}
});

// Yılanın başını yılanın herbir karesini hafızada tuttuğumuz diziye koy
this.trail.push({positionX: this.positionX, positionY: this.positionY});

// Yılanın başını hareket ettirdik, şimdi kuyruktan kırpmamız gerekiyor
while (this.trail.length > this.tailSize) {
this.trail.shift();
}

// Yılan elma yedi mi?
if (this.appleX === this.positionX && this.appleY === this.positionY) {
// Yediyse yılanın boyutu uzat:
this.tailSize++;
if (this.tailSize-5>this.bestScore) {
this.bestScore= this.tailSize-5;
localStorage.bestScore = this.bestScore;
}
this.pointSound.play();

// Ekrana yeni bir elma koymak lazım.
// Rasgele ve yılanın üzerinde olmayan X ve Y koordinatı üretip oraya elmayı atalım:
let find = false;
do{
let randomX = Math.floor(Math.random() * this.tileCount);
let randomY = Math.floor(Math.random() * this.tileCount);
this.trail.forEach(t => {
if (randomX!==t.positionX && randomY!==t.positionY) {
find=true;
}else{
find = false;
}
});
if (find) {
this.appleX=randomX;
this.appleY=randomY;
}
}while(!find);
this.time++;
}
}

// Ekrana çizim gerçekleştiriyor:
draw() {


for(let i = 0; i<20;i++){
for (let j = 0; j < 20; j++) {
this.context.drawImage(grass,i*this.gridSize, j*this.gridSize,20,20);
}
}

// Skoru ekranın sol üst köşesine yazdıralım
this.context.fillStyle = 'white';
this.context.font = '20px Arial';
this.context.fillText(this.tailSize - 5, 20, 40);

this.context.fillText(this.bestScore,360,40);

// Yılanın herbir karesini sırayla ekrana çiziyoruz
this.context.fillStyle = 'yellow';
this.trail.forEach(t => {
this.context.fillRect(t.positionX * this.gridSize, t.positionY * this.gridSize, this.gridSize - 5, this.gridSize - 5);
});

// Son olarak elmayı ekrana çizdirelim:
this.context.drawImage(apple,this.appleX* this.gridSize, this.appleY* this.gridSize,20, 20);
this.context.drawImage(rat,this.ratX* this.gridSize, this.ratY* this.gridSize,60, 60);
//this.context.fillRect(this.appleX * this.gridSize, this.appleY * this.gridSize, this.gridSize - 5, this.gridSize - 5);
}

// Kullanıcı websayfasındayken bir tuşa bastığında çağrılıyor:
onKeyPress(e) {
// Kullanıcı sol oka bastı, yılan sağa gitmiyorsa yılanı sola döndür
if (e.keyCode === 37 && this.velocityX !== 1) {
this.velocityX = -1;
this.velocityY = 0;
}

// Kullanıcı yukarı oka bastı, yılan aşağı gitmiyorsa yılanı yukarı döndür
else if (e.keyCode === 38 && this.velocityY !== 1) {
this.velocityX = 0;
this.velocityY = -1;
}

// Kullanıcı sağ oka bastı, yılan sola gitmiyorsa yılanı sağa döndür
else if (e.keyCode === 39 && this.velocityX !== -1) {
this.velocityX = 1;
this.velocityY = 0;
}

// Kullanıcı aşağı oka bastı, yılan yukarı gitmiyorsa yılanı aşağı döndür
if (e.keyCode === 40 && this.velocityY !== -1) {
this.velocityX = 0
this.velocityY = 1;
}
}
}

// Yeni oyun oluştur:
const game = new SnakeGame();

// Sayfa yüklendiğinde oyunu oynanabilir hale getir:
window.onload = () => game.init();