Add files via upload

Reandyx · web-flow · commit f8b620856d77 · 2022-02-03T23:20:20.000+01:00
diff --git a/food.js b/food.js
@@ -0,0 +1,28 @@
+import { onSnake, expandSnake } from './snake.js'
+import { randomGridPosition } from './grid.js'
+
+let food = getRandomFoodPosition()
+const EXPANSION_RATE = 5
+
+export function update() {
+  if (onSnake(food)) {
+    expandSnake(EXPANSION_RATE)
+    food = getRandomFoodPosition()
+  }
+}
+
+export function draw(gameBoard) {
+  const foodElement = document.createElement('div')
+  foodElement.style.gridRowStart = food.y
+  foodElement.style.gridColumnStart = food.x
+  foodElement.classList.add('food')
+  gameBoard.appendChild(foodElement)
+}
+
+function getRandomFoodPosition() {
+  let newFoodPosition
+  while (newFoodPosition == null || onSnake(newFoodPosition)) {
+    newFoodPosition = randomGridPosition()
+  }
+  return newFoodPosition
+}
diff --git a/game.js b/game.js
@@ -0,0 +1,45 @@
+import { update as updateSnake, draw as drawSnake, SNAKE_SPEED, getSnakeHead, snakeIntersection } from './snake.js'
+import { update as updateFood, draw as drawFood } from './food.js'
+import { outsideGrid } from './grid.js'
+
+let lastRenderTime = 0
+let gameOver = false
+const gameBoard = document.getElementById('game-board')
+
+function main(currentTime) {
+  if (gameOver) {
+    if (confirm('You lost. Press ok to restart.')) {
+      window.location = '/'
+    }
+    return
+  }
+
+
+  window.requestAnimationFrame(main)
+  const secondsSinceLastRender = (currentTime - lastRenderTime) / 1000
+  if (secondsSinceLastRender < 1 / SNAKE_SPEED) return
+
+
+  lastRenderTime = currentTime
+
+  update()
+  draw()
+}
+
+window.requestAnimationFrame(main)
+
+function update() {
+  updateSnake()
+  updateFood()
+  checkDeath()
+}
+
+function draw() {
+  gameBoard.innerHTML = ''
+  drawSnake(gameBoard)
+  drawFood(gameBoard)
+}
+
+function checkDeath() {
+  gameOver = outsideGrid(getSnakeHead()) || snakeIntersection()
+}
diff --git a/grid.js b/grid.js
@@ -0,0 +1,15 @@
+const GRID_SIZE = 21
+
+export function randomGridPosition() {
+  return {
+    x: Math.floor(Math.random() * GRID_SIZE) + 1,
+    y: Math.floor(Math.random() * GRID_SIZE) + 1
+  }
+}
+
+export function outsideGrid(position) {
+  return (
+    position.x < 1 || position.x > GRID_SIZE ||
+    position.y < 1 || position.y > GRID_SIZE
+  )
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Snake</title>
+  <style>
+    body {
+      height: 100vh;
+      width: 100vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0;
+      background-color: black;
+    }
+
+    #game-board {
+      background-color: #CCC;
+      width: 100vmin;
+      height: 100vmin;
+      display: grid;
+      grid-template-rows: repeat(21, 1fr);
+      grid-template-columns: repeat(21, 1fr);
+    }
+
+    .snake {
+      background-color: hsl(200, 100%, 50%);
+      border: .25vmin solid black;
+    }
+
+    .food {
+      background-color: hsl(50, 100%, 50%);
+      border: .25vmin solid black;
+    }
+  </style>
+  <script src="game.js" defer type="module"></script>
+</head>
+<body>
+  <div id="game-board"></div>
+</body>
+</html>
diff --git a/input.js b/input.js
@@ -0,0 +1,28 @@
+let inputDirection = { x: 0, y: 0 }
+let lastInputDirection = { x: 0, y: 0 }
+
+window.addEventListener('keydown', e => {
+  switch (e.key) {
+    case 'ArrowUp':
+      if (lastInputDirection.y !== 0) break
+      inputDirection = { x: 0, y: -1 }
+      break
+    case 'ArrowDown':
+      if (lastInputDirection.y !== 0) break
+      inputDirection = { x: 0, y: 1 }
+      break
+    case 'ArrowLeft':
+      if (lastInputDirection.x !== 0) break
+      inputDirection = { x: -1, y: 0 }
+      break
+    case 'ArrowRight':
+      if (lastInputDirection.x !== 0) break
+      inputDirection = { x: 1, y: 0 }
+      break
+  }
+})
+
+export function getInputDirection() {
+  lastInputDirection = inputDirection
+  return inputDirection
+}
diff --git a/snake.js b/snake.js
@@ -0,0 +1,58 @@
+import { getInputDirection } from "./input.js"
+
+export const SNAKE_SPEED = 5
+const snakeBody = [{ x: 11, y: 11 }]
+let newSegments = 0
+
+export function update() {
+  addSegments()
+
+  const inputDirection = getInputDirection()
+  for (let i = snakeBody.length - 2; i >= 0; i--) {
+    snakeBody[i + 1] = { ...snakeBody[i] }
+  }
+
+  snakeBody[0].x += inputDirection.x
+  snakeBody[0].y += inputDirection.y
+}
+
+export function draw(gameBoard) {
+  snakeBody.forEach(segment => {
+    const snakeElement = document.createElement('div')
+    snakeElement.style.gridRowStart = segment.y
+    snakeElement.style.gridColumnStart = segment.x
+    snakeElement.classList.add('snake')
+    gameBoard.appendChild(snakeElement)
+  })
+}
+
+export function expandSnake(amount) {
+  newSegments += amount
+}
+
+export function onSnake(position, { ignoreHead = false } = {}) {
+  return snakeBody.some((segment, index) => {
+    if (ignoreHead && index === 0) return false
+    return equalPositions(segment, position)
+  })
+}
+
+export function getSnakeHead() {
+  return snakeBody[0]
+}
+
+export function snakeIntersection() {
+  return onSnake(snakeBody[0], { ignoreHead: true })
+}
+
+function equalPositions(pos1, pos2) {
+  return pos1.x === pos2.x && pos1.y === pos2.y
+}
+
+function addSegments() {
+  for (let i = 0; i < newSegments; i++) {
+    snakeBody.push({ ...snakeBody[snakeBody.length - 1] })
+  }
+
+  newSegments = 0
+}
