fixed holes in snake
This commit is contained in:
199
src/App.vue
199
src/App.vue
@@ -8,70 +8,70 @@ const snake = ref(spawnSnake())
|
||||
const score = ref(0)
|
||||
|
||||
interface Cell {
|
||||
x: number
|
||||
y: number
|
||||
color: 'white' | 'yellow' | 'green'
|
||||
x: number
|
||||
y: number
|
||||
color: 'white' | 'yellow' | 'green'
|
||||
}
|
||||
|
||||
interface Snake {
|
||||
cell: Cell
|
||||
history: Cell[]
|
||||
length: number
|
||||
cell: Cell
|
||||
history: Cell[]
|
||||
length: number
|
||||
}
|
||||
|
||||
function genGrid(length: number, height: number) {
|
||||
const grid: Cell[][] = []
|
||||
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[i] = currentRow
|
||||
}
|
||||
const grid: Cell[][] = []
|
||||
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[i] = currentRow
|
||||
}
|
||||
|
||||
|
||||
console.log(grid)
|
||||
console.log(grid)
|
||||
|
||||
return grid
|
||||
return grid
|
||||
}
|
||||
|
||||
|
||||
function spawnCoin() {
|
||||
const cell = randomCell()
|
||||
cell.color = 'yellow'
|
||||
return cell
|
||||
const cell = randomCell()
|
||||
cell.color = 'yellow'
|
||||
return cell
|
||||
}
|
||||
|
||||
function spawnSnake(): Snake {
|
||||
const row = random(grid.value)
|
||||
const cell = random(row)
|
||||
const row = random(grid.value)
|
||||
const cell = random(row)
|
||||
|
||||
cell.color = 'green'
|
||||
return {
|
||||
cell: cell,
|
||||
history: [cell],
|
||||
length: 3
|
||||
}
|
||||
cell.color = 'green'
|
||||
return {
|
||||
cell: cell,
|
||||
history: [cell],
|
||||
length: 3
|
||||
}
|
||||
}
|
||||
|
||||
function random<T>(array: Array<T>) {
|
||||
return array[Math.floor(Math.random() * array.length)]
|
||||
return array[Math.floor(Math.random() * array.length)]
|
||||
|
||||
}
|
||||
|
||||
function randomCell() {
|
||||
const randomRow = random(grid.value)
|
||||
const randomCell = random(randomRow)
|
||||
const randomRow = random(grid.value)
|
||||
const randomCell = random(randomRow)
|
||||
|
||||
return randomCell
|
||||
return randomCell
|
||||
}
|
||||
|
||||
function moveSnake(x: number, y: number) {
|
||||
const current = snake.value.cell
|
||||
const current = snake.value.cell
|
||||
const newCell = getCell(current.x + x, current.y + y);
|
||||
|
||||
if (newCell === undefined || newCell.color === 'green') {
|
||||
@@ -79,18 +79,23 @@ function moveSnake(x: number, y: number) {
|
||||
return;
|
||||
}
|
||||
|
||||
newCell.color = 'green'
|
||||
snake.value.cell = newCell
|
||||
snake.value.history.push(newCell)
|
||||
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'
|
||||
}
|
||||
}
|
||||
if (snake.value.history.length > length) {
|
||||
const currentLength = snake.value.history.length
|
||||
const allowedLength = snake.value.length
|
||||
|
||||
if (currentLength > allowedLength) {
|
||||
const toDelete = snake.value.history.shift()
|
||||
|
||||
if (toDelete !== undefined) {
|
||||
toDelete.color = 'white'
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -126,45 +131,45 @@ function killCoin() {
|
||||
|
||||
setInterval(() => {
|
||||
|
||||
if (direction.value === undefined) {
|
||||
return
|
||||
}
|
||||
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
|
||||
}
|
||||
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()
|
||||
if (currentCoin.value.x === snake.value.cell.x && currentCoin.value.y === snake.value.cell.y) {
|
||||
snake.value.length++
|
||||
currentCoin.value = spawnCoin()
|
||||
score.value++
|
||||
}
|
||||
}
|
||||
}, 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
|
||||
}
|
||||
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)
|
||||
@@ -172,35 +177,35 @@ window.addEventListener('keydown', keydown)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Score {{ score }}</h1>
|
||||
<div class="grid" @keyup="keydown($event)">
|
||||
<div class="row" v-for="row in grid">
|
||||
<div class="cell" :class="`cell-${cell.y}-${cell.x}`" v-for="cell in row"
|
||||
:style="{ backgroundColor: cell.color }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h1>Score {{ score }}</h1>
|
||||
<div class="grid" @keyup="keydown($event)">
|
||||
<div class="row" v-for="row in grid">
|
||||
<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;
|
||||
border: 1px solid white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid white;
|
||||
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cell {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
overflow: hidden;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user