我兒時的小夢想-開發貪食蛇小遊戲

前言

記得讀書的年代,有一款手機遊戲叫貪食蛇,之前的手機就幾款遊戲，同窗們都廢寢忘餐地玩，就像如今玩王者榮耀同樣火。只不過窮人的孩子沒有手機，看着人家玩得不亦樂乎o(╥﹏╥)o,就立志之後直接搞一個出來本身玩,哈哈筆者以前用原生JavaScript也寫過一次貪食蛇，,雖然就幾個動做，但原生JavaScript能夠寫出一百多行代碼, 如今筆者用vue再從新寫一次,vue是數據驅動的因此編程思惟要轉變一下,但代碼量減小不少。javascript

需求分析

建立場景 - 遊戲場景讓小蛇在這活動
建立蛇 - 建立蛇的座標位置信息
移動蛇 - 蛇上下左右方向自動移動
食物 - 建立食物隨機座標位置信息、判斷蛇是否吃到食物
食本身 - 判斷蛇是否吃到本身後遊戲結束
出界處理 - 判斷蛇撞牆後遊戲結束

建立場景

html和css很簡單就幾行東西就建立了遊戲的場景

<template>
    <div class="snakebox" :style="{width:boxWidth+'px',height: boxheight + 'px'}"> <div class="snake"></div> <div class="shiwu"></div> </div>
