henrytsz / sokoban-vue3

sokoban game by vue3

sokoban-vue3

初始化项目

创建地图

重构及单测地图

添加玩家

玩家移动位置

碰撞检测

重构玩家数据结构

完成玩家移动位置

添加箱子

玩家推着箱子移动

箱子的碰撞检测

完成箱子移动位置

解决 Map.vue 遗留报错问题

重构移动逻辑

箱子与箱子的碰撞检测

添加放置点

箱子与放置点的碰撞检测

检测游戏是否胜利

进入下一关

重构所有数据处理

解决 Cargo 报错

统一导出口

重构命名

地图编辑器

通过 router 来切换 game 和 mapEdit 页面

设置地图大小

有两个 input，一个用来设置地图的宽度，一个用来设置地图的高度。

当设置完宽度和高度后，可以看到对应的地图编辑块

首先在 MapEdit.vue 加两个 input:

<template>
  <div>
    <div class="input-row">
      <span class="input-row-label">row:</span>
      <input type="number" />
    </div>
    <div class="input-col">
      <span class="input-col-label">col:</span>
      <input type="number" />
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.input-row,
.input-col {
  display: flex;
  margin-bottom: 8px;
}
.input-row-label,
.input-col-label {
  width: 35px;
  text-align: right;
  margin-right: 5px;
}
</style>

样式如下：

然后再添加地图编辑块

<div class="block-row" v-for="row in 5">
  <div class="block-col" v-for="col in 5">
    <div class="block">1</div>
  </div>
</div>

.block-row {
  display: flex;
}
.block {
  width: 32px;
  height: 32px;
  border: 1px solid #ccc;
  margin: 2px;
}

样式如下：

这里我们是先画出静态页面，等调试好以后再换成动态数据

最后在 MapEdit.vue 里给 input 和编辑块绑定数据

<template>
  <div>
    <div class="input-row">
      <span class="input-row-label">row:</span>
      <input type="number" v-model="row" />
    </div>
    <div class="input-col">
      <span class="input-col-label">col:</span>
      <input type="number" v-model="col" />
    </div>
    <div class="block-row" v-for="i in row">
      <div class="block-col" v-for="j in col">
        <div class="block">1</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const row = ref(5)
const col = ref(5)
</script>

这样，当更新地图的宽和高时，地图编辑块也会随之更新。