heck yeah cute anim

index.html

@@ -23,8 +23,11 @@
 
 <script src="scripts/game/Game.js"></script>
 <script src="scripts/game/Sprite.js"></script>
-<script src="scripts/game/Beebee.js"></script>
 <script src="scripts/game/HP.js"></script>
 <script src="scripts/game/SceneSetup.js"></script>
+<script src="scripts/game/BGAnxiety.js"></script>
+
+<script src="scripts/game/Hong.js"></script>
+<script src="scripts/game/Beebee.js"></script>
 
 <script src="scripts/main.js"></script>

scenes/demo.md

@@ -10,38 +10,50 @@ Oh no!
 
 # demo-attacks
 
+`publish("beebee",["normal"])`
+
 [Attack 10 points](#demo-attack-low)
 
 [Attack 20 points](#demo-attack-med)
 
 [Attack 50%](#demo-attack-hi)
 
+# attack
+
+`publish("beebee",["scream"])`
+
+`publish("hong",["shock"])`
+
+(...1500)
+
+{{if HP.hong==0}} (#dead) {{/if}}
+
+`publish("hong",["normal"])`
+
+(#demo-attacks)
+
 # demo-attack-low
 
 `HP.attackHong("10p")`
 
-{{if HP.hong==0}} (#dead) {{/if}}
-
-(#demo-attacks)
+(#attack)
 
 # demo-attack-med
 
 `HP.attackHong("20p")`
 
-{{if HP.hong==0}} (#dead) {{/if}}
-
-(#demo-attacks)
+(#attack)
 
 # demo-attack-hi
 
 `HP.attackHong("50%")`
 
-{{if HP.hong==0}} (#dead) {{/if}}
-
-(#demo-attacks)
+(#attack)
 
 # dead
 
+`publish("beebee",["normal_speak"])`
+
 i am ded
 
 > u r ded

scripts/game/BGAnxiety.js

@@ -0,0 +1,108 @@
+/******************************
+
+A cool floating-squares dark background...
+or maybe CA?
+
+******************************/
+
+function BGAnxiety(){
+
+	var self = this;
+
+	// Moving white boxes
+	var BG_WIDTH = 360;
+	var BG_HEIGHT = 450;
+	self.boxes = [];
+	self.resetBox = function(box, startInView){
+		
+		// Random size
+		box.w = box.h = Math.random()*200 + 100;
+
+		// Start in view?
+		if(startInView){
+			// Random position
+			box.x = Math.random()*(BG_WIDTH+box.w*2) - box.w;
+			box.y = Math.random()*(BG_HEIGHT+box.h*2) - box.h;
+		}
+
+		// Move horizontal-only or vertical-only
+		if(Math.random()<0.5){
+			box.velX = (Math.random()>0.5 ? -1 : 1) * (Math.random()*0.8+0.2);
+			box.velY = 0;
+		}else{
+			box.velX = 0;
+			box.velY = (Math.random()>0.5 ? -1 : 1) * (Math.random()*0.8+0.2);
+		}
+
+		// If NOT start in view, use Velocity to determine where to put box
+		if(!startInView){
+
+			// Horizontal
+			if(box.velY==0){
+				box.y = Math.random()*(BG_HEIGHT+box.h*2) - box.h;
+				if(box.velX>0){ // ltr
+					box.x = -box.w;
+				}else{ // rtl
+					box.x = BG_WIDTH;
+				}
+			}
+
+			// Vertical
+			if(box.velX==0){
+				box.x = Math.random()*(BG_WIDTH+box.w*2) - box.w;
+				if(box.velY>0){ // utd
+					box.y = -box.h;
+				}else{ // dtu
+					box.y = BG_HEIGHT;
+				}
+			}
+
+		}
+
+	};
+	self.isBoxOutOfSight = function(box){
+		if(box.x<-box.w) return true;
+		if(box.y<-box.h) return true;
+		if(box.x>BG_WIDTH) return true;
+		if(box.y>BG_HEIGHT) return true;
+		return false;
+	};
+	self.updateBox = function(box){
+		
+		// Move it
+		box.x += box.velX;
+		box.y += box.velY;
+
+		// If it's out of sight, reset it
+		if(self.isBoxOutOfSight(box)){
+			self.resetBox(box);
+		}
+
+	};
+	self.drawBox = function(box, ctx){
+		ctx.fillStyle = "rgba(255,255,255,0.03)";
+		ctx.fillRect(box.x, box.y, box.w, box.h);
+	};
+	for(var i=0; i<40; i++){
+		var box = {};
+		self.resetBox(box, true);
+		self.boxes.push(box);
+	}
+
+	self.draw = function(ctx){
+
+		// A big ol' black box
+		ctx.fillStyle = "#111111";
+		ctx.fillRect(0,0, BG_WIDTH, BG_HEIGHT);
+
+		// Moving white boxes
+		self.boxes.forEach(function(box){
+			self.updateBox(box);
+		});
+		self.boxes.forEach(function(box){
+			self.drawBox(box, ctx);
+		});
+
+	};
+
+}

scripts/game/Beebee.js

@@ -8,47 +8,74 @@ function Beebee(){
 	self.sprite = new Sprite({
 		image: beebeeImage,
 		grid:{
-			width: 1,
-			height: 2
+			width: 2,
+			height: 3
 		},
 		frame:{
-			width: 720,
-			height: 500
+			width: 600,
+			height: 400
 		},
 		anchor:{
-			x: 300,
-			y: 230
+			x: 425/2,
+			y: 325/2
 		},
 		frameNames:[
+			"normal_look_phone",
 			"normal",
-			"panic",
-			"yay"
+			"normal_speak",
+			"",
+			"scream",
+			"scream_2"
 		],
-		x: 300,
-		y: 430,
-		rotation: 0,
-		scale: 1,
-		squash: 1
+		x: 270,
+		y: 405
 	});
 
 	// Draw
-	var ticker = 1;
+	var ticker = 0;
 	self.draw = function(ctx){
 
-		// Bouncing based on frame!
-		ticker += 1/20;
-		if(self.sprite.currentFrameName == "panic"){
-			ticker += 1;
+		var fname = self.sprite.currentFrameName;
+
+		// Normal: Breathe fast!
+		if(fname.substr(0,6) == "normal"){
+			self.sprite.breatheSpeed = 0.8;
+			self.sprite.breatheAmp = 0.01;
+		}
+
+		// Scream: Loop between scream 1/2!
+		if(fname.substr(0,6) == "scream"){
+			self.sprite.breatheSpeed = 0;
+			self.sprite.breatheAmp = 0;
+			if(ticker<=0){
+				ticker=5;
+				if(fname=="scream") self.sprite.gotoFrameByName("scream_2");
+				if(fname=="scream_2") self.sprite.gotoFrameByName("scream");
+			}else{
+				ticker--;
+			}
 		}
-		self.sprite.squash = 1 + Math.sin(ticker)*0.05;
 
 		// Draw me!
 		self.sprite.draw(ctx);
 
 	};
 
-	subscribe("beebee", function(frameName){
-		self.sprite.gotoFrameByName(frameName);
+	// When going to frames...
+	subscribe("beebee", function(fname){
+
+		self.sprite.gotoFrameByName(fname);
+
+		// Bounce transition
+		self.sprite.bounce = 1.1;
+		if(fname=="scream"){
+			self.sprite.bounce = 1.6;
+		}
+
 	});
 
+	// Kill
+	self.kill = function(){
+	};
+
 }

scripts/game/Game.js

@@ -114,6 +114,9 @@ Game.executeNextLine = function(){
 			case "code":
 				promiseNext = Game.executeCode(line);
 				break;
+			case "wait":
+				promiseNext = Game.executeWait(line);
+				break;
 		}
 
 		// If it's a goto, end THIS section immediately.
@@ -251,6 +254,21 @@ Game.executeCode = function(line){
 
 }
 
+// Execute wait! Just wait.
+Game.executeWait = function(line){
+	
+	// Get integer from (...NN)
+	var waitTime = parseInt(line.match(/^\(\.\.\.(\d+)\)/)[1].trim());
+	
+	// Delayed promise
+	var promiseDelayed = new pinkySwear();
+	setTimeout(function(){
+		promiseDelayed(true, []);
+	}, waitTime);
+	return promiseDelayed;
+
+};
+
 // Execute goto! Just goto.
 Game.executeGoto = function(line){
 	var gotoID = line.match(/^\(\#(.*)\)/)[1].trim().toLocaleLowerCase();
@@ -272,6 +290,10 @@ Game.getLineType = function(line){
 	var isCode = /^\`/.test(line);
 	if(isCode) return "code";
 
+	// Is it a wait?
+	var isWait = /^\(\.\.\.\d+\)/.test(line);
+	if(isWait) return "wait";
+
 	// Otherwise, it's text.
 	return "text";
 

scripts/game/HP.js

@@ -10,7 +10,7 @@ function HitPoints(){
 	self.dom = document.querySelector("#game_hp");
 	self.canvas = document.createElement("canvas");
 	self.canvas.width = 360 * 2;
-	self.canvas.height = 70 * 2;
+	self.canvas.height = 100 * 2;
 	self.canvas.style.width = self.canvas.width/2 + "px";
 	self.canvas.style.height = self.canvas.height/2 + "px";
 	self.context = self.canvas.getContext("2d");
@@ -110,6 +110,10 @@ 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);

scripts/game/Hong.js

@@ -0,0 +1,76 @@
+function Hong(){
+
+	var self = this;
+
+	// Sprite!
+	var beebeeImage = new Image();
+	beebeeImage.src = "sprites/hong.png";
+	self.sprite = new Sprite({
+		image: beebeeImage,
+		grid:{
+			width: 3,
+			height: 2
+		},
+		frame:{
+			width: 300,
+			height: 300
+		},
+		anchor:{
+			x: 160/2,
+			y: 225/2
+		},
+		frameNames:[
+			"_body_1",
+			"_body_2",
+			"",
+			"normal",
+			"smile",
+			"shock"
+		],
+		x: 80,
+		y: 400
+	});
+
+	// Breathe normally
+	self.sprite.breatheSpeed = 0.017;
+	self.sprite.breatheAmp = 0.014;
+
+	// Bounce slow
+	self.sprite.bounceHookes = 0.1;
+	self.sprite.bounceDamp = 0.9;
+
+	// First frame
+	self.sprite.gotoFrameByName("smile");
+
+	// Draw
+	var ticker = 0;
+	self.draw = function(ctx){
+
+		var fname = self.sprite.currentFrameName;
+
+		// Draw body FIRST
+		var bod_frame = (Math.floor(ticker/30)%2 == 0) ? "_body_1" : "_body_2";
+		ticker++;
+		self.sprite.gotoFrameByName(bod_frame);
+		self.sprite.draw(ctx);
+
+		// Draw face next
+		self.sprite.gotoFrameByName(fname);
+		self.sprite.draw(ctx);
+
+	};
+
+	// When going to frames...
+	subscribe("hong", function(fname){
+		self.sprite.gotoFrameByName(fname);
+		self.sprite.bounce = 1.05;
+		if(fname=="shock"){
+			self.sprite.bounce = 1/1.5;
+		}
+	});
+
+	// Kill
+	self.kill = function(){
+	};
+
+}

scripts/game/SceneSetup.js

@@ -10,6 +10,15 @@ SceneSetup.demo = function(){
 
 	Game.resetScene();
 
+	// Background
+	var bg = new BGAnxiety();
+	Game.scene.children.push(bg);
+
+	// Hong
+	var hong = new Hong();
+	Game.scene.children.push(hong);
+
+	// Beebee
 	var beebee = new Beebee();
 	Game.scene.children.push(beebee);
 

scripts/game/Sprite.js

@@ -65,6 +65,15 @@ function Sprite(config){
 	self.scale = config.scale || 1;
 	self.squash = config.squash || 1;
 	
+	// Helpers
+	self.breathe = 0;
+	self.breatheSpeed = 0;
+	self.breatheAmp = 0;
+	self.bounce = 1;
+	self.bounceVel = 0;
+	self.bounceDamp = 0.8;
+	self.bounceHookes = 0.4;
+
 	// Draw frame!
 	self.draw = function(ctx){
 
@@ -81,9 +90,19 @@ function Sprite(config){
 		var dy = self.y;
 		ctx.translate(dx, dy);
 
+		// Breathe
+		self.breathe += self.breatheSpeed;
+		var breatheSquash = 1 + Math.sin(self.breathe)*self.breatheAmp;
+
+		// Bounce
+		self.bounce += self.bounceVel;
+		self.bounceVel -= (self.bounce-1) * self.bounceHookes;
+		self.bounceVel *= self.bounceDamp;
+
 		// Scale
-		var scaleX = self.scale * self.squash;
-		var scaleY = self.scale / self.squash;
+		var totalSquash = self.squash * breatheSquash * self.bounce;
+		var scaleX = self.scale * totalSquash;
+		var scaleY = self.scale / totalSquash;
 		ctx.scale(scaleX, scaleY);
 
 		// Draw it!

styles/game.css

@@ -4,7 +4,7 @@ html,body{
 }
 body{
 	margin:0;
-	background: #ddd;
+	background: #000;
 }
 
 .no_select{
@@ -22,7 +22,7 @@ body{
 
 	width: 360px;
 	height: 600px;
-	background: #ccc;
+	background: #2E2E2E;
 
 	font-size: 20px;
 	font-family: Helvetica, Arial, sans-serif;
@@ -75,7 +75,24 @@ body{
 	opacity: 0;
 	left: 15px;
 	transition: all 0.3s ease-in-out;
+
+	/*border: 1px solid #ffffff;*/
 }
+/*
+.wolf-bubble:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 16px solid transparent;
+	border-left-color: #ffffff;
+	border-right: 0;
+	margin-top: -16px;
+	margin-right: -16px;
+}
+*/
 .wolf-bubble:after {
 	content: '';
 	position: absolute;
@@ -99,16 +116,19 @@ body{
 	position: absolute;
 	bottom:0;
 
-	background: #666;
+	background: #2E2E2E;
 	text-align: center;
 	color: #fff;
 	font-weight: normal;
 
 }
 #game_choices > div{
-	margin-bottom:0.5em;
+	padding: 0.25em 0;
 	cursor: pointer;
 }
+#game_choices > div:hover{
+	background: rgba(255,255,255,0.25);
+}
 
 /***********************************/
 /***********************************/