JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<span id="canvas">
  <span class="tile">Ψ</span>
  <span class="tile">Θ</span>
  <span class="tile">Θ</span>
  <span class="tile">Θ</span>
  <span class="tile">Θ</span>
  <span class="tile">Θ</span>
  <span class="tile">Θ</span>
  <span class="tile">Δ</span>
  <span id="apple">֍</span>
</span>
<div id="scoreboard" style="color:white">
<button onclick="resetGame()">New Game</button><br>
<div>LEVEL: <span id="level">1</span></div>
<div>SCORE: <span id="score">0</span></div><br><br>
<div><span id="gameover"></span></div>
</div>

CSS

#canvas {
  position: relative;
  background-color: black;
  border: 2px solid white;
  width: 500px;
  height: 500px;
  display: flex;
  font-size: 0;
  overflow: hidden;
}

.tile,
#apple {
  position: absolute;
  height: 20px;
  width: 20px;
  font-size: 24px;
  transform: rotate(270deg);
}

#apple {
  line-height: 12px;
}

body {
  background-color: black;
  display: flex;
  font-weight: 900;
  text-align: center;
  color: white;
  line-height: 20px;
}

JavaScript

var tiles = document.getElementsByClassName("tile");
var direction = 4;
var speed = 500;
var newPositionLeft = 0;
var newPositionTop = 0;
var gameOver = false;
var apple = document.getElementById("apple");
var appleCount = 0;
var level = 1;
var score = 0;
var intervalCount = 1;

function addElement(sign, left, top, currentSpan) {
  newSpan = document.createElement("span");
  newSpan.classList.add("tile");
  newContent = document.createTextNode(sign);
  newSpan.appendChild(newContent);
  newSpan.style.position = "absolute";
  newSpan.style.height = "20px";
  newSpan.style.width = "20px";
  newSpan.style.left = left + "px";
  newSpan.style.top = top + "px";
  newSpan.style.fontSize = "24px";
  newSpan.style.transform = "rotate(" + (direction - 1) * 90 + "deg)";
  appendTo = currentSpan;
  document.getElementById("canvas").insertBefore(newSpan, appendTo);
}

function resetGame() {
  clearInterval(movement);
  level = 1;
  score = 0;
  direction = 4;
  document.getElementById("level").innerHTML = level;
  document.getElementById("score").innerHTML = score;
  document.getElementById("gameover").innerHTML = "";
  for (i = tiles.length - 1; i >= 0; i--) {
    tiles[i].remove();
  }
  for (i = 0; i < 9; i++) {
    if (i == 0) {
      sign = "Ψ";
    } else if (i == 8) {
      sign = "Δ";
    } else {
      sign = "Θ";
    }
    addElement(sign, 0, 0, apple);
  }
  tiles = document.getElementsByClassName("tile");
  speed = 500;
  newPositionLeft = 0;
  newPositionTop = 0;
  gameOver = false;
  appleCount = 0;
  intervalCount = 1;
  snakeMovement();
  generateApple();
}

function snakeMovement() {
  movement = setInterval(function() {
    intervalCount *= 0.4;
    moveSnake();
  }, speed);
}

function collision() {
  for (i = 1; i < tiles.length; i++) {
    if (newPositionLeft == tiles[i].offsetLeft && newPositionTop == tiles[i].offsetTop) {
      clearInterval(movement);
      gameOver = true;
      document.getElementById("gameover").innerHTML = "GAME OVER!";
     ...