基于Vue uniapp實(shí)現(xiàn)貪吃蛇游戲
更新時(shí)間：2022年04月18日 12:57:13 作者：Sophora
貪吃蛇游戲想必是很多70、80后的回憶，一直到現(xiàn)在也深受大家的喜歡。本文將利用Vue+uniapp實(shí)現(xiàn)這一經(jīng)典的游戲，感興趣的可以了解一下
游戲演示
代碼結(jié)構(gòu)
詳細(xì)代碼結(jié)構(gòu)如果需要請(qǐng)到github查看
<template>
<view ref="body" class="content">
<view>蛇蛇目前：{{snakes.length}}米長(zhǎng)</view>
<view class="game-field">
<!-- 地面板塊 -->
<view class="block" v-for="(x, i) in blocks" :key="i"></view>
</view>
<view v-show="!started || ended" class="game-board-wrap">
<view v-show="!started" class="game-board">
<view class="title">選擇游戲難度</view>
<radio-group name="radio" @change="bindLevelChange">
<label class="label">
<radio value="1" :checked="level==1" /><text>簡(jiǎn)單模式</text>
</label>
<label class="label">
<radio value="2" :checked="level==2" /><text>正常模式</text>
</label>
<label class="label">
<radio value="3" :checked="level==3" /><text>困難模式</text>
</label>
<label class="label">
<radio value="4" :checked="level==4" /><text>地獄模式</text>
</label>
</radio-group>
<button type="primary" @click="start">開始游戲</button>
</view>
<view v-show="ended" class="settle-board">
<view class="title">游戲結(jié)束</view>
<view class="result">您的蛇蛇達(dá)到了{(lán){snakes.length}}米</view>
<view class="btns">
<button type="primary" @click="reStart">再次挑戰(zhàn)</button>
<button type="primary" plain @click="rePick">重選難度</button>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
blocks: [], // 板塊
worms: [], // 蟲子
snakes: [0, 1, 2, 3], // 蛇身
direction: "right", // 蛇移動(dòng)方向
};
},
onLoad() {
this.initGame();
},
methods: {
initGame() {
this.blocks = new Array(100).fill(0); // 生成100個(gè)地面板塊
this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機(jī)生成蟲子
this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置
}
}
}
</script>渲染蛇身
蛇身的渲染根據(jù)snakes來匹配地面板塊的索引 修改對(duì)應(yīng)的背景圖來渲染蛇身
<template>
<view class="game-field">
<view class="block" :style="`background-image: ${bg(x, i)}" v-for="(x, i) in blocks" :key="i">
</view>
</view>
</template>
<script>
import worm from "worm.png";
import snakeBody from "snake_body.png";
import snakeHead from "snake_head.png";
import snakeTail from "snake_tail.png";
import polluteBlock from "pollute.png";
import wormBoom from "worm_4.png";
export default {
methods: {
bg(type, index) {
let bg = "";
switch (type) {
case 0: // 地板
bg = "unset";
break;
case 1: // 蟲子
if (this.boom) {
bg = `url(${wormBoom})`;
} else {
bg = `url(${worm})`;
}
break;
case 2: // 蛇
let head = this.snakes[this.snakes.length - 1];
let tail = this.snakes[0];
if (index === head) {
bg = `url(${snakeHead})`;
} else if (index === tail) {
bg = `url(${snakeTail})`;
} else {
bg = `url(${snakeBody})`;
}
break;
case 3: // 污染的地塊
bg = `url(${polluteBlock})`;
break;
}
return bg；
},
}
}
</scipt>控制蛇的方向
通過監(jiān)聽鍵盤按鍵事件和手勢(shì)來控制蛇的方向
<template>
<view ref="body" class="content" @keyup.left="bindLeft" @keyup.right="bindRight" @keyup.down="bindDown"
@keyup.up="bindUp" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
<view>蛇蛇目前：{{snakes.length}}米長(zhǎng)</view>
<view class="game-field">
<view class="block" :style="`background-image: ${bg(x, i)}; v-for="(x, i) in blocks" :key="i"></view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
direction: "right",
started: false, // 游戲開始了
ended: false, // 游戲結(jié)束了
level: 1, // 游戲難度
lastX: 0,
lastY: 0,
}
},
onLoad() {
this.initGame();
},
methods:{
initGame() {
this.blocks = new Array(100).fill(0); // 生成100個(gè)地面板塊
this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機(jī)生成蟲子
this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置
document.onkeydown = (e) => {
switch (e.keyCode) { // 獲取當(dāng)前按下鍵盤鍵的編碼
case 37: // 按下左箭頭鍵
this.bindLeft();
break;
case 39: // 按下右箭頭鍵
this.bindRight();
break;
case 38: // 按下上箭頭鍵
if (!this.started) {
this.level--;
} else {
this.bindUp();
}
break;
case 40: // 按下下箭頭鍵
if (!this.started) {
this.level++;
} else {
this.bindDown();
}
break;
}
}
},
handleTouchStart(e) {
// 手指開始位置
this.lastX = e.touches[0].pageX;
this.lastY = e.touches[0].pageY;
},
handleTouchMove(e) {
let lastX = e.touches[0].pageX; // 移動(dòng)的x軸坐標(biāo)
let lastY = e.touches[0].pageY; // 移動(dòng)的y軸坐標(biāo)
let touchX = lastX - this.lastX;
let touchY = lastY - this.lastY
if (Math.abs(touchX) > Math.abs(touchY)) {
if (touchX < 0) {
if(this.direction === "right") return;
this.direction = 'left'
} else if (touchX > 0) {
if(this.direction === "left") return;
this.direction = 'right'
}
} else {
if (touchY < 0) {
if(this.direction === "down") return;
this.direction = 'up'
} else if (touchY > 0) {
if(this.direction === "up") return;
this.direction = 'down'
}
}
this.lastX = lastX;
this.lastY = lastY;
},
bindUp() {
if (this.direction === "down") return;
this.direction = "up";
},
bindDown() {
if (this.direction === "up") return;
this.direction = "down";
},
bindLeft() {
if (this.direction === "right") return;
this.direction = "left";
},
bindRight() {
if (this.direction === "left") return;
this.direction = "right";
},
}
}
</script>以上就是基于Vue uniapp實(shí)現(xiàn)貪吃蛇游戲的詳細(xì)內(nèi)容，更多關(guān)于uniapp貪吃蛇游戲的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家分享一篇Axios 常用的請(qǐng)求方法別名，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue使用pdfobject實(shí)現(xiàn)預(yù)覽pdf的示例詳解
PDFObject?是一個(gè)?JavaScript?庫(kù)用來在HTML中動(dòng)態(tài)嵌入?PDF?文檔。這篇文章主要為大家詳細(xì)介紹了使用pdfobject實(shí)現(xiàn)預(yù)覽pdf的功能，需要的可以了解一下2023-03-03
Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問題及解決
這篇文章主要介紹了Vue項(xiàng)目中v-bind動(dòng)態(tài)綁定src路徑不成功問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue插值表達(dá)式和v-text指令的區(qū)別，{{}}這種語(yǔ)法叫做插值表達(dá)式，在插值表達(dá)式中可以寫任何合法的js表達(dá)式，下面來看看文章是怎么介紹該內(nèi)容的吧,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了vue中路由重定向redirect問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色的示例代碼
這篇文章主要介紹了用vue簡(jiǎn)單的實(shí)現(xiàn)點(diǎn)擊按鈕切換背景顏色，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了Vue子組件監(jiān)聽父組件值的變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇快速解決vue-cli在ie9+中無(wú)效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國(guó)際化方案就是根據(jù)它的規(guī)則自己建立一套語(yǔ)言字典,對(duì)于每一個(gè)字（message）都有一個(gè)統(tǒng)一的標(biāo)識(shí)符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下2022-12-12
Element Plus是為適配Vue3而對(duì)Element UI進(jìn)行重構(gòu)后產(chǎn)生的前端組件庫(kù),包含豐富的基礎(chǔ)組件,下面這篇文章主要給大家介紹了關(guān)于vue3引入Element-plus的相關(guān)資料,需要的朋友可以參考下2022-04-04