Combo動畫效果+細部微調
This commit is contained in:
parent
4d03437480
commit
51ea3647ca
@ -12,6 +12,12 @@
|
||||
|
||||
<div id="main-area">
|
||||
<div class="inner">
|
||||
|
||||
<div id="score-combo-area" class="hide">
|
||||
<span class="boss-hp-text">1400000000</span>
|
||||
<span class="overkill-bonus-text">0</span>
|
||||
</div>
|
||||
|
||||
<div id="levinessa-area">
|
||||
<span id="levinessa-logo"><img src="images/%E7%B4%A0%E6%9D%90_levinessa_%E5%AD%97.png" style="height: 9em; object-fit: contain;"></span>
|
||||
</div>
|
||||
|
||||
59
query.js
59
query.js
@ -4,6 +4,8 @@
|
||||
var baseAPIUrl = "//spreadsheets.google.com/feeds/list/1bA_RNgWbS8_K_4UJ5wUkzZd98gNHz2zKj8E0NYxVWhY/ohu83m6/public/values?alt=json";
|
||||
|
||||
var updateFreSec = 10000;
|
||||
var current_bossHp;
|
||||
var current_overKillBonus;
|
||||
|
||||
// set timeout
|
||||
queryResult();
|
||||
@ -33,23 +35,67 @@ function queryResult() {
|
||||
var overKillBonus = data.feed.entry[0].gsx$overkill分數.$t;
|
||||
var overKillBonusRate = (overKillBonus / overKillMaxBonus) * 100;
|
||||
var scheduleText = data.feed.entry[0].gsx$狀況一.$t;
|
||||
var modeText = data.feed.entry[0].gsx$狀況二.$t;
|
||||
|
||||
// 測試用
|
||||
// alert("OK "+data.feed.entry[0].gsx$boss剩餘血.$t);
|
||||
// console.log(data);
|
||||
|
||||
// 顯示
|
||||
display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
|
||||
|
||||
display_data(scheduleText, modeText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate);
|
||||
setAshowCombo(bossHp, overKillBonus)
|
||||
},
|
||||
error: function(data){
|
||||
// 隱藏處理中畫面
|
||||
alert("網路錯誤，請重新整理試試看");
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
|
||||
function setAshowCombo(bossHp, overKillBonus) {
|
||||
// 介面對應
|
||||
var comboArea = $('#score-combo-area');
|
||||
var combo_bossHp = $('#score-combo-area .boss-hp-text');
|
||||
var combo_overKillBonus = $('#score-combo-area .overkill-bonus-text');
|
||||
combo_bossHp.html(bossHp);
|
||||
combo_overKillBonus.html(overKillBonus);
|
||||
function hideCombo() {comboArea.removeClass("show");}
|
||||
|
||||
// BOSS Mode
|
||||
if(current_bossHp != 0) {
|
||||
combo_bossHp.css('display', 'inherit');
|
||||
combo_overKillBonus.css('display', 'none');
|
||||
|
||||
if(current_bossHp != bossHp) {
|
||||
comboArea.addClass('show');
|
||||
window.setTimeout( hideCombo, 4000 );
|
||||
// comboArea.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
|
||||
// function() {
|
||||
// comboArea.removeClass("show");
|
||||
// }
|
||||
// );
|
||||
}
|
||||
}
|
||||
// Overkill Mode
|
||||
else {
|
||||
combo_bossHp.css('display', 'none');
|
||||
combo_overKillBonus.css('display', 'inherit');
|
||||
|
||||
if(current_overKillBonus != overKillBonus) {
|
||||
comboArea.addClass('show');
|
||||
window.setTimeout( hideCombo, 4000 );
|
||||
// comboArea.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
|
||||
// function() {
|
||||
// comboArea.removeClass("show");
|
||||
// }
|
||||
// );
|
||||
}
|
||||
}
|
||||
|
||||
current_bossHp = bossHp;
|
||||
current_overKillBonus = overKillBonus;
|
||||
}
|
||||
|
||||
function display_data(scheduleText, modeText, bossMaxHp, bossHp, bossHpRate, overKillMaxBonus, overKillBonus, overKillBonusRate) {
|
||||
// 介面對應
|
||||
var mScheduleText = document.getElementById('schedule-text');
|
||||
var mModeText = document.getElementById('mode-text');
|
||||
@ -70,13 +116,12 @@ function display_data(scheduleText, bossMaxHp, bossHp, bossHpRate, overKillMaxBo
|
||||
$('#overkill-bonus-area .progressbar').width(overKillBonusRate+"%");
|
||||
|
||||
mScheduleText.innerHTML = scheduleText;
|
||||
mModeText.innerHTML = modeText;
|
||||
// OverKill
|
||||
if(bossHp == 0) {
|
||||
mModeText.innerHTML = 'OverKill Mode';
|
||||
$(mOverkillScoreArea).removeClass("hide");
|
||||
}
|
||||
else {
|
||||
mModeText.innerHTML = 'BOSS Mode';
|
||||
$(mOverkillScoreArea).addClass("hide");
|
||||
}
|
||||
}
|
||||
|
||||
48
style.css
48
style.css
@ -42,6 +42,45 @@ body {
|
||||
/* float: left;*/
|
||||
}
|
||||
|
||||
@keyframes combo-ani {
|
||||
from {
|
||||
font-size: 6rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
25% {
|
||||
font-size: 6rem;
|
||||
opacity: 1;
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
to {
|
||||
font-size: 18rem;
|
||||
opacity: 0;
|
||||
margin-top: -4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#score-combo-area {
|
||||
position: fixed;
|
||||
color: rgba(236, 246, 255, 0.75);
|
||||
top: 28%;
|
||||
width: 200%;
|
||||
left: -50%;
|
||||
/* overflow: hidden;*/
|
||||
text-align: center;
|
||||
font-size: 6rem;
|
||||
text-shadow: 0 0 30px black;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
#score-combo-area.show {
|
||||
animation-duration: 3s;
|
||||
animation-name: combo-ani;
|
||||
}
|
||||
#score-combo-area.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#score-area {
|
||||
text-align: center;
|
||||
color: white;
|
||||
@ -54,7 +93,7 @@ body {
|
||||
width: 100%;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.25em;
|
||||
padding-top: 0.25em;
|
||||
transition: all 3s ease;
|
||||
@ -79,6 +118,7 @@ body {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0em;
|
||||
max-width: 100%;
|
||||
}
|
||||
#boss-hp-area .progressbar {
|
||||
background: rgba(195, 21, 21, 1);
|
||||
@ -104,10 +144,6 @@ top: 0em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#score-area {
|
||||
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------- */
|
||||
|
||||
footer {
|
||||
@ -115,7 +151,7 @@ footer {
|
||||
width: 92%;
|
||||
color: white;
|
||||
text-shadow: 2px 2px 8px rgb(218, 220, 255);
|
||||
padding-top: 1.2em;
|
||||
padding-top: 0.6em;
|
||||
}
|
||||
|
||||
#schedule-area {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user