kof/static/js/game_map/base.js

import { AcGameObject } from '/static/js/ac_game_object/base.js'
import { Controller } from '../controller/base.js';

class GameMap extends AcGameObject {
    constructor(root) {
        super();
        this.root = root; // KOF对象
        this.$canvas = $('<canvas  width="960" height="540" tabindex=0></canvas>');
        this.ctx = this.$canvas[0].getContext('2d'); // 获取上下文,canvas对象

        this.root.$kof.append(this.$canvas); // 将canvas加入$kof中，this.root.$kof是class=kof的div
        this.$canvas.focus(); // 聚焦

        this.controller = new Controller(this.$canvas);

        this.root.$kof.append($(`<div class="kof-head">
        <div class="kof-head-hp-0">
        <div><div>100</div></div>
        </div>
        <div class="kof-head-timer">60</div>
        <div class="kof-head-hp-1">
        <div><div>100</div></div>
        </div>
        </div>`));

        this.root.$kof.append($(`
        <audio id="player" autoplay>
            <source src="./static/audios/bgm.m4a" type="audio/mpeg">
         </audio>`));

        this.time_left = 60000; // 剩余时间
        this.$timer = this.root.$kof.find('.kof-head-timer');
        this.$bgm = this.root.$kof.find('#player')[0];
        this.$bgm.currentTime = 0;
        this.$bgm.play();
    }

    start() {
    }

    update_timer() { // 更新时间
        let [a, b] = this.root.players;
        if (a.status === 6 || b.status === 6) {
            this.$bgm.pause();
            return;
        }

        this.time_left -= this.time_delta;
        if (this.time_left < 0) {
            this.time_left = 0;
            this.$bgm.pause();
            if (a.status !== 6 && b.status !== 6) {
                a.status = b.status = 6;
                a.current_frame_cnt = b.current_frame_cnt = 0;
                a.vx = b.vx = 0;
            }
        }
        this.$timer.text(parseInt(this.time_left / 1000));
    }

    update() {
        this.update_timer();
        this.render();
    }

    render() {
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
        // console.log(this.ctx.canvas.width,this.ctx.canvas.height); // 打印canvas的宽高
        // console.log(this.$canvas.width());
        // this.ctx.fillStyle = "#21252b"; // 画布的颜色
        // // this.ctx.fillRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height); // 画矩形
        // this.ctx.fillRect(0,0,this.$canvas.width(),this.$canvas.height());

    }
}


export {
    GameMap,
}