基于Vue uniapp實現貪吃蛇游戲

更新時間：2022年04月18日 12:57:13 作者：Sophora

貪吃蛇游戲想必是很多70、80后的回憶，一直到現在也深受大家的喜歡。本文將利用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">再次挑戰(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>

渲染蛇身

蛇身的渲染根據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, // 游戲結束了
                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實現貪吃蛇游戲的詳細內容，更多關于uniapp貪吃蛇游戲的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: