Snake.html

<canvas id="game" width="400" height="400"></canvas>

<script>
class SnakeGame {
  constructor() {
    this.canvas = document.getElementById('game');
    this.context = this.canvas.getContext('2d');
    
    // Basılan tuşları algılıyoruz:
    document.addEventListener('keydown', this.onKeyPress.bind(this));
	this.gameOverStat = 0;
	alert("Hoş geldiniz\nYılan oyunu V1 \nAlperenK");
  }

  init() {
    // Yeni oyun için ilk değer atamaları:
    this.positionX = this.positionY = 10;
    this.appleX = this.appleY = 5;
    this.tailSize = 5;
    this.trail = [];
    this.gridSize = this.tileCount = 20;
    this.velocityX = this.velocityY = 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) {
        // Bastıysa game over olduk, oyunu resetle:
		
		if((this.positionX != 10) && (this.positionY != 10)){
			console.log("Yandın kardo :(\n\r");
			this.gameOverStat = 1;
			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++;
      
      // Ekrana yeni bir elma koymak lazım.
      // Rasgele X ve Y koordinatı üretip oraya elmayı atalım:
      this.appleX = Math.floor(Math.random() * this.tileCount);
      this.appleY = Math.floor(Math.random() * this.tileCount);
    }
  }

  // Ekrana çizim gerçekleştiriyor:
  draw() {
    // İlk olarak siyah arkaplanı çiziyoruz
    this.context.fillStyle = 'black';
    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);

    // Skoru ekranın sol üst köşesine yazdıralım
    this.context.fillStyle = 'white';
    this.context.font = '20px Arial';
	this.context.beginPath();
	this.context.lineWidth = "2";
    this.context.strokeStyle = "red";
	this.context.rect(15, 20, 35, 25);
    this.context.stroke();
    this.context.fillText(this.tailSize - 5, 20, 40);
	//this.context.fillText(this.gameOverStat, 20, 60);

    // 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.fillStyle = 'pink';
    this.context.fillRect(this.appleX * this.gridSize, this.appleY * this.gridSize, this.gridSize - 5, this.gridSize - 5);
	
	if(this.gameOverStat == 1){
		this.context.fillStyle = 'red';
		this.context.font = '50px Arial';
		this.context.fillText("Game Over!", 70, 300);
	}
  }

  // 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;
    }
	this.gameOverStat = 0;
  }
}

// Yeni oyun oluştur:
const game = new SnakeGame();
  
// Sayfa yüklendiğinde oyunu oynanabilir hale getir:
window.onload = () => game.init();
</script>