以下是一个简单的
Vue 推箱子小游戏的示例：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="utf-8">
<title>
推箱子游戏</title>
<style>
.box {
width: 50px;
height: 50px;
background-color: #ccc;
display: inline-block;
position: relative;
}
.player {
width: 50px;
height: 50px;
background-color: #f00;
position: absolute;
top: 0;
left: 0;
}
.target {
width: 50px;
height: 50px;
background-color: #0f0;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="app">
<div v-for="(row, rowIndex) in map" :key="rowIndex">
<div v-for="(col, colIndex) in row" :key="colIndex" :class="{ box: true, target: col === 'T' }"></div>
</div>
<div class="player" :style="{ top: playerY * 50 + 'px', left: playerX * 50 + 'px' }"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/
vue/dist/
vue.js"></script>
<script>
var app = new
Vue({
el: '#app',
data: {
map: [
['W', 'W', 'W', 'W', 'W', 'W', 'W'],
['W', ' ', ' ', ' ', 'T', ' ', 'W'],
['W', ' ', ' ', ' ', ' ', ' ', 'W'],
['W', ' ', ' ', ' ', 'B', ' ', 'W'],
['W', ' ', ' ', ' ', ' ', ' ', 'W'],
['W', ' ', ' ', 'P', ' ', ' ', 'W'],
['W', 'W', 'W', 'W', 'W', 'W', 'W']
],
playerX: 3,
playerY: 5
},
methods: {
move: function (dx, dy) {
var x = this.playerX + dx;
var y = this.playerY + dy;
if (this.map[y][x] === ' ') {
this.playerX = x;
this.playerY = y;
} else if (this.map[y][x] === 'B') {
var bx = x + dx;
var by = y + dy;
if (this.map[by][bx] === ' ') {
this.map[y][x] = ' ';
this.map[by][bx] = 'B';
this.playerX = x;
this.playerY = y;
}
}
}
},
mounted: function () {
window.addEventListener('keydown', function (event) {
if (event.keyCode === 37) {
app.move(-1, 0);
} else if (event.keyCode === 38) {
app.move(0, -1);
} else if (event.keyCode === 39) {
app.move(1, 0);
} else if (event.keyCode === 40) {
app.move(0, 1);
}
});
}
});
</script>
</body>
</
html>
```
这个页面包含一个
Vue 实例，它将一个数据对象 `{ map: [], playerX: 3, playerY: 5 }` 绑定到一个
HTML 模板中。`map` 数组表示游戏地图，其中 `W` 表示墙壁，`T` 表示目标，`B` 表示箱子，`空格` 表示空地。`playerX` 和 `playerY` 表示玩家的位置。模板中
使用 `v-for` 指令来循环遍历 `map` 数组，生成游戏地图。`v-bind` 指令和 `:class` 绑定一个 CSS 类来显示地图块的背景颜色及目标的位置。页面还包含一个红色的玩家块，它通过 `playerX` 和 `playerY` 数据的值来控制位置。页面
使用 `window.addEventListener` 监听键盘事件，并调用 `move` 方法来移动玩家。`move` 方法根据移动的方向，计算出新的位置，并判断该位置是否可以移动，或者是否需要移动箱子。如果可以移动，则更新 `playerX` 和 `playerY` 的值。如果需要移动箱子，则同时更新 `map` 数组。
最低0.47元/天 解锁文章
1257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
