iT邦幫忙

第 12 屆 iThome 鐵人賽

0
自我挑戰組

30天找回寫程式手感計劃!!!系列 第 35

Day35 - 「登愣登愣,登愣登登登」~ 隱挑戰 Day11

  • 分享至 

  • xImage
  •  

技術是成功的基石,耐力是飛翔的翅膀,堅持下去終將展翅高飛。
https://ithelp.ithome.com.tw/upload/images/20201011/2012987336Kw5nmfHl.png

老實說,
今天已經跟團員去吃鐵人賽慶功宴了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.

來看一下效果吧!
https://ithelp.ithome.com.tw/upload/images/20201011/201298734908XFc4ZB.png
哦哦哦!是不是超有 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

https://ithelp.ithome.com.tw/upload/images/20201011/20129873pdQ2uSwMUC.png

再來就是在 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 來看。
https://ithelp.ithome.com.tw/upload/images/20201011/20129873IPi3703F8O.png
看起來對了!
(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";
}

看看成果吧!

  • 攻擊怪:
    https://ithelp.ithome.com.tw/upload/images/20201011/20129873JCTe015K8N.png
  • 怪攻擊趙靈兒,血量變 0:
    https://ithelp.ithome.com.tw/upload/images/20201011/20129873CI8xetkFUs.png
  • 兩個角色血量為 0,出現戰鬥失敗畫面:
    https://ithelp.ithome.com.tw/upload/images/20201011/201298735GIEAXxosy.png

本日打完收工!

[後記]

我知道今天的 failWar 跟昨天的 finishWar 的函數做的事有 87% 像,
應該要合在一個函數才對,
但今天先分開orz
我寄出去之前會改完這個,
還有攻擊量要改成隨機數字,
怪也要改成隨機攻擊李逍遙或趙靈兒才行。

我真的覺得我如果沒來更我就又會跟富奸一樣一直拖著不交出去了,
想要在這次的鐵人賽把這件事做個了結,
所以快刀展亂麻,明天就來告白吧!

希望明天就是最後一篇了!
頑張!

然後這邊小小說一下,
30天不喝手搖飲,Day2 成功!


上一篇
Day34 - 「登愣登愣,登愣登登登」~ 隱挑戰 Day10
下一篇
Day36 - 「登愣登愣,登愣登登登」~ 隱挑戰 Day12 ─ 果然我的青春寫扣喜劇搞錯了。完
系列文
30天找回寫程式手感計劃!!!36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言