davepermen · May 30, 2017 08:51
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>SNAKE</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-family: 'segoe ui';
        font-weight: 100;
        font-size: 10vw;
        line-height: 10vw;
        background: white;
        color: black;
        height: 100%;
        width: 100%;
      }
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100%;
      }
      section {
        font-size: 0.5rem;
        line-height: 0.5rem;
      }
      canvas {
        padding: 0.5rem 0;
        width: 100%;
      }
      main {
        width: 90%;
      }
    </style>
  </head>
  <body>
    <main>
      SNAKE
      <section>
        Score: <span id='score'>0</span>
        <br>
        Highscore: <span id='highscore'>0</span>
      </section>
      <canvas width='256' height='256'></canvas>
    </main>
    <script>
      var highscore = 0;
      var score = 0;
      var canvas;
      var context;
      var gridSize = 16;
      var tiles = 16;
      var defaultLength = 5;
      var player = {
        x: Math.floor(tiles / 2),
        y: Math.floor(tiles / 2),
        dx: 1,
        dy: 0,
        tail: [],
        length: defaultLength
      };
      var apple = { x: 0, y: 0 };
      var newApple = () => {
        apple.x = Math.floor(Math.random() * tiles);
        apple.y = Math.floor(Math.random() * tiles);
      };
      var onkey = event => {
        player.dx = 0;
        player.dy = 0;
        switch(event.keyCode) {
          case 37:
            player.dx = -1;
            break;
          case 38:
            player.dy = -1;
            break;
          case 39:
            player.dx = 1;
            break;
          case 40:
            player.dy = 1;
            break;
        }
      };
      var update = () => {
        player.x += player.dx;
        player.y += player.dy;
        player.x = (player.x + tiles) % tiles;
        player.y = (player.y + tiles) % tiles;
        if(player.x === apple.x && player.y === apple.y) {
          score++;
          if(highscore < score) {
            highscore = score;
          }
          document.getElementById('score').innerText = score;
          document.getElementById('highscore').innerText = highscore;
          newApple();
          player.length++;
        }
        player.tail.forEach(tailbit => {
          if(player.x === tailbit.x && player.y === tailbit.y) {
            score = 0;
            document.getElementById('score').innerText = 0;
            player.length = defaultLength;
          }
        });
        player.tail.push({x: player.x, y: player.y});
        while(player.tail.length > player.length) {
          player.tail.shift();
        }
      };
      var draw = () => {
        context.fillStyle = 'black';
        context.fillRect(0, 0, canvas.width, canvas.height);
        player.tail.forEach((tailbit, index) => {
          var scale = 0.75 + 0.25 * index / player.tail.length;
          context.fillStyle = 'darkgreen';
          context.fillRect(
            tailbit.x * gridSize + (gridSize - ((gridSize - 2) * scale)) / 2,
            tailbit.y * gridSize + (gridSize - ((gridSize - 2) * scale)) / 2,
            (gridSize - 2) * scale,
            (gridSize - 2) * scale
          );
        });
        context.fillStyle = 'green';
        context.fillRect(
          player.x * gridSize + 1,
          player.y * gridSize + 1,
          gridSize - 2,
          gridSize - 2
        );
        context.fillStyle = 'red';
        context.fillRect(
          apple.x * gridSize + 1,
          apple.y * gridSize + 1,
          gridSize - 2,
          gridSize - 2
        );
      };
      window.onload = () => {
        canvas = document.querySelector('canvas');
        context = canvas.getContext('2d');
        document.addEventListener('keydown', onkey);
        newApple();
        setInterval(() => {
          update();
          draw();
        }, 1000/15);
      };
    </script>
  

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>SNAKE</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	html {
	font-family: 'segoe ui';
	font-weight: 100;
	font-size: 10vw;
	line-height: 10vw;
	background: white;
	color: black;
	height: 100%;
	width: 100%;
	}
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	}
	section {
	font-size: 0.5rem;
	line-height: 0.5rem;
	}
	canvas {
	padding: 0.5rem 0;
	width: 100%;
	}
	main {
	width: 90%;
	}
	</style>
	</head>
	<body>
	<main>
	SNAKE
	<section>
	Score: <span id='score'>0</span>
	<br>
	Highscore: <span id='highscore'>0</span>
	</section>
	<canvas width='256' height='256'></canvas>
	</main>
	<script>
	var highscore = 0;
	var score = 0;
	var canvas;
	var context;
	var gridSize = 16;
	var tiles = 16;
	var defaultLength = 5;
	var player = {
	x: Math.floor(tiles / 2),
	y: Math.floor(tiles / 2),
	dx: 1,
	dy: 0,
	tail: [],
	length: defaultLength
	};
	var apple = { x: 0, y: 0 };
	var newApple = () => {
	apple.x = Math.floor(Math.random() * tiles);
	apple.y = Math.floor(Math.random() * tiles);
	};
	var onkey = event => {
	player.dx = 0;
	player.dy = 0;
	switch(event.keyCode) {
	case 37:
	player.dx = -1;
	break;
	case 38:
	player.dy = -1;
	break;
	case 39:
	player.dx = 1;
	break;
	case 40:
	player.dy = 1;
	break;
	}
	};
	var update = () => {
	player.x += player.dx;
	player.y += player.dy;
	player.x = (player.x + tiles) % tiles;
	player.y = (player.y + tiles) % tiles;
	if(player.x === apple.x && player.y === apple.y) {
	score++;
	if(highscore < score) {
	highscore = score;
	}
	document.getElementById('score').innerText = score;
	document.getElementById('highscore').innerText = highscore;
	newApple();
	player.length++;
	}
	player.tail.forEach(tailbit => {
	if(player.x === tailbit.x && player.y === tailbit.y) {
	score = 0;
	document.getElementById('score').innerText = 0;
	player.length = defaultLength;
	}
	});
	player.tail.push({x: player.x, y: player.y});
	while(player.tail.length > player.length) {
	player.tail.shift();
	}
	};
	var draw = () => {
	context.fillStyle = 'black';
	context.fillRect(0, 0, canvas.width, canvas.height);
	player.tail.forEach((tailbit, index) => {
	var scale = 0.75 + 0.25 * index / player.tail.length;
	context.fillStyle = 'darkgreen';
	context.fillRect(
	tailbit.x * gridSize + (gridSize - ((gridSize - 2) * scale)) / 2,
	tailbit.y * gridSize + (gridSize - ((gridSize - 2) * scale)) / 2,
	(gridSize - 2) * scale,
	(gridSize - 2) * scale
	);
	});
	context.fillStyle = 'green';
	context.fillRect(
	player.x * gridSize + 1,
	player.y * gridSize + 1,
	gridSize - 2,
	gridSize - 2
	);
	context.fillStyle = 'red';
	context.fillRect(
	apple.x * gridSize + 1,
	apple.y * gridSize + 1,
	gridSize - 2,
	gridSize - 2
	);
	};
	window.onload = () => {
	canvas = document.querySelector('canvas');
	context = canvas.getContext('2d');
	document.addEventListener('keydown', onkey);
	newApple();
	setInterval(() => {
	update();
	draw();
	}, 1000/15);
	};
	</script>


	</body>
	</html>