tripl3dogdare/snek.html

## snek.html
<!--
  I highly recommend viewing this on rawgit.com, so you can play the game instead of just seeing the code =)
  http://rawgit.com/tripl3dogdare/bcdc855b45bfa8e8c0277da493adc865/raw/snek.html
-->

<head>
  <title>Snek</title>
  <link href="https://emojipedia-us.s3.amazonaws.com/thumbs/160/lg/35/snake_1f40d.png" rel="shortcut icon">
</head>
<body>
  <h1>Snek</h1>
  <canvas id="gc"></canvas>
  <p>Use the arrow keys to move.</p>
  <p>Eat the apple to gain points and get longer.</p>
  <p>Don't eat your own tail!</p>
  <a href="https://gist.github.com/tripl3dogdare/bcdc855b45bfa8e8c0277da493adc865">See the source code</a>
</body>

<style>
  body { font-family: Calibri; width: min-content; margin: 0 auto; }
  h1 { margin: 7px 0; }
  canvas { margin-bottom: 10px; }
  p { margin: 2px 0; }
</style>

<script>
  // Board and drawing constants
  var w = h = 250
  var size = 5
  var scale = 2.5

  // Positions
  var x = y = w / 2
  var ax = ay = -10

  // Tail
  var len = 5
  var tail = []

  // Movement and directions
  directions = {
    37: { x: -1, y: 0 },
    38: { x: 0, y: -1 },
    39: { x: 1, y: 0 },
    40: { x: 0, y: 1 }
  }
  v = nv = directions[37]

  // Score
  score = 0
  if(!localStorage.bestScore) localStorage.bestScore = 0

  // Set up canvas and key events, start game loop
  window.onload = () => {
    canvas = document.getElementById("gc")
    canvas.width = w*scale
    canvas.height = h*scale
    ctx = canvas.getContext("2d")

    setInterval(update, 1000 / 27)

    document.addEventListener("keydown", key => nv = directions[key.keyCode] || v )
  }

  // Main game loop
  function update() {
    // Update tail
    if(tail.some(t => t.x == x && t.y == y)) return reset()
    tail.push({ x:x, y:y })
    if(tail.length > len) tail.shift()

    // Update apple
    if(ax < 0) {
      ax = Math.floor(Math.random() * (w/size))*size
      ay = Math.floor(Math.random() * (h/size))*size
    } else if(x == ax && y == ay) {
      score += 10
      len += 1
      ax = -10
    }

    // Move snek
    if(v.x != -nv.x && v.y != -nv.y) v = nv
    x = (x + v.x * size + w)%w
    y = (y + v.y * size + h)%h

    draw()
  }

  // Render loop
  function draw() {
    // Draw board and entities
    ctx.scale(scale, scale)

    ctx.fillStyle = "black"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    ctx.fillStyle = "red"
    ctx.fillRect(ax, ay, size, size)

    ctx.fillStyle = "lime"
    ctx.fillRect(x, y, size, size)
    tail.forEach((t,i) => {
      ctx.fillStyle = (len-i)%2 ? "green" : "lime"
      ctx.fillRect(t.x, t.y, size, size)
    })

    // Draw score and coordinates
    ctx.scale(1/scale, 1/scale)

    ctx.fillStyle = "white"
    ctx.font = "12px sans-serif"
    ctx.textBaseline = "top"

    ctx.fillText("Score: "+score, 10, 10)
    ctx.fillText("Best: "+localStorage.bestScore, 10, 30)

    ctx.fillText("S: "+x+", "+y, 10, canvas.height-40)
    ctx.fillText("A: "+ax+", "+ay, 10, canvas.height-20)
  }

  // Resets the game and saves your local high score
  function reset() {
    x = y = w / 2
    tail = []
    len = 5
    localStorage.bestScore = Math.max(score, localStorage.bestScore)
    score = 0
    spawnApple()
  }
