NotDotTeam/anxiety
NotDotTeam
/
anxiety
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

click to advance option

This commit is contained in:
Nicky Case 2019-05-02 11:55:41 -04:00
parent 06eb19103e
commit d7daec1e03
12 changed files with 203 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -15,6 +15,11 @@
<div id="game_hp"></div>
<div id="game_choices"></div>
<!-- Click to Advance-->
<div id="click_to_advance">
👆click anywhere
</div>
<!-- Bottom Corner Tabs -->
<div id="gear" style="display:none" onclick="publish('show_options')">
<div class="icon">⚙</div>
@ -120,8 +125,15 @@
<!-- OPTIONS -->
<div id="options">
<div id="text_speed_preview"></div>
<input id="text_speed_slider" type="range" min=0 value=2 max=4 step=1/>
<div style="width: 150px; height: 63px; float: left;">
<div id="text_speed_preview"></div>
<input id="text_speed_slider" type="range" min=0 value=0.5 max=1 step="0.01"/>
</div>
<div style="float: right; width: 135px; height: 63px;">
And advance
<div id="text_automatic_toggle">on click</div>
</div>
<div style="clear:both"></div>
<span id="volume_options" style="display:none">
<div>Volume:</div>
<input id="volume_slider" type="range" min=0 max=1 value=1 step="0.01"/>

2
scenes/act1.md
View File

