我儿时的小梦想-开发贪食蛇小游戏

作者: 啊力哥_a36e | 来源:发表于2021-06-29 22:02 被阅读0次

我儿时的小梦想-开发贪食蛇小游戏
Day12_20
微信小游戏开发总结
在小程序上做一个简易的贪食蛇
微信小程序测试号连接java后台程序真机调试无法显示数据
从贪食蛇到“贪食人生”
iOS小游戏--贪食蛇
H5小游戏开发参考资料
egret微信小游戏相关
新贪食蛇隐喻的人生哲理

前言

记得读书的年代,有一款手机游戏叫贪食蛇,以前的手机就几款游戏，同学们都废寝忘餐地玩，就像现在玩王者荣耀一样火。只不过穷人的孩子没有手机，看着人家玩得不亦乐乎o(╥﹏╥)o,就立志以后直接搞一个出来自己玩,哈哈
笔者之前用原生JavaScript也写过一次贪食蛇，,虽然就几个动作，但原生JavaScript可以写出一百多行代码, 现在笔者用vue再重新写一次,vue是数据驱动的所以编程思维要转变一下,但代码量减少很多。

需求分析

创建场景 - 游戏场景让小蛇在这活动
创建蛇 - 创建蛇的坐标位置信息
移动蛇 - 蛇上下左右方向自动移动
食物 - 创建食物随机坐标位置信息、判断蛇是否吃到食物
食自己 - 判断蛇是否吃到自己后游戏结束
出界处理 - 判断蛇撞墙后游戏结束

创建场景

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)
                }


            }

        }
    }

最后贴上效果和完整代码

屏幕录制2021-06-25 下午11.04.30.gif

<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>

我儿时的小梦想-开发贪食蛇小游戏
前言记得读书的年代,有一款手机游戏叫贪食蛇,以前的手机就几款游戏，同学们都废寝忘餐地玩，就像现在玩王者荣耀一样火...
Day12_20
容器（集合框架）--承载其他对象的对象 list容器自动装箱与自动拆箱简易贪食蛇小游戏
微信小游戏开发总结
小游戏与小程序的区别？小游戏是小程序的一个类目，小游戏是微信开放给小程序的更多的能力，让小程序开发者有了开发游戏...
在小程序上做一个简易的贪食蛇
在小程序上做一个贪食蛇小游戏主要是使用到了 Canvas 画布。所以要对里面几个主要的属性要有一个了解即 bind...
微信小程序测试号连接java后台程序真机调试无法显示数据
为方便开发者开发和体验小程序、小游戏的各种能力，开发者可以申请小程序或小游戏的测试号，并使用此帐号在开发者工具创建...
从贪食蛇到“贪食人生”
最近我疯狂地迷恋上贪食蛇这个小游戏，操作简单，极容易上手。支配着我坐着玩，躺着玩，走路还玩的动力，大概就是自己不...
iOS小游戏--贪食蛇
前言闲着没事干，想起多年前学java时，笔者撸过的俄罗斯方块，坦克大战，贪食蛇，现如今已抛弃java多年，投入i...
H5小游戏开发参考资料
H5小游戏开发参考资料 Egret白鹭H5小游戏开发入门（一） - 小辉_Ray - 博客园白鹭开发者中心 - ...
egret微信小游戏相关
官方文档微信小游戏快速上手egret微信小游戏开发指南菜鸟|Egret微信小游戏好友排行榜教程小程序与小游戏获取...
新贪食蛇隐喻的人生哲理
（作者：安知）起个这么吓人的标题确实是因为我是标题党。话说最近发现一个很流行的小游戏，新版贪食蛇，好奇心起，下...