first commit

latchjack · Jan 6, 2020 · 6ee6723 · 6ee6723
1 parent 24b238f
commit 6ee6723
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 1 deletion.
diff --git a/starter-code/index.html b/starter-code/index.html
@@ -3,8 +3,13 @@
   <head>
     <meta charset="utf-8">
     <title>WDI Project 1</title>
+    <link rel="stylesheet" href="styles/main.css">
+    <script type="text/javascript" src="scripts/app.js"></script>
   </head>
   <body>
-    <h1>Hello World!!!!</h1>
+
+    <div class="grid">
+    </div>
+    <button>Play!</button>
   </body>
 </html>
diff --git a/starter-code/scripts/app.js b/starter-code/scripts/app.js
@@ -0,0 +1,152 @@
+function init() {
+  //  dom variables
+  const grid = document.querySelector('.grid')
+  const squares = []
+  let direction = null
+  let speed = 400
+
+  // game variables
+  const width = 15
+  // eslint-disable-next-line prefer-const
+  let playerLocation = [3, 2, 1]
+  // const foodLocation = Math.floor(Math.random() * squares.length)
+
+  Array(width * width).join('.').split('.').forEach(() => {
+    // create 
+    const square = document.createElement('div')
+    square.classList.add('grid-item')
+    squares.push(square)
+    grid.appendChild(square)
+  })
+
+  function addPlayer() {
+    playerLocation.map(index => squares[index].classList.add('player'))
+  }
+  addPlayer()
+
+  function removePlayer() {
+    playerLocation.map(index => squares[index].classList.remove('player'))
+  }
+
+  console.log(playerLocation[0])
+  console.log(squares)
+
+  function newFood() {
+    const foodLocation = Math.floor(Math.random() * squares.length)
+    squares[foodLocation].classList.add('food')
+  }
+  newFood()
+  // console.log(squares)
+  // console.log(squares[playerLocation])
+
+  function snakeEats() {
+    if (squares[playerLocation[0]].classList.contains('food')) {
+      squares[playerLocation[0]].classList.remove('food')
+      // grow
+      //new food
+      speed -= 10
+    }
+  }
+  snakeEats()
+
+  // function autoMove() {
+  //   playerLocation++
+  //   // if (playerLocation % 15 === 1) { 
+  //   //   playerLocation = playerLocation - 14 
+  //   // }
+  // }
+
+  function movePlayer() {
+    // console.log(squares[playerLocation[0]])
+    if (direction === 'right') {
+      removePlayer()
+      playerLocation.pop()
+      if (playerLocation[0] % width === 14) {
+        playerLocation[0] -= 14
+      }
+      playerLocation.unshift(playerLocation[0] + 1)
+      addPlayer()
+      // console.log(playerLocation)
+
+    }
+    if (direction === 'left') {
+      removePlayer()
+      playerLocation.pop()
+      if (playerLocation[0] % width === 0) {
+        playerLocation[0] += 14
+      }
+      playerLocation.unshift(playerLocation[0] - 1)
+      addPlayer()
+      // console.log(playerLocation)
+    }
+    if (direction === 'down') {
+      removePlayer()
+      playerLocation.pop()
+      if (playerLocation[0] >= 210) {
+        playerLocation[0] -= 210
+      }
+      playerLocation.unshift(playerLocation[0] + 15)
+      addPlayer()
+      // console.log(playerLocation)
+    }
+    if (direction === 'up') {
+      removePlayer()
+      playerLocation.pop()
+      if (playerLocation[0] <= 14) {
+        playerLocation[0] += 210
+      }
+      playerLocation.unshift(playerLocation[0] - 15)
+      addPlayer()
+      // console.log(playerLocation)
+    }
+    snakeEats()
+  }
+
+  const timerId = setInterval(movePlayer, speed)
+
+  function handleKeyDown(e) {
+    switch (e.keyCode) {
+      case 39: if (direction !== 'left') direction = 'right'
+        movePlayer()
+        console.log(direction)
+        // if (playerLocation % width < width - 1) {
+        //   console.log(squares[playerLocation])
+        //   playerLocation++
+        // }
+        break
+      case 37: if (direction !== 'right') direction = 'left'
+        movePlayer()
+        console.log(direction)
+        // if (playerLocation % width > 0) {
+        //   playerLocation--
+        // }
+        break
+      case 40: if (direction !== 'up') direction = 'down'
+        movePlayer()
+        console.log(direction)
+        // if (playerLocation + width < width * width) {
+        //   playerLocation += width 
+        // }
+        break
+      case 38: if (direction !== 'down') direction = 'up'
+        movePlayer()
+        console.log(direction)
+        // if (playerLocation - width >= 0) {
+        //   playerLocation -= width
+        // }
+        break
+      default:
+        console.log('player shouldnt move')
+    }
+
+    // console.log('current player index is' , playerLocation)
+  }
+
+  // if (squares[playerLocation[0]].classList.contains('food')) {
+  //   // console.log('food')
+  //   squares[playerLocation[0]].classList.remove('food')
+  // }
+
+  window.addEventListener('keydown', handleKeyDown)
+}
+window.addEventListener('DOMContentLoaded', init)
diff --git a/starter-code/styles/main.css b/starter-code/styles/main.css
@@ -0,0 +1,38 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div.grid {
+  width: 600px;
+  height: 600px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+div.grid-item {
+  width: 40px;
+  height: 40px;
+  border: 1px dashed black;
+}
+
+div.grid-item.player {
+  background-color: orangered;
+  background-size: contain;
+}
+
+div.grid-item.food {
+  background-color: rgb(31, 240, 3);
+  background-size: contain;
+}