2017年4月28日 星期五

[Javascript]魔獸世界入侵事件時間及倒數

  回鍋魔獸約半年時間,中斷程式的學習也大約半年,最近結束了一些課程,想說要繼續來加強程式能力,剛好魔獸這次推出入侵事件,原則上是18.5個小時一次,一次六個小時,因為多了半個小時,所以整個時間變得會有推移的狀況,很多人都時不時在問下一場是什麼時候,雖然大陸有網友已經先推算了一堆時間出來,但那張表不夠直覺,所以我決定自己來寫一個,大概花了三個小時分成兩天完成,其中花最多時間的地方在於查語法,因為太久沒寫,都忘得差不多了.

  成果如下;目前放在hinet的免費網頁空間中軍團入侵事件
  設計的想法很簡單:
 1.日曆方式呈現,並分成凌晨,上午,下午,晚上四個時段
 2.下一場入侵開始的倒數時間
 3.正在進行中的入侵事件結束倒數

 實作上做了一些處理:
  1.入侵時間是先算出場次後以時間序列值存在陣列中以供取用,這是因為直接用算的有點麻煩,而這支程式有時間性,所以用簡單的方式來做就好了.
  2.每天各時段的入侵事件使用二維陣列來處理,並加上一個紀錄日期的一維陣列來做映對(其實javascript只有一維陣列)
  3.倒數計時是很久以前寫的一支程式,拿出來修改後直接套用,吃入目的時間和要呈現的位置ID後就可以運作.
  4.表格結構因為要配合入侵事件,所以另外寫成一個函式,把表格及入侵事件時間都轉成HTML碼後再回傳給主程式湊成網頁要用的字串.
  5.整支程式花了大約百來行,含網頁的部份則是約200行

上線一陣子,只有公會的人看過,沒有做計數器,也不知道是不是有人來看,但運作狀況不錯,目前的時間都有對上,陣列的資料大概可以撐到八九月,到時如果有改版再看看.


2017-07-26 更新:

  考完高普考,休息了兩周,處理了一些雜事後,抽了一點時間把這個頁面做了更新,新的做法主要取消了先前的陣列時間做法,改成完全用即時計算的方式,好處就是不用去更新陣列的時間及日期資料,每次瀏灠頁面時都會即時去計算後面30天的入侵時間,實作的部份做一下說明:

  1,以最近的一次入侵時間做為計算起點,之後每次瀏灠頁面時,先算出目前時間和起點的相差倍數,然後再去推算後面48場入侵的時間(其實40場就夠一個月份了),然後產生一個時間陣列出來.
  2.以最近的一次入侵日期為起算日,再去生成後面30天的日期陣列.
  3.以日期陣列的最後一個時間去尋找時間陣列中小於最後一天的入侵總場次.
  4.產生表格的部份和之前的做法一樣,程式也沒有改動到,直接延用

新的表格改用漸層色來表現一天的四個時段,可讀性比較好一些:


  有看到別人的華麗版入侵時間還有地點的,聽說是有規律可循,有空再來研究看看能不能加進來使用.

2017-08-20 更新:

修正了一些小bug:
1.修改日期零時的做法,原本是用算法去做的,後來發現javascript有setHours()的函式可以,這樣我只要找出日期再把時分秒設為零就是一天的開始了;
2.增加判斷前一日是否有事件,因為新的做法只會紀錄上一場開始的時間,然後也會記錄前一天的日期(跨日問題),這樣會造成有時前一天的時間已經沒有入侵了,但因為陣列中還有前一天的日期,所以顯示了一個空白的日子在日曆上,因此增加了一個變數來判斷是否要顯示出前一日的日期來.

至於地點的問題,我覺得不重要了,因為7.3也快改版了,所以沒打算加上去,這支程式只是用來練習用的,也沒必要做得太完美,接下來如果還會再動這支程式,應該只是把log刪掉和程式碼的改良而已.

2017-08-20 更新二:

睡了一覺醒來突然一時興起,還是決定把入侵地點加上去,基本上是12場一個循環,所以只要增加一個陣列來處理就好了;然後再做了一些程式碼的優化:
1.刪除開發中使用的測試文字;
2.增加幾個函式來處理日期和時間字串,簡化程式碼;
3.增加對當日欄位的強化顯示;
4.原本一天切四個時段改成兩個時間,免得表格因為增加了地點的顯示變很長;


這應該是最後版本不會再動了,等待阿古斯來吧!

2017-08-25 更新
1.修正入侵時間期間的計算錯誤,應該是持續六小時的時間,我加成了十八個半小時.
2.修改了前一日的日期顯示方式,如果入侵已經結束,而且過了一天,那麼就不顯示前一天的日期及入侵場次,但如果是當天的上一場入侵場次則一樣會顯示.

真的是最後一次更新了,再六天就要更新7.3了.