本文主要是介绍vue3，贪吃蛇，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<template><div flex items-center justify-center h-100vh w-full relative><div class=""><div class="header"><div>得分: {{ score }}</div><div class="flex"><div w-100>速度: {{ speed }}</div><el-sliderv-model="speed":min="2":max="9":step="0.1"@change="changeSpeed"/></div></div><div class="flex" v-for="(i, idx) in array" :key="idx"><divclass="block flex items-center justify-center"v-for="(j, idx2) in i":key="idx"><divv-if="j"class="w-13 h-13":class="{ food: j == 2, snake: j == 1 }":style="{backgroundColor:j == 2? foodColor: idx === head[0] && idx2 === head[1]? snakeHeadColor: snakeColor,border: j == 2 ? '' : '1px solid #bdbdbd',borderRadius:j == 2? '12px': idx === head[0] && idx2 === head[1]? headRadius(): '4px',}"></div></div></div></div><divclass="absolute left-0 bottom-0 right-0 top-0 flex items-center justify-center pause-bg"v-if="isPause"><div text-center><div text-36 mb-20 class="text-#fff">游戏暂停</div><div text-14 class="text-#eee">按空格键开始/暂停</div></div></div><divclass="absolute left-0 bottom-0 right-0 top-0 flex items-center justify-center"v-if="isOver"><el-button type="success" size="large" @click="refresh">重新开始</el-button></div></div>
</template><script setup lang="ts">
import {ref,reactive,onMounted,toRefs,watch,computed,onUnmounted,
} from "vue";/*** @param { value } 0-空格子 1-蛇蛇 2-食物* @param { ROW } 行数* @param { COL } 列数* @param { direction } 蛇蛇移动方向 0-上 1-右 2-下 3-左*/
let ROW = 22;
let COL = 18;
let direction = 1;
let directionTemp = direction;
let food = ref([0, 0]);
let isEat = false;
let timer: any = null;
const isOver = ref(false);
const isPause = ref(false);
let score = 0;
const speed = ref(3.5);
const array = ref<any>([]);
const snake = ref<any>([]);// #67C23A #409EFF #E6A23C #F56C6C #909399 #ffa4e4
const snakeColor = ref("#67C23A");
const snakeHeadColor = ref("#3C9212");
const foodColor = ref("#F56C6C");
console.log("array", array);watch(() => snake.value,(v) => {// console.log("v", v);v.forEach((item) => {array.value[item[0]][item[1]] = 1;});},{ deep: true }
);
watch(() => food.value,(v) => {// console.log('v', v);array.value[v[0]][v[1]] = 2;}
);const init = () => {timer = setInterval(() => {if (isOver.value) {clearInterval(timer);return;}if (isPause.value) {return;}let next = [head.value[0], head.value[1]];direction = directionTemp;switch (direction) {case 0:next[0] -= 1;break;case 1:next[1] += 1;break;case 2:next[0] += 1;break;case 3:next[1] -= 1;break;}if (next[0] < 0 || next[0] >= ROW || next[1] < 0 || next[1] >= COL) {// 撞墙isOver.value = true;alert("game over");return;}if (array.value[next[0]][next[1]] == 1) {// 撞身体isOver.value = true;alert("game over");return;}if (array.value[next[0]][next[1]] == 2) {isEat = true;score++;if (score == 5) {speed.value += 0.4;} else if (score == 10) {speed.value += 0.4;} else if (score == 15) {speed.value += 0.4;} else if (score == 20) {speed.value += 0.5;} else if (score == 25) {speed.value += 0.5;} else if (score == 30) {speed.value += 0.5;} else if (score == 35) {speed.value += 0.6;} else if (score == 40) {speed.value += 0.6;}// 最多保留一位小数speed.value = Math.round(speed.value * 10) / 10;}/*** 移动 && 检测是否进食*/snake.value.unshift(next);if (!isEat) {array.value[snake.value[snake.value.length - 1][0]][snake.value[snake.value.length - 1][1]] = 0;snake.value.pop();} else {isEat = false;newFoodPosition();}array.value[next[0]][next[1]] = 1;}, 1000 / speed.value);
};
const newFoodPosition = () => {// 生成新的食物点，并且不能在蛇的身体let x = Math.floor(Math.random() * ROW);let y = Math.floor(Math.random() * COL);while (snake.value.some((item) => item[0] == x && item[1] == y)) {x = Math.floor(Math.random() * ROW);y = Math.floor(Math.random() * COL);}food.value = [x, y];
};
const head = computed(() => {return snake.value[0];
});const keydown = (e: { keyCode: number; preventDefault: any }) => {e.preventDefault();if (e.keyCode == 37) {//左if (direction == 1) return;directionTemp = 3;} else if (e.keyCode == 38) {//上if (direction == 2) return;directionTemp = 0;} else if (e.keyCode == 39) {//右if (direction == 3) return;directionTemp = 1;} else if (e.keyCode == 40) {//下if (direction == 0) return;directionTemp = 2;} else if (e.keyCode == 32) {// 空格键暂停isPause.value = !isPause.value;}
};const changeSpeed = (v) => {};
const headRadius = () => {switch (direction) {case 0:return "12px 12px 0px 0px";case 1:return "0px 12px 12px 0px";case 2:return "0px 0px 12px 12px";case 3:return "12px 0px 0px 12px";}
};
watch(() => speed.value,(v) => {clearInterval(timer);init();}
);
const start = () => {clearInterval(timer);array.value = Array.from({ length: ROW }, () =>Array.from({ length: COL }, () => 0));snake.value = [[2, 7],[2, 6],[2, 5],[2, 4],[2, 3],];newFoodPosition();init();
};
const refresh = () =>{window.location.reload();
}
onMounted(() => {// console.log("game start");start();document.addEventListener("keydown", keydown);
});
onUnmounted(() => {clearInterval(timer);document.removeEventListener("keydown", keydown);
});
</script><style lang="scss" scoped>
$width: 14px;
.block {width: $width;height: $width;background-color: #e4e4e4;margin: 1px;
}
.food {clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);animation: food alternate 1.5s ease-in-out infinite;
}
@keyframes food {0% {transform: scale(1);}25% {transform: scale(0.92);filter: brightness(0.9);}50% {transform: scale(1.1);}75% {transform: scale(1.24);filter: brightness(1.15);}100% {transform: scale(1.16);}
}
.snake {background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.16) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.16) 50%,rgba(255, 255, 255, 0.16) 75%,transparent 75%,transparent);
}.game {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%;background-color: #f0f0f0;.score {font-size: 30px;margin-bottom: 20px;}.speed {font-size: 30px;margin-bottom: 20px;}
}
.pause-bg {background-color: rgba(0, 0, 0, 0.5);z-index: 2;
}
</style>这篇关于vue3，贪吃蛇的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
