snake/acapp_snake/src/components/GameMap.vue

<template>
    <div class="gamemap" ref="div">
        <canvas ref="canvas" tabindex="0"></canvas>
        <div class="operation" v-if="$store.state.restart">
            <button @click="restart" v-if="$store.state.access !== ''">开始游戏</button>
            <button @click="show_ranklist" v-if="$store.state.access !== ''">排行榜</button>
            <button v-else>您没有授权该应用</button>
        </div>

        <div class="operation" v-if="$store.state.upgrade">
            <button @click="go_next_step">下一局</button>
            <button @click="cancel">放弃</button>
        </div>
        <RankList v-if="$store.state.ranklist" />
    </div>
</template>

<script>
import { ref, onMounted, onUpdated } from 'vue';
import { GameMap } from '@/assets/scripts/GameMap';
import { useStore } from 'vuex';
import { init } from '@/assets/scripts/init';
import RankList from './RankList';
import $ from 'jquery';
export default {
    name: "GameMap",
    components: {
    RankList,
},
setup: () => {
        let div = ref(null);
        let canvas = ref(null);
        const store = useStore();
        let gamemap = null;

        init(store);

        onMounted(() => {
            gamemap = new GameMap(canvas.value.getContext('2d'), div.value, store);
            
        });

        onUpdated(()=> {
             // 展示用户的最高分
            $.ajax({
                    url: "https://app3359.acapp.acwing.com.cn/get_user_score/",
                    type: "get",
                    headers: {
                        'Authorization': "Bearer " + store.state.access,
                    },
                    success: resp => {
                        store.commit("updateRecord",resp.me.score);
                    }
            });
        })

        const restart = () => {
            gamemap.restart();
        }

        const show_ranklist = () => {
            store.commit('updateRanklist', true);
        }

        const go_next_step = () => {
            gamemap.upgrade();
            gamemap.ctx.canvas.focus();
            store.commit('updateNextStep', false);
        }

        const cancel = () => {
            store.commit('updateNextStep', false);
            gamemap.lose();
        }

        return {
            div,
            canvas,
            restart,
            show_ranklist,
            go_next_step,
            cancel,
        }
    }
}
</script>

<style scoped>
div.gamemap {
    height: calc(100% - 8vh);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    background-color: #AAD751;
}

div.operation {
    position: absolute;
}


button {
    background-color: #0d6efd;
    border: solid 0;
    border-radius: 5px;
    font-size: 3vh;
    color: white;
    padding: 3vh;
    cursor: pointer;
    margin: 0 0.5vh;
}

</style>