SNIKE (not snake) game source code. Full source code of (https://codepen.io/misir-ceferov/pen/bLRPaW)

snike.html

<!--
DEVELOPED BY:       OneDev Group
WEBSITE:            https://onedevgroup.com
PLAY ONLINE:        https://goo.gl/d8nya2
FULL SOURCE CODE:   https://goo.gl/GqpTAh
DEVELOPED FOR:      https://youtu.be/fteA6mOZjXw
-->
<style type="text/css">
  #wrapper canvas,
  #wrapper.playing menu {
    display: none;
  }
  #wrapper.playing canvas,
  #wrapper menu {
    display: block;
  }
  body {
    background: #f9f9f9;
  }
  #wrapper {
    font-family: sans-serif;
    text-align: center;
    width:  400px;
    margin: auto;
    height:  320px;
    background: #F29B34;
    color: #fff;
    padding-top: 80px;
  }
  #wrapper.playing {
    padding: 0;
    height: 400px;
  }
  menu {
    margin: 0;
    padding:  0;
    display: inline-block;
  }
  h2 {
    font-size: 50px;
    margin: 0;
  }
  .play-btn {
    border:  0;
    background:  0;
    color:  #fff;
    font-weight: bolder;
    font-size:  20px;
    margin-top:  160px;
    cursor: pointer;
  }
  p.info {
    font-family: monospace;
    margin-top:  20px;
    color: #aaa;
    text-align: center;
  }
</style>
<div class="container">
  <div id="wrapper">
    <canvas id="game" width="400" height="400"></canvas>
    <menu>
      <h2>SNIKE</h2>
      <button onclick="play();" class="play-btn">PLAY</button>
    </menu>
  </div>
  <p class="info">You can control snake with arrow keys</p>
</div>

<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));
  }

  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;
    this.canKeyPress = true;
    this.score = 0;
    
    this.sunX = this.sunX = 0;
    this.sunLive = 0;
    this.sunRemain = 5;
    this.sunDie = 0;
  }

  sunHealth() {
    return this.sunDie - Date.now();
  }

  sunSet() {
    this.sunDie = Date.now() + 5000;
  }

  sunReset() {
    this.sunDie = 0;
    this.sunX = Math.floor(Math.random() * this.tileCount);
    this.sunY = Math.floor(Math.random() * this.tileCount);
    while (!this.ontrails() && this.sunX > 1 && this.sunY > 1 && this.sunX < 18 && this.sunY < 18) {
      this.sunX = Math.floor(Math.random() * this.tileCount);
      this.sunY = Math.floor(Math.random() * this.tileCount);
    }
    this.sunRemain = 5;
  }

  load() {
    // 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);

    this.init();
    this.draw();
  }

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

  // Oyun döngümüz
  loop() {
    if (this.velocityX != 0 ||  this.velocityY != 0) {
      // Matematiksel hesaplamaları yap:
      this.update();
    }
    
    // Sonrasında ekrana çizimi gerçekleştir
    this.draw();
  }

  ontrails(x, y) {
    var r=false;
    this.trail.forEach(t => {
      r = r || (x === t.positionX && y === t.positionY);
    });
    return r;
  }

  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:
        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();
    }

    var g=this;
    function maybeApple(x, y) {
      return !g.ontrails(x, y);
    }
    
    function maybeSun(x, y) {
      return maybeApple(x, y) && x > 1 && y > 1 && x < 18 && y < 18;
    }

    // Sun
    if (this.sunX >= this.positionX - 1 && this.sunX <= this.positionX + 1 &&
        this.sunY >= this.positionY - 1 && this.sunY <= this.positionY + 1 &&
        this.sunHealth() > 0) {
      this.score += 5;
      this.sunReset();
    }

    
    // Yılan elma yedi mi?
    if (this.appleX === this.positionX && this.appleY === this.positionY) {
      // Yediyse yılanın boyutu uzat:
      this.tailSize++;
      
      // Increase score
      this.score++;
      
      // Sun
      this.sunRemain--;
      if (this.sunRemain == 0) {
        this.sunX = Math.floor(Math.random() * this.tileCount);
        this.sunY = Math.floor(Math.random() * this.tileCount);
        while (!maybeSun(this.sunX, this.sunY)) {
          this.sunX = Math.floor(Math.random() * this.tileCount);
          this.sunY = Math.floor(Math.random() * this.tileCount);
        }
        this.sunSet();
        
      }
      
      // 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);
      
      while (!maybeApple(this.appleX, this.appleY)) {
        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 = '#F29B34';
    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.fillText(this.score, 20, 40);

    // Yılanın herbir karesini sırayla ekrana çiziyoruz
    var i = 0;
    this.trail.forEach(t => {
      this.context.fillStyle = '#c3e96f';
      if (i == this.trail.length - 1) this.context.fillStyle = '#f8eee2';
      i++;
      
      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 = 'red';
    this.context.fillRect(this.appleX * this.gridSize, this.appleY * this.gridSize, this.gridSize - 5, this.gridSize - 5);
    
    if (this.sunHealth() > 0) {
      this.context.fillStyle = '#ffd800';
      this.context.fillRect(this.sunX * this.gridSize - 10, this.sunY * this.gridSize - 10, this.gridSize + 10, this.gridSize + 10);
      this.context.fillRect(0,0,this.canvas.width*this.sunHealth()/5000, 3);
    }
  }
  
  // Kullanıcının tuşa basmasını aktiv eder
  enableKeyPress() {
    this.canKeyPress = true;
  }

  // Kullanıcı websayfasındayken bir tuşa bastığında çağrılıyor:
  onKeyPress(e) {
    if (!this.canKeyPress) return;
    this.canKeyPress = false;
    this.timer = setTimeout(this.enableKeyPress.bind(this), 1000 / 15);
    
    
    // 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;
    }
  }
}

function play() {
  document.getElementById('wrapper').className = "playing";
  const game = new SnakeGame();
  game.load();
}
</script>