import { AcGameObject } from "../ac_game_object/base.js"; export class Player extends AcGameObject { constructor(root, info) { super(); this.root = root; this.id = info.id; // 人物id this.x = info.x; // 人物坐标 this.y = info.y; this.width = info.width; // 人物大小 this.height = info.height; this.color = info.color; // 人物颜色 this.vx = 0; // 横纵方向的移动速度 this.vy = 0; this.speedx = 400; // 水平速度初始速度 this.speedy = -1000; // 跳起的初始速度 this.gravity = 50; // 重力加速度 this.ctx = this.root.gamemap.ctx; // 获取canvas对象 this.direction = 1; // 1:向右 -1:向左 // 0:idle 1:向前 2:向后 3:跳跃 4:攻击 5:被打 6: 死亡 this.status = 3; // 人物当前状态(总共七种状态) this.press_keys = this.root.gamemap.controller.press_keys; // 用户按下的所有键值 this.animations = new Map(); // 每个动作动画的配置 this.current_frame_cnt = 0; // 当前加载了多少帧 this.hp = 100; // 初始血量为100 this.$hp = this.root.$kof.find(`.kof-head-hp-${this.id}>div`); // 控制血槽 this.$hp_div = this.$hp.find('div'); this.damage = 20; } start() { } update_controll() { let w, a, d, space; // 两个用户使用不同的按键 if (this.id === 0) { w = this.press_keys.has('w'); // 跳 a = this.press_keys.has('a'); // 左移 d = this.press_keys.has('d'); // 右移 space = this.press_keys.has(' '); // 停 } else { w = this.press_keys.has('ArrowUp'); a = this.press_keys.has('ArrowLeft'); d = this.press_keys.has('ArrowRight'); space = this.press_keys.has('Enter'); } // 0表示静止 1表示移动 3表示跳跃 if (this.status === 0 || this.status === 1) { if (space) { // 攻击状态 this.status = 4; this.vx = 0; this.current_frame_cnt = 0; } else if (w) { // 如果按的是跳 if (d) { this.vx = this.speedx; } else if (a) { this.vx = -this.speedx; } else { this.vx = 0; } this.vy = this.speedy; this.status = 3; this.current_frame_cnt = 0; } else if (d) { this.vx = this.speedx; this.status = 1; } else if (a) { this.vx = -this.speedx; this.status = 1; } else { this.vx = 0; this.status = 0; } } } update_direction() { // 保证两个人物是对称的 if (this.status === 6) return; //如果人物已经gg,不再修改方向 let players = this.root.players; if (players[0] && players[1]) { let me = this, you = players[1 - this.id]; if (me.x < you.x) me.direction = 1; // 向右 else me.direction = -1; // 向左 } } update_move() { this.vy += this.gravity; // 改变x,y轴坐标 this.x += this.vx * this.time_delta / 1000; this.y += this.vy * this.time_delta / 1000; if (this.y > 300) { this.y = 300; if (this.status === 3) this.status = 0; } if (this.x < 0) { this.x = 0; } else if (this.x + this.width > this.root.gamemap.$canvas.width()) { this.x = this.root.gamemap.$canvas.width() - this.width; } } // 是否攻击到对方 is_collision(r1, r2) { if (Math.max(r1.x1, r2.x1) > Math.min(r1.x2, r2.x2)) { return false; } if (Math.max(r1.y1, r2.y1) > Math.min(r1.y2, r2.y2)) { return false; } return true; } // 是否被攻击 is_attack() { if (this.status === 6) return; //如果人物已经gg,不再受到攻击 this.status = 5; this.current_frame_cnt = 0; this.hp = Math.max(this.hp - this.damage, 0); this.$hp_div.animate({ width: this.$hp.parent().width() * this.hp / 100 },300); this.$hp.animate({ width: this.$hp.parent().width() * this.hp / 100 },600); this.$hp_div.html(`${this.hp}`); if (this.hp <= this.damage) { this.$hp_div.css({"background-color":"red"}); } if (this.hp === 0) { this.status = 6; // gg this.current_frame_cnt = 0; this.vx = 0; // 被ko之后速度为0 } } update_attack() { if (this.status === 4 && this.current_frame_cnt === 17) { let me = this, you = this.root.players[1 - this.id]; let r1; // 自己的攻击矩形 if (me.direction > 0) { r1 = { x1: me.x + 120, y1: me.y + 40, x2: me.x + 120 + 105, y2: me.y + 40 + 20, } } else { r1 = { x1: me.x - 105, y1: me.y + 40, x2: me.x - 105 + 105, y2: me.y + 40 + 20, } } // 对手的人物矩形 let r2 = { x1: you.x, y1: you.y, x2: you.x + you.width, y2: you.y + you.height, } if (this.is_collision(r1, r2)) { you.is_attack(); // 成功攻击到对方 } } } update() { this.update_controll(); this.update_move(); this.update_direction(); this.update_attack(); this.render(); } render() { // this.ctx.fillStyle = this.color; // 画布的颜色 // this.ctx.fillRect(this.x, this.y, this.width, this.height); // 画人物 // this.ctx.fillStyle = "blue"; // this.ctx.fillRect(this.x,this.y,this.width,this.height); // if (this.direction > 0) { // this.ctx.fillStyle = "red"; // this.ctx.fillRect(this.x + 120,this.y + 40,105,20); // }else { // this.ctx.fillStyle = "green"; // this.ctx.fillRect(this.x - 105,this.y + 40,105,20); // } let status = this.status; if (this.status === 1 && this.direction * this.vx < 0) status = 2; // 根据状态获取动画 let obj = this.animations.get(status); if (obj && obj.loaded) { if (this.direction > 0) { let k = parseInt(this.current_frame_cnt / obj.frame_rate) % obj.frame_cnt; // 每5帧刷新一次 let image = obj.gif.frames[k].image; // 渲染第k张图片 this.ctx.drawImage(image, this.x, this.y + obj.offset_y, image.width * obj.scale, image.height * obj.scale); } else { this.ctx.save(); this.ctx.scale(-1, 1); this.ctx.translate(-this.root.gamemap.$canvas.width(), 0); let k = parseInt(this.current_frame_cnt / obj.frame_rate) % obj.frame_cnt; // 每5帧刷新一次 let image = obj.gif.frames[k].image; // 渲染第k张图片 this.ctx.drawImage(image, this.root.gamemap.$canvas.width() - this.x - this.width, this.y + obj.offset_y, image.width * obj.scale, image.height * obj.scale); this.ctx.restore(); } } if (status === 4 || status === 5 || status === 6) { // 动画演示完结束 if (this.current_frame_cnt === obj.frame_rate * (obj.frame_cnt - 1)) { if (status === 6) { this.current_frame_cnt--; } else this.status = 0; } } this.current_frame_cnt++; } }