snake works

src/App.vue

@@ -2,9 +2,10 @@
 import { Ref, ref } from 'vue';
 
 
-const grid = ref(genGrid(10, 10))
-const currentCoin = ref(spawnCoin(10, 10))
-const direction: Ref<'left' | 'right' | 'top' | 'bottom'> = ref('right')
+const grid = ref(genGrid(30, 30))
+const currentCoin = ref(spawnCoin())
+const direction: Ref<'left' | 'right' | 'top' | 'bottom' | undefined> = ref('right')
+const snake = ref(spawnSnake())
 
 interface Cell {
     x: number
@@ -12,57 +13,145 @@ interface Cell {
     color: 'white' | 'yellow' | 'green'
 }
 
+interface Snake {
+    cell: Cell
+    history: Cell[]
+    length: number
+}
+
 function genGrid(length: number, height: number) {
     const grid: Cell[][] = []
-    for (let i = 0; i < height; i++) {
-        const currentRow: Cell[]  = []
-        for (let j = 0; j < length; j++) {
-            currentRow.push({
-                x: j,
-                y: i,
+    for (let i = 0; i < length; i++) {
+        const currentRow: Cell[] = []
+        for (let j = 0; j < height; j++) {
+            currentRow[j] = {
+                x: i,
+                y: j,
                 color: 'white'
-            })
+            }
         }
-        grid.push(currentRow)
+        grid[i] = currentRow
     }
 
+
+    console.log(grid)
+
     return grid
 }
 
 
-function spawnCoin(length: number, height: number) {
-    const cell = randomCell(length, height) 
+function spawnCoin() {
+    const cell = randomCell()
     cell.color = 'yellow'
     return cell
 }
 
+function spawnSnake(): Snake {
+    const row = random(grid.value)
+    const cell = random(row)
 
-function randomCell(length: number, height: number) {
-    const y = Math.floor(Math.random() * (height - 1));
-    const x = Math.floor(Math.random() * (length - 1));
-
-    return grid.value[y][x]
+    cell.color = 'green'
+    return {
+        cell: cell,
+        history: [cell],
+        length: 3
+    }
 }
 
+function random<T>(array: Array<T>) {
+    return array[Math.floor(Math.random() * array.length)]
+
+}
+
+function randomCell() {
+    const randomRow = random(grid.value)
+    const randomCell = random(randomRow)
+
+    return randomCell 
+}
+
+function moveSnake(x: number, y: number) {
+    const current = snake.value.cell
+    const newCell = grid.value[current.x + x][current.y + y]
+
+    newCell.color = 'green'
+    snake.value.cell = newCell
+    snake.value.history.push(newCell)
+
+    
+    if (snake.value.history.length > length) {
+        const currentLength = snake.value.history.length
+        const allowedLength = snake.value.length
+        const toDelete = snake.value.history.slice(0, currentLength - allowedLength)
+        for (const cell of toDelete) {
+            cell.color = 'white'
+        }
+    }
+}
+
+
+setInterval(() => {
+
+    if (direction.value === undefined) {
+        return
+    }
+
+    switch (direction.value) {
+        case 'left':
+            moveSnake(-1, 0)
+            break
+        case 'right':
+            moveSnake(1, 0)
+            break
+        case 'top':
+            moveSnake(0, -1)
+            break
+        case 'bottom':
+            moveSnake(0, 1)
+            break
+    }
+
+
+    if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) {
+        snake.value.length++
+        currentCoin.value = spawnCoin()
+    }
+
+}, 500);
+
+
+function keydown(event: KeyboardEvent) {
+    switch (event.key) {
+        case 'ArrowRight': direction.value = 'right'
+            break
+        case 'ArrowLeft': direction.value = 'left'
+            break
+        case 'ArrowUp': direction.value = 'top'
+            break
+        case 'ArrowDown': direction.value = 'bottom'
+            break
+    }
+}
+
+window.addEventListener('keydown', keydown)
 
 </script>
 
 <template>
-    <div class="grid">
+    <div class="grid" @keyup="keydown($event)">
         <div class="row" v-for="row in grid">
-            <div class="cell" v-for="cell in row" :style="{backgroundColor: cell.color}">
+            <div class="cell" :class="`cell-${cell.y}-${cell.x}`" v-for="cell in row"
+                :style="{ backgroundColor: cell.color }">
             </div>
         </div>
     </div>
 </template>
 
 <style scoped>
-
 .grid {
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: column;
     border: 1px solid white;
 
 }
@@ -70,6 +159,7 @@ function randomCell(length: number, height: number) {
 .row {
     display: flex;
     justify-content: center;
+    flex-direction: column;
     align-items: center;
 }
 
@@ -78,6 +168,4 @@ function randomCell(length: number, height: number) {
     width: 10px;
     overflow: hidden;
 }
-
-
 </style>