</template>
<script> export default { name: 'snake', data() { return { boxWidth: 500, //場景寬度 boxheight: 500,//場景高度 } } } </script>
<style scoped> .snakebox { position: relative; margin: 0 auto; background: black; transition-duration: 500ms; transition-timing-function: ease-out; overflow: hidden; } .snake { background: red; position: absolute; } .shiwu { position: absolute; background: #0099FF; } </style>

複製代碼

建立蛇和食物

建立蛇 snakeAry變量表明蛇座標信息，將變量綁定到模板上
建立食物 foodInfo變量表明食物隨機的座標信息,將食物座標信息綁定到模板上

<template>
    <div class="snakebox" :style="{width:boxWidth+'px',height: boxheight + 'px'}"> <div class="snake":style="{left : item.x*snakeWidth +'px' , top:item.y*snakeHeight +'px', width:snakeWidth+ 'px' , height: snakeHeight+'px'}" v-for="(item,index) in snakeAry" :key="index"></div> <div class="shiwu"></div> </div>
</template>
<script> export default { name: 'snake', data() { return { boxWidth: 500, //場景寬度 boxheight: 500,//場景高度 snakeAry: [ {x: 2, y: 1}, //蛇頭 {x: 3, y: 1}, //蛇身 {x: 4, y: 1}], // 蛇尾 foodInfo: null, // 食物座標信息 } }, created() { this.randomFood() }, methods:{ randomFood() { this.foodInfo = { x: Math.floor(Math.random() * this.boxWidth / this.snakeWidth), y: Math.floor(Math.random() * this.boxheight / this.snakeHeight) } }, } } </script>

複製代碼

移動蛇、食本身、碰到食物、出界

變量 direction 是肯定蛇移動的方向,默認向右移動
監聽上下左右鍵盤事件改變direction的值
建立蛇身移動函數 moveSnake(),蛇移動函數無非改變蛇的座標值,食本身、碰到食、出界處理也一一加上註釋
增長定時器讓蛇本身動起來

export default {
        name: 'snake',
        data() {
            return {
                boxWidth: 500, //場景寬度
                boxheight: 500,//場景高度
                snakeWidth: 20, //蛇身寬度
                snakeHeight: 20,//蛇身寬度
                direction: 'right',//蛇移動方向
                snakeAry: [
                    {x: 2, y: 1}, //蛇頭
                    {x: 3, y: 1}, //蛇身
                    {x: 4, y: 1}], // 蛇尾
                foodInfo: null, // 食物座標信息
                timer: null,//小蛇本身動起來定時器
            }
        },
        created() {
            this.randomFood()
            this.timerfun()
        },
        mounted() {
            document.body.addEventListener('keydown', (ev) => {
                ev.preventDefault()
                switch (ev.key) {
                    case  'ArrowUp':
                        this.direction = 'up'
                        break
                    case  'ArrowDown':
                        this.direction = 'down'
                        break
                    case  'ArrowLeft':
                        this.direction = 'left'
                        break
                    case  'ArrowRight':
                        this.direction = 'right'
                        break
                }
            })
        },

        methods: {
            timerfun() {
                this.timer = setInterval(() => {
                    this.moveSnake()
                }, 100)
            },
            randomFood() {
                this.foodInfo = {
                    x: Math.floor(Math.random() * this.boxWidth / this.snakeWidth),
                    y: Math.floor(Math.random() * this.boxheight / this.snakeHeight)
                }
            },
            moveSnake() {
                const {x: sx, y: sy} = this.foodInfo
                let body = this.snakeAry
                //蛇身 蛇尾用逆向循環改變一下位置
                for (let i = body.length - 1; i > 0; i--) {
                    body[i].x = body[i - 1].x
                    body[i].y = body[i - 1].y
                }
                //改變蛇頭座標信息
                if (this.direction === 'right') body[0].x += 1
                if (this.direction === 'down') body[0].y += 1
                if (this.direction === 'up') body[0].y -= 1
                if (this.direction === 'left') body[0].x -= 1


                // 處理碰到本身的狀況
                if (body.length >= 4) {
                    for (let index = 4; index < body.length; index++) {
                        if (body[0].x === body[index].x && body[0].y === body[index].y) {
                            alert('不能碰到本身啊')
                            clearInterval(this.timer)
                        }
                    }
                }
                //判斷碰到食物
                if (body[0].x === sx && body[0].y === sy) {
                    this.snakeAry.push({
                        x: sx,
                        y: sy
                    })
                    this.randomFood()
                }

                //處理邊界遊戲結束
                if (body[0].x < 0 || body[0].x * this.snakeWidth > this.boxWidth - this.snakeWidth
                    || body[0].y < 0 || body[0].y * this.snakeWidth > this.boxheight - this.snakeHeight) {
                    alert('game over')
                    clearInterval(this.timer)
                }


            }

        }
    }
複製代碼

最後貼上效果和完整代碼

<template>
    <div class="snakebox" :style="{width:boxWidth+'px',height: boxheight + 'px'}"> <div class="snake" :style="{left : item.x*snakeWidth +'px' , top:item.y*snakeHeight +'px', width:snakeWidth+ 'px' , height: snakeHeight+'px'}" v-for="(item,index) in snakeAry" :key="index"></div> <div class="shiwu" :style="{width:snakeWidth+'px',height:snakeHeight+'px',left: foodInfo.x* snakeWidth+ 'px',top : foodInfo.y*snakeWidth+'px'}"></div> </div>
</template>

<script> export default { name: 'snake', data() { return { boxWidth: 500, //場景寬度 boxheight: 500,//場景高度 snakeWidth: 20, //蛇身寬度 snakeHeight: 20,//蛇身寬度 direction: 'right',//蛇移動方向 snakeAry: [ {x: 2, y: 1}, //蛇頭 {x: 3, y: 1}, //蛇身 {x: 4, y: 1}], // 蛇尾 foodInfo: null, // 食物座標信息 timer: null, } }, created() { this.randomFood() this.timerfun() }, mounted() { document.body.addEventListener('keydown', (ev) => { ev.preventDefault() switch (ev.key) { case 'ArrowUp': this.direction = 'up' break case 'ArrowDown': this.direction = 'down' break case 'ArrowLeft': this.direction = 'left' break case 'ArrowRight': this.direction = 'right' break } }) }, methods: { timerfun() { this.timer = setInterval(() => { this.moveSnake() }, 100) }, randomFood() { this.foodInfo = { x: Math.floor(Math.random() * this.boxWidth / this.snakeWidth), y: Math.floor(Math.random() * this.boxheight / this.snakeHeight) } }, moveSnake() { const {x: sx, y: sy} = this.foodInfo let body = this.snakeAry //蛇身 蛇尾用逆向循環改變一下位置 for (let i = body.length - 1; i > 0; i--) { body[i].x = body[i - 1].x body[i].y = body[i - 1].y } //改變蛇頭座標信息 if (this.direction === 'right') body[0].x += 1 if (this.direction === 'down') body[0].y += 1 if (this.direction === 'up') body[0].y -= 1 if (this.direction === 'left') body[0].x -= 1 // 處理碰到本身的狀況 if (body.length >= 4) { for (let index = 4; index < body.length; index++) { if (body[0].x === body[index].x && body[0].y === body[index].y) { alert('不能碰到本身啊') clearInterval(this.timer) } } } //判斷碰到食物 if (body[0].x === sx && body[0].y === sy) { this.snakeAry.push({ x: sx, y: sy }) this.randomFood() } //處理邊界遊戲結束 if (body[0].x < 0 || body[0].x * this.snakeWidth > this.boxWidth - this.snakeWidth || body[0].y < 0 || body[0].y * this.snakeWidth > this.boxheight - this.snakeHeight) { alert('game over') clearInterval(this.timer) } } } } </script>

<style scoped> .snakebox { position: relative; margin: 0 auto; background: black; transition-duration: 500ms; transition-timing-function: ease-out; overflow: hidden; } .snake { background: red; position: absolute; } .shiwu { position: absolute; background: #0099FF; } </style>

複製代碼