</script>
	<!--
	I highly recommend viewing this on rawgit.com, so you can play the game instead of just seeing the code =)
	http://rawgit.com/tripl3dogdare/bcdc855b45bfa8e8c0277da493adc865/raw/snek.html
	-->

	<head>
	<title>Snek</title>
	<link href="https://emojipedia-us.s3.amazonaws.com/thumbs/160/lg/35/snake_1f40d.png" rel="shortcut icon">
	</head>
	<body>
	<h1>Snek</h1>
	<canvas id="gc"></canvas>
	<p>Use the arrow keys to move.</p>
	<p>Eat the apple to gain points and get longer.</p>
	<p>Don't eat your own tail!</p>
	<a href="https://gist.github.com/tripl3dogdare/bcdc855b45bfa8e8c0277da493adc865">See the source code</a>
	</body>

	<style>
	body { font-family: Calibri; width: min-content; margin: 0 auto; }
	h1 { margin: 7px 0; }
	canvas { margin-bottom: 10px; }
	p { margin: 2px 0; }
	</style>

	<script>
	// Board and drawing constants
	var w = h = 250
	var size = 5
	var scale = 2.5

	// Positions
	var x = y = w / 2
	var ax = ay = -10

	// Tail
	var len = 5
	var tail = []

	// Movement and directions
	directions = {
	37: { x: -1, y: 0 },
	38: { x: 0, y: -1 },
	39: { x: 1, y: 0 },
	40: { x: 0, y: 1 }
	}
	v = nv = directions[37]

	// Score
	score = 0
	if(!localStorage.bestScore) localStorage.bestScore = 0

	// Set up canvas and key events, start game loop
	window.onload = () => {
	canvas = document.getElementById("gc")
	canvas.width = w*scale
	canvas.height = h*scale
	ctx = canvas.getContext("2d")

	setInterval(update, 1000 / 27)

	document.addEventListener("keydown", key => nv = directions[key.keyCode] \|\| v )
	}

	// Main game loop
	function update() {
	// Update tail
	if(tail.some(t => t.x == x && t.y == y)) return reset()
	tail.push({ x:x, y:y })
	if(tail.length > len) tail.shift()

	// Update apple
	if(ax < 0) {
	ax = Math.floor(Math.random() * (w/size))*size
	ay = Math.floor(Math.random() * (h/size))*size
	} else if(x == ax && y == ay) {
	score += 10
	len += 1
	ax = -10
	}

	// Move snek
	if(v.x != -nv.x && v.y != -nv.y) v = nv
	x = (x + v.x * size + w)%w
	y = (y + v.y * size + h)%h

	draw()
	}

	// Render loop
	function draw() {
	// Draw board and entities
	ctx.scale(scale, scale)

	ctx.fillStyle = "black"
	ctx.fillRect(0, 0, canvas.width, canvas.height)

	ctx.fillStyle = "red"
	ctx.fillRect(ax, ay, size, size)

	ctx.fillStyle = "lime"
	ctx.fillRect(x, y, size, size)
	tail.forEach((t,i) => {
	ctx.fillStyle = (len-i)%2 ? "green" : "lime"
	ctx.fillRect(t.x, t.y, size, size)
	})

	// Draw score and coordinates
	ctx.scale(1/scale, 1/scale)

	ctx.fillStyle = "white"
	ctx.font = "12px sans-serif"
	ctx.textBaseline = "top"

	ctx.fillText("Score: "+score, 10, 10)
	ctx.fillText("Best: "+localStorage.bestScore, 10, 30)

	ctx.fillText("S: "+x+", "+y, 10, canvas.height-40)
	ctx.fillText("A: "+ax+", "+ay, 10, canvas.height-20)
	}

	// Resets the game and saves your local high score
	function reset() {
	x = y = w / 2
	tail = []
	len = 5
	localStorage.bestScore = Math.max(score, localStorage.bestScore)
	score = 0
	spawnApple()
	}
	</script>