mark-szabo · April 19, 2019 09:38
diff --git a/snake.html b/snake.html
 <head>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    canvas {
      background-color: #000;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }

    #score {
      color: white;
      font-family: Courier New, Courier, monospace;
      font-size: 50px;
      margin: 0;
    }
  </style>
 </head>

 <body>
  <canvas id="gamecanvas"></canvas>
  <div style="top: 10px; position: absolute; right: 10px;">
    <p id="score">0</p>
  </div>
  <script>
    const UP_KEY = 38;
    const DOWN_KEY = 40;
    const LEFT_KEY = 37;
    const RIGHT_KEY = 39;
    const W_KEY = 87;
    const S_KEY = 83;
    const A_KEY = 65;
    const D_KEY = 68;
    const GRID_SIZE = 30;

    var player = {
      x: 10,
      y: 10
    };
    var apple = {
      x: 15,
      y: 15
    };
    var vector = {
      x: 0,
      y: 0
    };
    var lastKeyEvent = 0;
    trail = [];
    tail = 5;
    score = 0;
    var interval = setInterval(game, 1000 / (score + 7));

    function resizeCanvas() {
      canv.width = window.innerWidth;
      canv.height = window.innerHeight;
      TILE_COUNT_X = Math.floor(window.innerWidth / GRID_SIZE);
      TILE_COUNT_Y = Math.floor(window.innerHeight / GRID_SIZE);
    }
    window.onload = function() {
      canv = document.getElementById("gamecanvas");
      context = canv.getContext("2d");
      window.addEventListener("resize", resizeCanvas, false);
      resizeCanvas();
      document.addEventListener("keydown", keyPush);
    };

    function game() {
      player.x += vector.x;
      player.y += vector.y;
      if (player.x < 0) {
        player.x = TILE_COUNT_X - 1;
      }
      if (player.x > TILE_COUNT_X - 1) {
        player.x = 0;
      }
      if (player.y < 0) {
        player.y = TILE_COUNT_Y - 1;
      }
      if (player.y > TILE_COUNT_Y - 1) {
        player.y = 0;
      }
      context.fillStyle = "black";
      context.fillRect(0, 0, canv.width, canv.height);

      for (var i = 1; i < trail.length; i++) {
        if (trail[i].x == player.x && trail[i].y == player.y) {
          tail = trail.length - i > 5 ? trail.length - i : 5;
          score = tail - 5;
          document.getElementById("score").innerHTML = score;
        }
      }

      trail.push({ x: player.x, y: player.y });
      while (trail.length > tail) {
        trail.shift();
      }

      context.fillStyle = "lime";
      for (var i = 0; i < trail.length; i++) {
        context.fillRect(
          trail[i].x * GRID_SIZE,
          trail[i].y * GRID_SIZE,
          GRID_SIZE - 2,
          GRID_SIZE - 2
        );
      }

      if (apple.x == player.x && apple.y == player.y) {
        tail++;
        score++;
        document.getElementById("score").innerHTML = score;
        /*clearInterval(interval);
 				setInterval(game, 1000 / speed);*/
        needAppleReposition = true;
        while (needAppleReposition) {
          apple.x = Math.floor(Math.random() * TILE_COUNT_X);
          apple.y = Math.floor(Math.random() * TILE_COUNT_Y);
          needAppleReposition = false;
          trail.forEach(element => {
            if (element.x == apple.x && element.y == apple.y)
              needAppleReposition = true;
          });
        }
      }

      context.fillStyle = "red";
      context.fillRect(
        apple.x * GRID_SIZE,
        apple.y * GRID_SIZE,
        GRID_SIZE - 2,
        GRID_SIZE - 2
      );
    }

    function keyPush(event) {
      switch (event.keyCode) {
        case LEFT_KEY:
        case A_KEY:
          if (lastKeyEvent == RIGHT_KEY || lastKeyEvent == D_KEY) return;
          vector.x = -1;
          vector.y = 0;
          break;
        case UP_KEY:
        case W_KEY:
          if (lastKeyEvent == DOWN_KEY || lastKeyEvent == S_KEY) return;
          vector.x = 0;
          vector.y = -1;
          break;
        case RIGHT_KEY:
        case D_KEY:
          if (lastKeyEvent == LEFT_KEY || lastKeyEvent == A_KEY) return;
          vector.x = 1;
          vector.y = 0;
          break;
        case DOWN_KEY:
        case S_KEY:
          if (lastKeyEvent == UP_KEY || lastKeyEvent == W_KEY) return;
          vector.x = 0;
          vector.y = 1;
          break;
      }
      lastKeyEvent = event.keyCode;
    }
  </script>
 </body>
	<head>
	<style>
	html,
	body {
	width: 100%;
	height: 100%;
	margin: 0;
	}

	canvas {
	background-color: #000;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	}

	#score {
	color: white;
	font-family: Courier New, Courier, monospace;
	font-size: 50px;
	margin: 0;
	}
	</style>
	</head>

	<body>
	<canvas id="gamecanvas"></canvas>
	<div style="top: 10px; position: absolute; right: 10px;">
	<p id="score">0</p>
	</div>
	<script>
	const UP_KEY = 38;
	const DOWN_KEY = 40;
	const LEFT_KEY = 37;
	const RIGHT_KEY = 39;
	const W_KEY = 87;
	const S_KEY = 83;
	const A_KEY = 65;
	const D_KEY = 68;
	const GRID_SIZE = 30;

	var player = {
	x: 10,
	y: 10
	};
	var apple = {
	x: 15,
	y: 15
	};
	var vector = {
	x: 0,
	y: 0
	};
	var lastKeyEvent = 0;
	trail = [];
	tail = 5;
	score = 0;
	var interval = setInterval(game, 1000 / (score + 7));

	function resizeCanvas() {
	canv.width = window.innerWidth;
	canv.height = window.innerHeight;
	TILE_COUNT_X = Math.floor(window.innerWidth / GRID_SIZE);
	TILE_COUNT_Y = Math.floor(window.innerHeight / GRID_SIZE);
	}
	window.onload = function() {
	canv = document.getElementById("gamecanvas");
	context = canv.getContext("2d");
	window.addEventListener("resize", resizeCanvas, false);
	resizeCanvas();
	document.addEventListener("keydown", keyPush);
	};

	function game() {
	player.x += vector.x;
	player.y += vector.y;
	if (player.x < 0) {
	player.x = TILE_COUNT_X - 1;
	}
	if (player.x > TILE_COUNT_X - 1) {
	player.x = 0;
	}
	if (player.y < 0) {
	player.y = TILE_COUNT_Y - 1;
	}
	if (player.y > TILE_COUNT_Y - 1) {
	player.y = 0;
	}
	context.fillStyle = "black";
	context.fillRect(0, 0, canv.width, canv.height);

	for (var i = 1; i < trail.length; i++) {
	if (trail[i].x == player.x && trail[i].y == player.y) {
	tail = trail.length - i > 5 ? trail.length - i : 5;
	score = tail - 5;
	document.getElementById("score").innerHTML = score;
	}
	}

	trail.push({ x: player.x, y: player.y });
	while (trail.length > tail) {
	trail.shift();
	}

	context.fillStyle = "lime";
	for (var i = 0; i < trail.length; i++) {
	context.fillRect(
	trail[i].x * GRID_SIZE,
	trail[i].y * GRID_SIZE,
	GRID_SIZE - 2,
	GRID_SIZE - 2
	);
	}

	if (apple.x == player.x && apple.y == player.y) {
	tail++;
	score++;
	document.getElementById("score").innerHTML = score;
	/*clearInterval(interval);
	setInterval(game, 1000 / speed);*/
	needAppleReposition = true;
	while (needAppleReposition) {
	apple.x = Math.floor(Math.random() * TILE_COUNT_X);
	apple.y = Math.floor(Math.random() * TILE_COUNT_Y);
	needAppleReposition = false;
	trail.forEach(element => {
	if (element.x == apple.x && element.y == apple.y)
	needAppleReposition = true;
	});
	}
	}

	context.fillStyle = "red";
	context.fillRect(
	apple.x * GRID_SIZE,
	apple.y * GRID_SIZE,
	GRID_SIZE - 2,
	GRID_SIZE - 2
	);
	}

	function keyPush(event) {
	switch (event.keyCode) {
	case LEFT_KEY:
	case A_KEY:
	if (lastKeyEvent == RIGHT_KEY \|\| lastKeyEvent == D_KEY) return;
	vector.x = -1;
	vector.y = 0;
	break;
	case UP_KEY:
	case W_KEY:
	if (lastKeyEvent == DOWN_KEY \|\| lastKeyEvent == S_KEY) return;
	vector.x = 0;
	vector.y = -1;
	break;
	case RIGHT_KEY:
	case D_KEY:
	if (lastKeyEvent == LEFT_KEY \|\| lastKeyEvent == A_KEY) return;
	vector.x = 1;
	vector.y = 0;
	break;
	case DOWN_KEY:
	case S_KEY:
	if (lastKeyEvent == UP_KEY \|\| lastKeyEvent == W_KEY) return;
	vector.x = 0;
	vector.y = 1;
	break;
	}
	lastKeyEvent = event.keyCode;
	}
	</script>
	</body>