溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“基于Vue uniapp怎么實現貪吃蛇游戲”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
詳細代碼結構如果需要請到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">游戲結束</view>
<view class="result">您的蛇蛇達到了{{snakes.length}}米</view>
<view class="btns">
<button type="primary" @click="reStart">再次挑戰</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>蛇身的渲染根據snakes來匹配地面板塊的索引 修改對應的背景圖來渲染蛇身
<template>
<view class="game-field">
<view class="block" : 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>通過監聽鍵盤按鍵事件和手勢來控制蛇的方向
<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" :(x, i) in blocks" :key="i"></view>
</view>
</view>
</template>
<script>
export default {
data(){
return {
direction: "right",
started: false, // 游戲開始了
ended: false, // 游戲結束了
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怎么實現貪吃蛇游戲”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
