52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
// 定义游戏画布页面
|
|
<template>
|
|
<!-- ref="parent" 用于将 return 返回的 parent 指向 div -->
|
|
<div ref="parent" class="gamemap">
|
|
<!-- canvas 画布, tabindex="0" 属性用于接受用户键盘操作 -->
|
|
<canvas ref="canvas" tabindex="0"></canvas>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// 导入 GameMap.js
|
|
import { GameMap } from "@/assets/scripts/GameMap";
|
|
// 引入 canvas, onMounted 用于挂载操作定义
|
|
import { ref, onMounted } from "vue";
|
|
import { useStore } from "vuex";
|
|
|
|
export default {
|
|
setup() {
|
|
const store = useStore();
|
|
// 定义两个变量 parent 和 canvas, 一开始这两个变量都没有指向任何元素,因此 ref(null)
|
|
let parent = ref(null);
|
|
let canvas = ref(null);
|
|
|
|
// 定义挂载函数,挂载完成后执行
|
|
onMounted(() => {
|
|
// new GameMap(canvas.value.getContext("2d"), parent.value);
|
|
// 改为后端(服务器)获取生成地图
|
|
new GameMap(canvas.value.getContext("2d"), parent.value, store);
|
|
});
|
|
|
|
return {
|
|
parent,
|
|
canvas,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gamemap {
|
|
/* 宽度、高度设为100%,目的是与其父元素等长等宽 */
|
|
width: 100%;
|
|
height: 100%;
|
|
/* flex可用于同时实现水平和竖直居中 */
|
|
display: flex;
|
|
/* 水平居中 */
|
|
justify-content: center;
|
|
/* 竖直居中 */
|
|
align-content: center;
|
|
}
|
|
</style>
|