Vue实现推箱子游戏

最新推荐文章于 2024-09-10 11:56:39 发布

Zԅ(¯ㅂ¯ԅ)

最新推荐文章于 2024-09-10 11:56:39 发布

阅读量491

点赞数 1

文章标签： vue.js 游戏 javascript

本文链接：https://blog.csdn.net/2201_75321887/article/details/130590670

版权

文章展示了如何使用Vue.js构建一个简单的推箱子游戏，主要区别在于Vue中需在实例化时添加事件监听，而JS则直接全局监听键盘事件。布局和样式使用了Vue的v-for指令和CSS实现，同时详细说明了键盘事件的处理逻辑，包括边界检测和碰撞检测。

摘要由CSDN通过智能技术生成

使用Vue实现推箱子游戏与使用JS实现推箱子游戏的不同之处在于，Vue要在实例化中添加一个事件监听来监听键盘，而JS则是直接对整个页面使用onkeyup直接监听。

操作步骤：

1.布局：直接使用v-for循环实现棋盘效果的界面，将盒子id设置为a+对应数组下标，方便后面随机将一个格子设置为红色表示墙。

            {{move}}
            <div>
                <div id="box" :style="{left: l+'px',top: t+'px'}"></div>
            </div>
            <div v-for="(i,index) in user" :id="'a'+index"></div>

2.样式：给div添加边框，然后投放一个箱子，将箱子填充颜色，然后将随机选择的格子背景颜色设置为红色表示墙。

#all {
            width: 510px;
            height: 510px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        #box {
            width: 100px;
            height: 100px;
            border-radius: 100px;
            background-color: burlywood;
            position: absolute;
            top: 1px;
            left: 1px;
        }

        #a7 {
            background-color: red;
        }

样式展示：

3.实例化vue对象，并对按下键盘事件进行监听。

var vm = new Vue( {
                el: '#all',
                data: {
                    user: [],
                    l: 1,
                    t: 1
                },
                computed: {
                    move ()
                    {
                        this.user.length = 24
                    }
                },
                methods: {
                    remove ( event )
                    {
                        if ( ( this.l == 409 && event.keyCode == 39 )
                            || ( this.l == 1 && event.keyCode == 37 )
                            || ( this.t == 409 && event.keyCode == 40 )
                            || ( this.t == 1 && event.keyCode == 38 ) )
                        {
                            alert( '您已超出范围' )
                        } else if ( ( this.t == 1 && this.l == 307 && event.keyCode == 40 ) ||
                            ( this.t == 103 && this.l == 205 && event.keyCode == 39 ) ||
                            ( this.t == 103 && this.l == 409 && event.keyCode == 37 ) ||
                            ( this.t == 205 && this.l == 307 && event.keyCode == 38 ) )
                        {
                            alert( '前方有墙，请绕道' )
                        } else
                        {
                            switch ( event.keyCode )
                            {
                                case 37:
                                    this.l -= 102
                                    break
                                case 38:
                                    this.t -= 102
                                    break
                                case 39:
                                    this.l += 102
                                    break
                                case 40:
                                    this.t += 102
                                    break
                            }
                        }
                    }
                },
                mounted ()
                {
                    document.addEventListener( 'keyup', this.remove )
                }
            } )

效果展示：

完整代码：

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title></title>
        <script src="vue.js"></script>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #all {
            width: 510px;
            height: 510px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        #box {
            width: 100px;
            height: 100px;
            border-radius: 100px;
            background-color: burlywood;
            position: absolute;
            top: 1px;
            left: 1px;
        }

        #a7 {
            background-color: red;
        }
    </style>

    <body>
        <div id="all">
            {{move}}
            <div>
                <div id="box" :style="{left: l+'px',top: t+'px'}"></div>
            </div>
            <div v-for="(i,index) in user" :id="'a'+index"></div>
        </div>
        <script>
            var vm = new Vue( {
                el: '#all',
                data: {
                    user: [],
                    l: 1,
                    t: 1
                },
                computed: {
                    move ()
                    {
                        this.user.length = 24
                    }
                },
                methods: {
                    remove ( event )
                    {
                        if ( ( this.l == 409 && event.keyCode == 39 )
                            || ( this.l == 1 && event.keyCode == 37 )
                            || ( this.t == 409 && event.keyCode == 40 )
                            || ( this.t == 1 && event.keyCode == 38 ) )
                        {
                            alert( '您已超出范围' )
                        } else if ( ( this.t == 1 && this.l == 307 && event.keyCode == 40 ) ||
                            ( this.t == 103 && this.l == 205 && event.keyCode == 39 ) ||
                            ( this.t == 103 && this.l == 409 && event.keyCode == 37 ) ||
                            ( this.t == 205 && this.l == 307 && event.keyCode == 38 ) )
                        {
                            alert( '前方有墙，请绕道' )
                        } else
                        {
                            switch ( event.keyCode )
                            {
                                case 37:
                                    this.l -= 102
                                    break
                                case 38:
                                    this.t -= 102
                                    break
                                case 39:
                                    this.l += 102
                                    break
                                case 40:
                                    this.t += 102
                                    break
                            }
                        }
                    }
                },
                mounted ()
                {
                    document.addEventListener( 'keyup', this.remove )
                }
            } )

        </script>

    </body>

</html>