使用vue实现推箱子，在实例化中添加一个事件监听来监听键盘。
操作步骤：
1.界面布局：使用css实现棋盘效果的界面。
<style type="text/css">
body {
margin: 0;
}
.content {
height: 800px;
width: 800px;
border: 1px solid black;
margin: 0 auto;
background-image: url(img/bg.png);
position: relative;
}
.content div {
background-image: url(img/xz.png);
position: absolute;
height: 100px;
width: 100px;
}
.content div:focus {
outline: 0px solid rgb(0, 0, 0);
}
.obstacle {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
top: 300px;
left: 400px;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<div v-bind:style="{left:leftValue+'px',top:topValue+'px'}"> </div>
<div class="obstacle" style="top: 300px; left: 400px;"></div>
</div>
</div>
</body> 样式展示：
实例化vue对象，并对按下键盘事件进行监听。
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
leftValue: 0,
t
最低0.47元/天 解锁文章
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
