4.1拳皇(下)

readme.md

@@ -0,0 +1,5 @@
+#### [Web应用课中期项目](https://www.acwing.com/activity/content/1150/)
+
+
+![](https://cdn.acwing.com/media/article/image/2022/08/27/41648_8972aac026-demo.png)
+

static/css/base.css

@@ -4,4 +4,82 @@
     background-image: url('/static/images/background/0.gif');
     background-size: 200% 100%;
     background-position: top;
-}
+    position: absolute;
+}
+
+#kof > .kof-head {
+    width: 100%;
+    height: 80px;
+    position: absolute;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#kof > .kof-head > .kof-head-hp-0 {
+    width: calc(50% - 60px);
+    height: 40px;
+    border: white 5px solid;
+    border-right: none;
+    box-sizing: border-box;
+}
+
+#kof > .kof-head > .kof-head-hp-1 {
+    width: calc(50% - 60px);
+    height: 40px;
+    border: white 5px solid;
+    border-left: none;
+    box-sizing: border-box;
+}
+
+#kof > .kof-head > .kof-head-timer {
+    width: 100px;
+    height: 60px;
+    background-color: orange;
+    box-sizing: border-box;
+    color: red;
+    font-size: 30px;
+    text-align: center;
+    border: white 5px solid;
+    line-height: 50px;
+    user-select: none;
+}
+
+
+#kof > .kof-head > .kof-head-hp-0 > div {
+    background-color: red;
+    width: 100%;
+    height: 100%;
+    float: right;
+}
+
+
+#kof > .kof-head > .kof-head-hp-1 > div {
+    background-color: red;
+    width: 100%;
+    height: 100%;
+}
+
+
+#kof > .kof-head > .kof-head-hp-0 > div > div{
+    background-color: lightgreen;
+    width: 100%;
+    height: 100%;
+    float: right;
+    text-align: right;
+    font-weight: bold;
+    font-size: 20px;
+    color: blue;
+}
+
+
+#kof > .kof-head > .kof-head-hp-1 > div > div{
+    background-color: lightgreen;
+    width: 100%;
+    height: 100%;
+    font-size: 20px;
+    font-weight: bold;
+    color: blue;
+}
+

static/js/game_map/base.js

@@ -13,13 +13,45 @@ class GameMap extends AcGameObject {
 
         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.time_left = 60000; // 剩余时间
+        this.$timer = this.root.$kof.find('.kof-head-timer');
+
     }
 
     start() {
 
     }
 
+    update_timer() { // 更新时间
+        let [a,b] = this.root.players;
+        if (a.status === 6 || b.status === 6) {
+            return;
+        }
+    
+        this.time_left -= this.time_delta;
+        if (this.time_left < 0) {
+            this.time_left = 0;
+            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();
     }
 

static/js/player/base.js

@@ -31,6 +31,12 @@ export class Player extends AcGameObject {
         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() {
@@ -84,6 +90,7 @@ export class Player extends AcGameObject {
     }
 
     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];
@@ -113,11 +120,83 @@ export class Player extends AcGameObject {
 
     }
 
+    // 是否攻击到对方
+    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();
     }
 
@@ -125,6 +204,19 @@ export class Player extends AcGameObject {
         // 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;
@@ -150,9 +242,12 @@ export class Player extends AcGameObject {
 
         }
 
-        if (status === 4) {
+        if (status === 4 || status === 5 || status === 6) { // 动画演示完结束
             if (this.current_frame_cnt === obj.frame_rate * (obj.frame_cnt - 1)) {
-                this.status = 0;
+                if (status === 6) {
+                    this.current_frame_cnt--;
+                }
+                else this.status = 0;
             }
         }
 

template/index.html

@@ -9,7 +9,8 @@
     <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>
 </head>
 <body>
-    <div id="kof"></div>
+    <div id="kof">
+    </div>
     <script type="module">
         import {KOF} from '/static/js/base.js';
         let kof = new KOF('kof');