基于Vue uniapp實現(xiàn)貪吃蛇游戲
更新時間：2022年04月18日 12:57:13 作者：Sophora
貪吃蛇游戲想必是很多70、80后的回憶，一直到現(xiàn)在也深受大家的喜歡。本文將利用Vue+uniapp實現(xiàn)這一經(jīng)典的游戲，感興趣的可以了解一下
游戲演示
代碼結(jié)構
詳細代碼結(jié)構如果需要請到github查看
<template>
<view ref="body" class="content">
<view>蛇蛇目前：{{snakes.length}}米長</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>簡單模式</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">您的蛇蛇達到了{{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", // 蛇移動方向
};
},
onLoad() {
this.initGame();
},
methods: {
initGame() {
this.blocks = new Array(100).fill(0); // 生成100個地面板塊
this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機生成蟲子
this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置
}
}
}
</script>渲染蛇身
蛇身的渲染根據(jù)snakes來匹配地面板塊的索引 修改對應的背景圖來渲染蛇身
<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)聽鍵盤按鍵事件和手勢來控制蛇的方向
<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}}米長</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個地面板塊
this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機生成蟲子
this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置
document.onkeydown = (e) => {
switch (e.keyCode) { // 獲取當前按下鍵盤鍵的編碼
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; // 移動的x軸坐標
let lastY = e.touches[0].pageY; // 移動的y軸坐標
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實現(xiàn)貪吃蛇游戲的詳細內(nèi)容，更多關于uniapp貪吃蛇游戲的資料請關注腳本之家其它相關文章！
相關文章
下面小編就為大家分享一篇Axios 常用的請求方法別名，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue使用pdfobject實現(xiàn)預覽pdf的示例詳解
PDFObject?是一個?JavaScript?庫用來在HTML中動態(tài)嵌入?PDF?文檔。這篇文章主要為大家詳細介紹了使用pdfobject實現(xiàn)預覽pdf的功能，需要的可以了解一下2023-03-03
Vue項目中v-bind動態(tài)綁定src路徑不成功問題及解決
這篇文章主要介紹了Vue項目中v-bind動態(tài)綁定src路徑不成功問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue插值表達式和v-text指令的區(qū)別，{{}}這種語法叫做插值表達式，在插值表達式中可以寫任何合法的js表達式，下面來看看文章是怎么介紹該內(nèi)容的吧,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了vue中路由重定向redirect問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了用vue簡單的實現(xiàn)點擊按鈕切換背景顏色，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了Vue子組件監(jiān)聽父組件值的變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇快速解決vue-cli在ie9+中無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)
所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字（message）都有一個統(tǒng)一的標識符,下面這篇文章主要給大家介紹了關于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關資料,需要的朋友可以參考下2022-12-12
Element Plus是為適配Vue3而對Element UI進行重構后產(chǎn)生的前端組件庫,包含豐富的基礎組件,下面這篇文章主要給大家介紹了關于vue3引入Element-plus的相關資料,需要的朋友可以參考下2022-04-04