使用Vue制作推箱子网页

嘎了嘎了

已于 2023-05-25 13:37:17 修改

阅读量505

点赞数 2

文章标签： vue.js 前端 javascript

于 2023-05-25 13:20:01 首次发布

本文链接：https://blog.csdn.net/m0_69172645/article/details/130864993

版权

该文展示了如何利用Vue.js创建一个基础的推箱子游戏。通过创建项目，设置页面布局，编写CSS样式，以及运用Vue的数据绑定和方法处理键盘事件，实现箱子在限定区域内的移动。游戏中的箱子位置根据用户按键动态更新。

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

一，首先创建一个项目，并引入Vue组件。

<script src="js/vue.js"></script>

二，整体页面布局

<div id="app">
    <div class="content">
        <div class="box"
             :style=
                 "{
                    top:topValue+'px',
                    left:leftValue+'px'
                 }"
        >
        </div>
        <div class="stop"></div>
    </div>
</div>
</body>

三，编写样式文件，添加背景图片。

 <style>
        .content{
            height: 800px;
            width: 800px;
            margin: 60px auto;
            background-image: url(./img/cc.png);
            border: 1px solid black;
        }
        .box{
            height: 100px;
            width: 100px;
            background-image: url(./img/xx.png);
            position: relative;
        }
        .stop{
            width: 100px;
            height: 100px;
            background-color: #d299c2;
            position: relative;
            top: 300px;
            left: 300px;
        }
    </style>

四，Vue代码，用if判断语句来设置上下左右边界和墙壁的上下左右边界，通过判断使箱子移动，最后给整个页面添加事件监听。

<script>
        new Vue({
            el: "#app",
            data: {
                topValue: 200,
                leftValue: 400,
            },
            methods:{
                move(event) {
                    switch (event.keyCode) {
                        //上
                        case 38:
                            if (this.topValue == 0 || this.topValue == 500 && this.leftValue == 300) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.topValue -= 100;
                            break;
                        //下
                        case 40:
                            if (this.topValue == 700 || this.topValue == 300 && this.leftValue == 300) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.topValue += 100;
                            break;
                        //左
                        case 37:
                            if (this.leftValue == 0 || this.topValue == 400 && this.leftValue == 400) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.leftValue -= 100;
                            break;
                        //右
                        case 39:
                            if (this.leftValue == 700 || this.topValue == 400 && this.leftValue == 200) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.leftValue += 100;
                            break;
                    }
                }
            },
            //给整个页面添加事件监听
            mounted:function () {
                document.addEventListener("keydown",this.move)
            }
        })
    </script>

五，完整代码及效果展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>推箱子</title>
    <script src="js/vue.js"></script>
    <style>
        .content{
            height: 800px;
            width: 800px;
            margin: 60px auto;
            background-image: url(./img/cc.png);
            border: 1px solid black;
        }
        .box{
            height: 100px;
            width: 100px;
            background-image: url(./img/xx.png);
            position: relative;
        }
        .stop{
            width: 100px;
            height: 100px;
            background-color: #d299c2;
            position: relative;
            top: 300px;
            left: 300px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="content">
        <div class="box"
             :style=
                 "{
                    top:topValue+'px',
                    left:leftValue+'px'
                 }"
        >
        </div>
        <div class="stop"></div>
    </div>
</div>
</body>
    <script>
        new Vue({
            el: "#app",
            data: {
                topValue: 200,
                leftValue: 400,
            },
            methods:{
                move(event) {
                    switch (event.keyCode) {
                        //上
                        case 38:
                            if (this.topValue == 0 || this.topValue == 500 && this.leftValue == 300) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.topValue -= 100;
                            break;
                        //下
                        case 40:
                            if (this.topValue == 700 || this.topValue == 300 && this.leftValue == 300) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.topValue += 100;
                            break;
                        //左
                        case 37:
                            if (this.leftValue == 0 || this.topValue == 400 && this.leftValue == 400) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.leftValue -= 100;
                            break;
                        //右
                        case 39:
                            if (this.leftValue == 700 || this.topValue == 400 && this.leftValue == 200) {
                                break;
                            }
                            console.log(this.topValue,this.leftValue)
                            this.leftValue += 100;
                            break;
                    }
                }
            },
            //给整个页面添加事件监听
            mounted:function () {
                document.addEventListener("keydown",this.move)
            }
        })
    </script>
</html>

Vue