@ -26,7 +26,7 @@ n: QUICK, WARN THEM!
`Game.OVERRIDE_TEXT_SPEED = 1.25;`
n4: (LET _YOUR_ WOLF COME OUT TO PLAY! PICK WHAT _YOUR_ ANXIETY WOULD BE MOST LIKELY TO SAY TO YOU)
n4: (LET _YOUR_ ANXIETY COME OUT TO PLAY! PICK WHAT _YOUR_ ANXIETY WOULD MOST LIKELY SAY TO YOU)
[You're eating alone for lunch! Again!](#act1a_alone)

26
scenes/intro.md
View File

@ -14,35 +14,15 @@
n3: Welcome! This is less of a "game", more of an interactive story. Hope you like reading, sucka
n3: So before we start, please choose your reading speed:
n3: So before we start, how would *you* like to read?
`publish("show_options_bottom")`
# intro-start-2
{{if Game.TEXT_SPEED>=100}}
n3: Great! Slowwwly does it.
{{/if}}
n3: Great! Note: you can always change text/audio options with the ⚙️ icon below.
{{if Game.TEXT_SPEED==80}}
n3: About as relaxing as a game about anxiety's gonna get.
{{/if}}
{{if Game.TEXT_SPEED==60}}
n3: Great! Default, the best non-choice choice.
{{/if}}
{{if Game.TEXT_SPEED==40}}
n3: Fast it is! Don't blink!
{{/if}}
{{if Game.TEXT_SPEED==0}}
n3: Great! Now you can read – or not – at your own pace. (Click anywhere to advance)
{{/if}}
n3: Also, you can always change text/audio options by clicking the ⚙️ icon below. {{if Game.TEXT_SPEED==0}}(again, click to advance){{/if}}
n3: Now, let's begin our story... {{if Game.TEXT_SPEED==0}}(you know the drill){{/if}}
n3: Now, let's begin our story...
`clearText()`

20
scripts/game/Character.js
View File

@ -14,7 +14,8 @@ Loader.addImages([
{ id:"fear_harm", src:"sprites/ui/fear_harm.png" },
{ id:"fear_alone", src:"sprites/ui/fear_alone.png" },
{ id:"fear_bad", src:"sprites/ui/fear_bad.png" }
{ id:"fear_bad", src:"sprites/ui/fear_bad.png" },
{ id:"fear_captions", src:"sprites/ui/fear_captions.png" }
]);
@ -42,6 +43,16 @@ function Character(spriteConfig, animLoops){
});
} );
// Fear caption sprites
self.fearCaptionSprite = new Sprite({
image: Library.images.fear_captions,
grid: { width:1, height:3 },
frame: { width:200, height:200 },
anchor: { x:100/2, y:100/2 },
scale: 0.75,
frameNames:["harm","alone","bad"]
});
// Go To Frames
self.bounce = 1;
self.bounceVel = 0;
@ -151,6 +162,13 @@ function Character(spriteConfig, animLoops){
var icon = self.fears[attackedIconShown];
icon.draw(ctx);
var caption = self.fearCaptionSprite;
caption.gotoFrameByName(attackedIconShown);
caption.x = icon.x;
caption.y = icon.y-37;
caption.alpha = icon.alpha;
caption.draw(ctx);
attackedTimer += 1/60;
if(attackedTimer>1.75){

46
scripts/game/Game.js
View File

@ -150,10 +150,23 @@ Game.setTimeout = function(callback, interval){
};
// TODO: SKIP TEXT WHEN CLICK ANYWHERE (but NOT capture in choice)
Game.clearAllTimeouts = function(){
Game.timeoutCallbacks.forEach(function(tc){
tc.callback();
});
Game.timeoutCallbacks = [];
// Is this DURING while someone is talking?
var isInterrupting = (Game.WHO_IS_SPEAKING!=null);
// If not, clear all
// Otherwise, clear all BUT last one... UNLESS there's only one left
if(Game.timeoutCallbacks.length==1) isInterrupting=false;
for(var i=0; i<Game.timeoutCallbacks.length; i++){
if(isInterrupting && i==Game.timeoutCallbacks.length-1) break;
Game.timeoutCallbacks[i].callback();
}
if(isInterrupting){
Game.timeoutCallbacks = [ Game.timeoutCallbacks[Game.timeoutCallbacks.length-1] ]; // last one
}else{
Game.timeoutCallbacks = [];
}
};
Game.canvas.addEventListener("click", Game.clearAllTimeouts);
Game.canvas.addEventListener("touchstart", Game.clearAllTimeouts);
@ -266,7 +279,8 @@ Game.clearText = function(){
window.clearText = Game.clearText;
// Execute text! Just add it to text DOM.
Game.TEXT_SPEED = 60; // 70;
Game.TEXT_SPEED = 50;
Game.CLICK_TO_ADVANCE = true;
Game.OVERRIDE_TEXT_SPEED = 1;
Game.FORCE_TEXT_DURATION = -1;
Game.WHO_IS_SPEAKING = null; // "h", "b", "n" etc...
@ -515,12 +529,26 @@ Game.executeText = function(line){
// Return promise
var nextLineDelay = Game.TEXT_SPEED*7; // don't override this
if(dialogue.slice(-1)=="-") nextLineDelay=0; // sudden interrupt!
if(Game.TEXT_SPEED<10){ // IF IT'S CLICK-TO-ADVANCE, INFINITE TIMEOUT.
if(Game.CLICK_TO_ADVANCE){ // IF IT'S CLICK-TO-ADVANCE, "INFINITE" TIMEOUT.
nextLineDelay = 1000*10000; // ten thousand seconds
}
// No one's speaking anymore.
Game.setTimeout(function(){
Game.WHO_IS_SPEAKING = null; // DONE WITH IT.
resolve();
Game.WHO_IS_SPEAKING = null;
}, interval);
// Show the clicky UI
if(Game.CLICK_TO_ADVANCE){
Game.setTimeout(function(){
publish("show_click_to_advance");
}, interval+Game.TEXT_SPEED*2);
}
// DONE WITH IT
Game.setTimeout(function(){
publish("hide_click_to_advance");
resolve(); // DONE WITH IT.
}, interval+nextLineDelay);
});
@ -637,7 +665,7 @@ Game.executeWait = function(line){
var waitTime = parseInt(line.match(/^\(\.\.\.(\d+)\)/)[1].trim());
// Unless it's click to advance, then IGNORE ALL WAITS
if(Game.TEXT_SPEED<10 && waitTime<=1000){ // hack: unless the wait is long.
if(Game.CLICK_TO_ADVANCE && waitTime<=1000){ // hack: unless the wait is long.
waitTime = 0; // TODO: Tag anim-waits, do not ignore.
}

88
scripts/game/HP.js
View File

@ -88,9 +88,13 @@ function HitPoints(){
// Draw
self.leftShake = 0;
self.leftWidth = 360;
self.leftRed = self.leftWhite = 1;
//self.leftWidth = 360;
//self.leftWhiteWidth = 360;
self.rightShake = 0;
self.rightWidth = 360;
self.rightRed = self.rightWhite = 1;
//self.rightWidth = 360;
//self.rightWhiteWidth = 360;
self.drawHalf = function(ctx, isRight){
ctx.save();
@ -100,36 +104,59 @@ function HitPoints(){
var hp = isRight ? self.beebee : self.hong;
// Shaking
if(self[side+"Shake"]>0){
var stoppedShaking = (self[side+"Shake"]==0);
if(stoppedShaking){
self[side+"Shake"]=0;
}else{
var amp = self[side+"Shake"]/7;
var shakeY = Math.sin(self[side+"Shake"]*1.3)*amp;
ctx.translate(0,shakeY);
self[side+"Shake"]--;
}else{
self[side+"Shake"]=0;
}
// BLACK
var sx=isRight ? 360 : 0, sy=0, sw=360, sh=150;
ctx.drawImage(self.image, sx,sy,sw,sh, sx/2,sy/2,sw/2,sh/2); // black
// RED
var hpRatio = (hp+32)/(100+32); // 100,0 => 1,0.3
sw = 360 * hpRatio;
sy = 150;
self[side+"Width"] = self[side+"Width"]*0.8 + sw*0.2;
sw = self[side+"Width"];
if(sw>88){
if(isRight){
ctx.drawImage(self.image, sx+(360-sw),sy,sw,sh, 360/2,0,sw/2,sh/2);
}else{
ctx.drawImage(self.image, sx,sy,sw,sh, (360-sw)/2,0,sw/2,sh/2);
// Damage
if(!isRight){ // Hong
var d = self.hong/100;
self.leftRed = self.leftRed*0.8 + d*0.2;
if(stoppedShaking){
if(self.leftWhite > self.leftRed){
self.leftWhite -= 0.001;
}
}
}else{
var d = self.beebee/100;
self.rightRed = self.rightRed*0.8 + d*0.2;
if(stoppedShaking){
if(self.rightWhite > self.rightRed){
self.rightWhite -= 0.001;
}
}
}
if(self[side+"WhiteWidth"]>sw && self[side+"Shake"]<=0){
self[side+"WhiteWidth"] -= 0.6;
}
// BG: Black
var sx=isRight ? 360 : 0, sy=200*0, sw=360, sh=200;
ctx.drawImage(self.image, sx,sy,sw,sh, sx/2,0,sw/2,sh/2);
// Draw White INSIDE (source-atop)
if(self[side+"Shake"]==0){ // if not shaking, slowly reduce
if( self[side+"WhiteWidth"] > self[side+"Width"] ){
self[side+"WhiteWidth"] -= 0.1;
}
}
var sx=isRight ? 360 : 0, sy=200*1, sw=360, sh=200;
var offset = (1-self[side+"White"])*360;//self[side+"WhiteWidth"];
offset *= isRight ? -1 : 1;
ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(self.image, sx,sy,sw,sh, (sx+offset)/2,0,sw/2,sh/2);
// Red
var sx=isRight ? 360 : 0, sy=200*2, sw=360, sh=200;
var offset = (1-self[side+"Red"])*360;//self[side+"WhiteWidth"];
offset *= isRight ? -1 : 1;
ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(self.image, sx,sy,sw,sh, (sx+offset)/2,0,sw/2,sh/2);
// Restore
ctx.restore();
};
@ -140,19 +167,22 @@ function HitPoints(){
ctx.save();
ctx.scale(2,2);
// Draw BG
var sx=0, sy=600, sw=720, sh=200;
ctx.drawImage(self.image, sx,sy,sw,sh, 0,0,sw/2,sh/2);
// Draw Left & Right Sides
self.drawHalf(ctx, false);
self.drawHalf(ctx, true);
// Draw "Timer"
var sx=0, sy=450, sw=720, sh=150;
// Draw BG BELOW
ctx.globalCompositeOperation = "destination-over";
var sx=0, sy=200*4, sw=720, sh=200;
ctx.drawImage(self.image, sx,sy,sw,sh, 0,0,sw/2,sh/2);
// Draw "VS"
ctx.globalCompositeOperation = "source-over";
var sx=0, sy=200*3, sw=720, sh=200;
ctx.drawImage(self.image, sx,sy,sw,sh, 0,0,sw/2,sh/2);
ctx.restore();
};
}

63
scripts/game/Options.js
View File

@ -7,20 +7,6 @@ window.Options = {};
var text_speed_preview = $("#text_speed_preview");
var volume_slider = $("#volume_slider");
var SPEED_TEXTS = [
"Show text slowlyyyyy",
"Show text at a relaxed speed",
"Show text at the default speed",
"Show text at a brisk speed",
"All-at-once, click to advance"
];
var SPEEDS = [
100,
80,
60,
40,
0
];
text_speed_slider.oninput = function(){
updateText();
};
@ -29,6 +15,44 @@ window.Options = {};
Howler.volume(parseFloat(volume_slider.value));
};
var text_automatic_toggle = $("#text_automatic_toggle");
text_automatic_toggle.onclick = function(){
if(!Game.CLICK_TO_ADVANCE){
HOW_MANY_PROMPTS = 1;
}
Game.CLICK_TO_ADVANCE = !Game.CLICK_TO_ADVANCE;
text_automatic_toggle.innerHTML = Game.CLICK_TO_ADVANCE ? "on click" : "automatically";
};
///////////////////////////////////
// CLICK TO ADVANCE //
///////////////////////////////////
var HOW_MANY_PROMPTS = 2;
var ctaAlpha = 1;
var click_to_advance = $("#click_to_advance");
click_to_advance.style.display = "none";
subscribe("show_click_to_advance", function(){
if(HOW_MANY_PROMPTS>0){
click_to_advance.style.display = "block";
blinkCTA();
HOW_MANY_PROMPTS--;
}
});
subscribe("hide_click_to_advance", function(){
click_to_advance.style.display = "none";
});
var blinkCTA = function(){
if(click_to_advance.style.display=="block"){
ctaAlpha = (ctaAlpha==1) ? 0 : 1;
click_to_advance.style.opacity = ctaAlpha;
setTimeout(blinkCTA, 700);
}
};
///////////////////////////////////
// For previewing the text speed //
///////////////////////////////////
@ -61,17 +85,22 @@ window.Options = {};
var updateText = function(){
var i = parseInt(text_speed_slider.value);
var div = text_speed_preview;
Game.TEXT_SPEED = SPEEDS[i];
// Calculate text speed...
var t = parseFloat(text_speed_slider.value);
t = (1-t); // whoops, flip around
// Log slider, from 30 to 120, with 50 "in the middle"
// f(0)=20, f(0.5)=50(+30), f(1)=120(+100)
var speed = Math.round( 20 + Math.exp(t*2.5)*9 ); // close enough
Game.TEXT_SPEED = speed;
// Clear previous crap
_clearAllTimeouts();
div.innerHTML = "";
// What's the dialogue?
var dialogue = SPEED_TEXTS[i];
var dialogue = Game.TEXT_SPEED<80 ? "Speak this fast" : "Speak this slow";
// Put in the text
var span, chr;

2
scripts/intro/Intro_BG.js
View File

@ -104,7 +104,7 @@ function BG_Intro(){
20
]
var ticker = 0; //16;//0;
var ticker = 18;//0;
var frameTicker = ticker;
var parallaxTicker = 0;
var SHOWN_PLAY_BUTTON = false;

6
scripts/main.js
View File

@ -21,7 +21,7 @@ subscribe("START_GAME", function(){
$("#loading").style.display = "none";
Game.start();
SceneSetup.act1();
/*SceneSetup.act1();
//music('battle', {volume:0.5});
hong({body:"phone1"});
publish("hp_show");
@ -30,8 +30,8 @@ subscribe("START_GAME", function(){
_.hookuphole = true;
_.catmilk = true;
Game.goto("act1c");
Game.goto("act1c");*/
//Game.goto("intro");
Game.goto("intro");
});

BIN
sprites/ui/fear_captions.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
sprites/ui/hp.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 11 KiB

20
styles/game.css
View File

@ -394,6 +394,23 @@ OPTIONS
background: #666;
top:-2px;
}
#text_automatic_toggle{
border: 1px solid #fff;
border-radius: 5px;
padding: 1px 5px;
cursor: pointer;
}
#text_automatic_toggle:hover{
background:rgba(255,255,255,0.3);
}
#click_to_advance{
display: block;
position: absolute;
text-align: center;
width: 100%;
top: 254px;
color:#fff;
}
/*
Slider CSS by Noah Blon
@ -412,6 +429,9 @@ input[type="range"]{
width: 300px;
height: 30px;
}
#text_speed_slider{
width: 150px;
}
::-webkit-slider-runnable-track{
background: #ddd;
}