Day35 - 「登愣登愣，登愣登登登」～ 隐挑战 Day11

技术是成功的基石，耐力是飞翔的翅膀，坚持下去终将展翅高飞。

老实说，
今天已经跟团员去吃铁人赛庆功宴了XD
但被团员发现我还在写XDDDD
想了一下，
隐挑战当然不能一直这样无止尽挑战下去，
今天还被团员吐嘈说我这样写下去，
就会发现明年开赛了，
却搞不清楚这是第 12 届还是第 13 届的文章XDDDDDD

「大家好，欸豆，
我不知道该说这是 Day1 还是 Day367 的文章 XD」

连这种状况都模拟给我看了XD
虽然我觉得如果文章可以更一年都没有断也满厉害的就是了，
所以我想是时候要结束隐挑战了，
择日不如撞日，
挑今天结束它吧！

但因为怕今天过後我又继续放置，
为了要鞭策自己把 JavaScript 最终作业交出去，
我会交出去之後再来写挑战结束感言+把最终作业寄出去的证据XD

正片开始

今日课题：加上角色全灭战斗失败画面

相信跟我同年代的人大家对这一幕并不陌生，

对的，今天要加上角色全灭战斗失败的画面！

其实这跟加战斗成功有异曲同工之妙，
所以就是加对地方就成功 87% 了XD

战斗失败要加上暗红色遮罩

这边我不想用交换图片的方式，
想要直接在战斗画面加上暗红色遮罩，
以及那两句话XD

这边先在 html 加上：

<div class="war_fail">
    <div class="message message1"></div>
    <div class="message message2"></div>
</div>

CSS:

.war_fail{
    position: absolute;
    z-index: 2;

    width: 100%;
    height: 100%;
    background-color: rgba(125, 20, 17, 0.5);
}

这边特别提一下，
rgba = rgb + alpha，
顾名思义，就是可以设定透明度。

CSS Colors - W3Schools
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

来看一下效果吧！

哦哦哦！是不是超有 fu 的！

再来加上文字，
html:

<div class="war_fail">
    <div class="message message1">
        胜败乃兵家常事也
    </div>
    <div class="message message2">
        大侠请重新来过吧
    </div>
</div>

CSS:

.war_fail{
    position: absolute;
    z-index: 2;

    width: 100%;
    height: 100%;
    background-color: rgba(125, 20, 17, 0.5);

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    .message{
        color: #c2b6a5;
        font-size: 44px;
        font-family: "新细明体";
        text-shadow: 4px 5px 2px #000000; // 文字阴影效果 (X偏移 Y偏移 Blur 颜色)
        margin-bottom: 10px;
        letter-spacing: 5px; // 文字间距
    }
}

这边特别 memo 一下，调整文字间距的 CSS 是 letter-spacing。

再来就是在 JavaScript 加上判断角色全灭，
在原本轮到怪做动後执行的函数 bloodClassReset 加入判断角色全灭的逻辑：

function bloodClassReset(){
    if ( currentActor < 2 ){
        monsterBloodMinusElement.textContent = "";
        monsterBloodMinusElement.setAttribute("class",originClass);
        currentActor ++;
    } else{
        girlStatusElement.childNodes[0].setAttribute("class",originClass);
        if ( roleStatus[0].HealthPoint[0] <=0 && roleStatus[1].HealthPoint[0] <=0 ){ 
            console.log("角色全灭");

        } else{
            // 如果怪的血量 > 0 则要继续战斗
            if ( roleStatus[2].HealthPoint[0] >0 ){ 
                currentActor = 0; // 0:李逍遥 1:赵灵儿 2:怪 与roleStatus顺序一致
                roleActionSelect();
            }
        }
    }
}

一样不贪心，先埋 console.log 来看。

看起来对了！
(PS. 为了要刻意弄出两位主角都挂掉的情况，
我把李逍遥的血量一开始就改成 0，
我知道血量为 0 的角色还能在场上不合理啦，
但先这样orz)

if ( roleStatus[0].HealthPoint[0] <=0 && roleStatus[1].HealthPoint[0] <=0 ){ 
    console.log("角色全灭");
    setTimeout(failWar, 1500); // 延迟3秒才显示战斗失败
}

function failWar(){
    musicElement.pause();
    setTimeout(function(){ 
        musicElement.loop = false;
        musicElement.src = "bgm/fail.mp3";
        musicElement.play();
    }, 500);
    

    let originClass = warFailElement.getAttribute("class");
    warFailElement.style = "display:flex";

    // 要将战斗选单及角色状态隐藏
    warMenuElement.style = "display:none";
    roleStatusElement.style = "display:none";
    monsterElement.style = "display:none";
}

看看成果吧！

• 攻击怪：
  
• 怪攻击赵灵儿，血量变 0：
  
• 两个角色血量为 0，出现战斗失败画面：
  

本日打完收工！

[後记]

我知道今天的 failWar 跟昨天的 finishWar 的函数做的事有 87% 像，
应该要合在一个函数才对，
但今天先分开orz
我寄出去之前会改完这个，
还有攻击量要改成随机数字，
怪也要改成随机攻击李逍遥或赵灵儿才行。

我真的觉得我如果没来更我就又会跟富奸一样一直拖着不交出去了，
想要在这次的铁人赛把这件事做个了结，
所以快刀展乱麻，明天就来告白吧！

希望明天就是最後一篇了！
顽张！

然後这边小小说一下，
30天不喝手摇饮，Day2 成功！