about end demo
This commit is contained in:
parent
b058d5c9a7
commit
8fe1bec5bd
15
index.html
15
index.html
|
@ -19,7 +19,7 @@
|
||||||
<div id="gear" style="display:none" onclick="publish('show_options')">
|
<div id="gear" style="display:none" onclick="publish('show_options')">
|
||||||
<div class="icon">⚙</div>
|
<div class="icon">⚙</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="about" style="display:none">
|
<div id="about"><!-- style="display:none">-->
|
||||||
<div class="icon">?</div>
|
<div class="icon">?</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -41,8 +41,14 @@
|
||||||
<div id="end_demo">
|
<div id="end_demo">
|
||||||
<div id="end_demo_tbc"></div>
|
<div id="end_demo_tbc"></div>
|
||||||
<div id="end_demo_words">
|
<div id="end_demo_words">
|
||||||
Augh games take so long to make!
|
<span id="end_words1">
|
||||||
This one will be done summer 2019, and released for <i>free</i>.
|
Augh games take so long to make!
|
||||||
|
This one will be done August 2019, and released for <i>free</i>.
|
||||||
|
</span>
|
||||||
|
<span id="end_words2">
|
||||||
|
This is a demo for my upcoming story-game,
|
||||||
|
which will be released for <i>free</i> in August 2019.
|
||||||
|
</span>
|
||||||
Get notified via my (once-a-month) newsletter!
|
Get notified via my (once-a-month) newsletter!
|
||||||
<div>
|
<div>
|
||||||
<form id="the_newsletter" method="POST" accept-charset="utf-8" target="_blank">
|
<form id="the_newsletter" method="POST" accept-charset="utf-8" target="_blank">
|
||||||
|
@ -106,6 +112,9 @@
|
||||||
|
|
||||||
<div id="replay"></div>
|
<div id="replay"></div>
|
||||||
|
|
||||||
|
<div style="clear:both;"></div>
|
||||||
|
<div id="close_about">close</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -51,4 +51,11 @@ SceneSetup.act1_end = function(){
|
||||||
$("#game_container").style.background = "#000";
|
$("#game_container").style.background = "#000";
|
||||||
$("#game_choices").style.display = "none";
|
$("#game_choices").style.display = "none";
|
||||||
|
|
||||||
|
// KILL
|
||||||
|
Game.scene.kill = function(){
|
||||||
|
Game.FORCE_TEXT_Y = -1;
|
||||||
|
$("#game_container").style.background = "";
|
||||||
|
$("#game_choices").style.display = "";
|
||||||
|
};
|
||||||
|
|
||||||
};
|
};
|
|
@ -1,14 +1,77 @@
|
||||||
|
window.About = {};
|
||||||
|
|
||||||
(function(){
|
(function(){
|
||||||
|
|
||||||
var gdpr = $("#gdpr");
|
// Newsletter stuff
|
||||||
var submit = $("#submit");
|
var gdpr = $("#gdpr");
|
||||||
gdpr.oninput = function(){
|
var submit = $("#submit");
|
||||||
var isChecked = gdpr.checked;
|
gdpr.oninput = function(){
|
||||||
submit.disabled = !isChecked;
|
var isChecked = gdpr.checked;
|
||||||
submit.value = isChecked ? "Subscribe! →" : "← plz consent";
|
submit.disabled = !isChecked;
|
||||||
};
|
submit.value = isChecked ? "Subscribe! →" : "← plz consent";
|
||||||
gdpr.oninput();
|
};
|
||||||
|
gdpr.oninput();
|
||||||
|
$("#the_newsletter").setAttribute("action", "https://sendy.ncase.me/subscribe");
|
||||||
|
|
||||||
|
// The About Button
|
||||||
|
var aboutDOM = $("#end_demo");
|
||||||
|
|
||||||
|
$("#about").onclick = function(){
|
||||||
|
aboutDOM.setAttribute("about","yes");
|
||||||
|
aboutDOM.style.top = "40px";
|
||||||
|
|
||||||
|
// Hi
|
||||||
|
About.showing = true;
|
||||||
|
Game.pause();
|
||||||
|
|
||||||
|
};
|
||||||
|
$("#close_about").onclick = function(){
|
||||||
|
|
||||||
|
aboutDOM.style.top = "";
|
||||||
|
//aboutDOM.setAttribute("about","yes");
|
||||||
|
|
||||||
|
// Bye
|
||||||
|
About.showing = false;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// SHOW END
|
||||||
|
subscribe("END_OF_DEMO", function(){
|
||||||
|
|
||||||
|
// Hi
|
||||||
|
About.showing = true;
|
||||||
|
Game.pause();
|
||||||
|
|
||||||
|
// Cut in
|
||||||
|
aboutDOM.removeAttribute("about");
|
||||||
|
aboutDOM.style.display = "none";
|
||||||
|
aboutDOM.style.top = "0px";
|
||||||
|
setTimeout(function(){
|
||||||
|
aboutDOM.style.display = "block";
|
||||||
|
},10);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Replay
|
||||||
|
$("#replay").onclick = function(){
|
||||||
|
|
||||||
|
// TODO: UI/SCREAM SOUNDS
|
||||||
|
|
||||||
|
// Cut out
|
||||||
|
aboutDOM.style.top = "";
|
||||||
|
aboutDOM.style.display = "none";
|
||||||
|
setTimeout(function(){
|
||||||
|
aboutDOM.style.display = "block";
|
||||||
|
},100);
|
||||||
|
|
||||||
|
// Bye
|
||||||
|
About.showing = false;
|
||||||
|
|
||||||
|
// Back to the beginning! (after a second)
|
||||||
|
setTimeout(function(){
|
||||||
|
publish("START_GAME");
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
$("#the_newsletter").setAttribute("action", "https://sendy.ncase.me/subscribe");
|
|
||||||
|
|
||||||
})();
|
})();
|
|
@ -118,17 +118,25 @@ Game.pause = function(){
|
||||||
Game.pausedDOM.style.display = "block";
|
Game.pausedDOM.style.display = "block";
|
||||||
Howler.mute(true);
|
Howler.mute(true);
|
||||||
|
|
||||||
$("#paused").setAttribute("modal", Options.showing ? "yes" : "no" );
|
$("#paused").setAttribute("modal", (Options.showing||About.showing) ? "yes" : "no" );
|
||||||
|
|
||||||
};
|
};
|
||||||
window.addEventListener("blur", Game.pause);
|
window.addEventListener("blur", Game.pause);
|
||||||
Game.onUnpause = function(){
|
Game.onUnpause = function(){
|
||||||
if(Game.paused && !Options.showing){
|
if(Game.paused && !(Options.showing||About.showing)){
|
||||||
Game.paused = false;
|
Game.paused = false;
|
||||||
Game.pausedDOM.style.display = "none";
|
Game.pausedDOM.style.display = "none";
|
||||||
Howler.mute(false);
|
Howler.mute(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Game.pausedDOM.onclick = function(){
|
||||||
|
if(Options.showing){
|
||||||
|
publish("hide_options");
|
||||||
|
}
|
||||||
|
if(About.showing){
|
||||||
|
$("#close_about").onclick();
|
||||||
|
}
|
||||||
|
};
|
||||||
window.addEventListener("click", Game.onUnpause);
|
window.addEventListener("click", Game.onUnpause);
|
||||||
window.addEventListener("touchstart", Game.onUnpause);
|
window.addEventListener("touchstart", Game.onUnpause);
|
||||||
|
|
||||||
|
|
|
@ -104,7 +104,7 @@ function BG_Intro(){
|
||||||
20
|
20
|
||||||
]
|
]
|
||||||
|
|
||||||
var ticker = 16;//0;
|
var ticker = 0; //16;//0;
|
||||||
var frameTicker = ticker;
|
var frameTicker = ticker;
|
||||||
var parallaxTicker = 0;
|
var parallaxTicker = 0;
|
||||||
var SHOWN_PLAY_BUTTON = false;
|
var SHOWN_PLAY_BUTTON = false;
|
||||||
|
|
|
@ -160,13 +160,31 @@ ABOUT / END DEMO
|
||||||
******************************************************************************************************/
|
******************************************************************************************************/
|
||||||
|
|
||||||
#end_demo{
|
#end_demo{
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0; left:0;
|
top:600px;
|
||||||
|
left:0;
|
||||||
|
|
||||||
background: #2E2E2E;
|
background: #2E2E2E;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
/* Spring OUT only */
|
||||||
|
-webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */
|
||||||
|
-webkit-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
||||||
|
-moz-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
||||||
|
-o-transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
||||||
|
transition: top 500ms cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */
|
||||||
|
|
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1); /* older webkit */
|
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
||||||
|
-moz-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
||||||
|
-o-transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390);
|
||||||
|
transition-timing-function: cubic-bezier(0.350, 0.005, 0.370, 1.390); /* custom */
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
#end_demo_tbc{
|
#end_demo_tbc{
|
||||||
background: url(../sprites/end_demo/tbc.png);
|
background: url(../sprites/end_demo/tbc.png);
|
||||||
|
@ -301,6 +319,27 @@ ABOUT / END DEMO
|
||||||
background-position: -200px;
|
background-position: -200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#end_demo #end_demo_tbc{ display: block; }
|
||||||
|
#end_demo #end_words1{ display: inline; }
|
||||||
|
#end_demo #end_words2{ display: none; }
|
||||||
|
#end_demo #replay{ display: block; }
|
||||||
|
#end_demo #close_about{ display: none; }
|
||||||
|
|
||||||
|
#end_demo[about=yes]{
|
||||||
|
padding-top: 25px;
|
||||||
|
height: 490px;
|
||||||
|
}
|
||||||
|
#end_demo[about=yes] #end_demo_tbc{ display: none; }
|
||||||
|
#end_demo[about=yes] #end_words1{ display: none; }
|
||||||
|
#end_demo[about=yes] #end_words2{ display: inline; }
|
||||||
|
#end_demo[about=yes] #replay{ display: none; }
|
||||||
|
#end_demo[about=yes] #close_about{
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
width: 50px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/******************************************************************************************************
|
/******************************************************************************************************
|
||||||
|
|
||||||
|
@ -336,7 +375,7 @@ OPTIONS
|
||||||
#text_speed_preview{
|
#text_speed_preview{
|
||||||
height: 1.3em;
|
height: 1.3em;
|
||||||
}
|
}
|
||||||
#options_ok{
|
#close_about, #options_ok{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background: #000;
|
background: #000;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
|
@ -351,7 +390,7 @@ OPTIONS
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
#options_ok:hover{
|
#close_about:hover, #options_ok:hover{
|
||||||
background: #666;
|
background: #666;
|
||||||
top:-2px;
|
top:-2px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue