Skip to content

Commit

Permalink
Updated the number of controls, improved menu
Browse files Browse the repository at this point in the history 
Working on the menu options and number of control
getting closer to the original design idea.  Now need to work on the
comparison rates and linking flow rate to need
  • Loading branch information
@SimonMcCallum
SimonMcCallum committed May 8, 2012
1 parent 140d414 commit c42e1c4
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 33 deletions.
4 changes: 1 addition & 3 deletions BloodFlow/css/jsgame.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,9 @@
#artHead {
width : 4px;
height: 40px;
left: 165px;
left: 15px;
top:60px;
position: absolute;
z-index:5;
}
#artArms{
width : 4px;
Expand Down Expand Up @@ -100,5 +99,4 @@
margin-right:auto;
z-index:5;
position: absolute;
background: url('../images/menu.png');
}
127 changes: 97 additions & 30 deletions BloodFlow/javascript/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,26 @@ $('#submitScore').click(submitScore);



var Control = function (rectCont, rectDest, slider)
var Control = function (rectCont, rectDest, slider, colour, rate)
{
this.radius = 20; //outside radius
this.radius = 30; //outside radius
this.flow = 10; //this is the current flow through the control

this.rate = rate;
Control.superConstructor.apply(this, arguments);
this.originalImage = gamejs.image.load("images/Artery.png");
this.dims = this.originalImage.getSize();
this.image = gamejs.transform.scale(this.originalImage, [1,1]);
this.colour = colour;
this.rect = gamejs.Rect(rectCont);
this.rectCont = rectCont;
var rectD = [];
slider.slider({ orientation: "vertical", min : 2 , max: 20, value: 10 });
slider.slider({ orientation: "vertical", min : 2 , max: 20, value: 10});
slider.css({ width : 6+"px", height: (this.radius*2)+"px", position:"absolute", top: (rectCont[1]-this.radius)+"px", left: (rectCont[0]-(this.radius+15))+"px"});
slider.slider({
slide: function(event, ui) {
//console.debug(this, event, ui);
document.gameState.controls.updateFlow(this.id, ui.value);

}
});

Expand All @@ -54,17 +57,17 @@ var Control = function (rectCont, rectDest, slider)
draw.circle(gamejs.backgroundImage, "#ff3366",rectCont, this.radius, 0);
draw.circle(gamejs.backgroundImage, "#ffffff",rectCont, this.flow, 0);

draw.line(gamejs.backgroundImage, "#ff3366",rectD,rectDest,2); //[this.rect.x+2, this.rect.y-radius], [this.rectD.x, this.rectD.y], 2);
draw.line(gamejs.backgroundImage, this.colour,rectD,rectDest,2); //[this.rect.x+2, this.rect.y-radius], [this.rectD.x, this.rectD.y], 2);
rectD[1] =rectCont[1]-this.radius;
draw.line(gamejs.backgroundImage, "#ff3366",rectD,rectDest,2); //[this.rect.x+2, this.rect.y-radius], [this.rectD.x, this.rectD.y], 2);
draw.line(gamejs.backgroundImage, this.colour,rectD,rectDest,2); //[this.rect.x+2, this.rect.y-radius], [this.rectD.x, this.rectD.y], 2);
return this;
};

gamejs.utils.objects.extend(Control, gamejs.sprite.Sprite);
Control.prototype.update = function(msDuration) {
draw.circle(gamejs.backgroundImage, "#ffffff",this.rectCont, this.radius+1, 0);
draw.circle(gamejs.backgroundImage, "#ff3366",this.rectCont, this.radius, 0);
draw.circle(gamejs.backgroundImage, "#cccccc",this.rectCont, this.flow, 0);
draw.circle(gamejs.backgroundImage, "#ffffff" ,this.rectCont, this.flow, 0);
};
Control.prototype.setFlow = function(value) {
this.flow = Math.max(Math.min(value,radius-2, 2));
Expand Down Expand Up @@ -125,8 +128,8 @@ Heart.prototype.update = function(msDuration) {
draw.rect(gamejs.backgroundImage, "#ff0000",[bar.x,bar.y,bar.x+bar.width,bar.y+bar.range],2);
draw.rect(gamejs.backgroundImage, "#ff0000",[bar.x,bar.y+(bar.range*((this.rate-20)/(this.maxrate-20))),bar.x+bar.width,bar.y+bar.range],0);
if (document.gameState.running == false){
document.gameState.rates.headrate[document.gameState.rates.headrate.length-2]=[frameNumber-1,document.heart.rate];
document.gameState.rates.headrate[document.gameState.rates.headrate.length-1]=[frameNumber ,document.heart.rate];
// document.gameState.rates.headrate[document.gameState.rates.headrate.length-2]=[frameNumber-1,document.heart.rate];
// document.gameState.rates.headrate[document.gameState.rates.headrate.length-1]=[frameNumber ,document.heart.rate];
}

if (frameNumber%((FPS*60)/this.rate) < 1){
Expand Down Expand Up @@ -184,18 +187,46 @@ Score.prototype.updateScore = function(value) {


//*********************Main ******************************

function loading() {
var menu = new Object();
menu.fade = false;
frameNumber=0;

$("#menu").css({background: "url('images/menu.png')"});
$("#playGame").button();
$("#playGame").position({of:$("#menu"), at: "center bottom", offset: "-50 -150"});
$("#playGame").text(" Level 1 ");
$("#playGame").click(function() {
menu.fade= true;
});
function loadtick(msDuration) {
if (menu.fade) {
frameNumber++;
$("#menu").css({opacity: (10-frameNumber)/10});
}
if (frameNumber>10){
gamejs.time.deleteCallback(loadtick, FPS);
$("#menu").hide();
main();
}
}
gamejs.time.fpsCallback(loadtick, this, FPS);
return;
}

function main() {

var display = gamejs.display.setMode([700, 480]);
// var bloodflow1 = new TimeSeries();
// var chart = new SmoothieChart({resetBounds: false});
// var chart = new Flotr();

frameNumber=0;
gameState.running =false;

gamejs.backgroundImage = gamejs.image.load("images/background.png");

$("#play").button( "option", "icons", {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} );
$("#play").text("Play");
$("#play").button();
$("#play").text(" Play ");
$("#play").click(function() {
if (gameState.running){
gameState.running =false;
Expand All @@ -213,8 +244,10 @@ function main() {

var graphContainer = document.getElementById("graphcanvas-div");

$("#menu").prepend('<img id="theImg" src=../images/menu.png)');
$("#menu").remove();





var rates = new Object();
rates.headrate = [];
Expand All @@ -224,21 +257,41 @@ rates.lowerlegrate = [];
rates.upperlegrate = [];

var controls = new Object();
controls.head = new Control([200,80], [550,70],$("#artHead"));
controls.head = new Control([240,80], [550,70],$("#artHead"), "#ff6699", rates.headrate );
//controls.legs = new Control([300,120], [620,70]);
controls.arms = new Control([150,140], [495,110],$("#artArms"));
controls.upperLeg = new Control([150,220], [530,250],$("#artUpperLeg"));
controls.lowerLeg = new Control([200,270], [530,320],$("#artLowerLeg"));
controls.arms = new Control([190,175], [495,110],$("#artArms"), "#ff9966", rates.armsrate);
controls.upperLeg = new Control([240,270], [530,250],$("#artUpperLeg"), "#6699ff", rates.upperlegrate );
//controls.lowerLeg = new Control([200,270], [530,320],$("#artLowerLeg"));

gameState.rates=rates;
gameState.controls = controls;

gameState.controls.updateFlow = function (id,value){
//console.debug(id,value,controls);
if (id == "artHead" ) controls.head.flow = value;
if (id == "artArms" ) controls.arms.flow = value;
if (id == "artLowerLeg" ) controls.lowerLeg.flow = value;
if (id == "artUpperLeg" ) controls.upperLeg.flow = value;
if (id == "artHead" ) {
controls.head.flow = value;
if (document.gameState.running == false){
controls.head.rate[0]=[frameNumber-1,value*10];
controls.head.rate[1]=[frameNumber ,value*10];
}
}
if (id == "artArms" ) {
controls.arms.flow = value;
if (document.gameState.running == false){
controls.arms.rate[0]=[frameNumber-1,value*10];
controls.arms.rate[1]=[frameNumber ,value*10];
}
}
if (id == "artLowerLeg" ) {
controls.lowerLeg.flow = value;
}
if (id == "artUpperLeg" ) {
controls.upperLeg.flow = value;
if (document.gameState.running == false){
controls.upperLeg.rate[0]=[frameNumber-1,value*10];
controls.upperLeg.rate[1]=[frameNumber ,value*10];
}
}
console.debug(controls.head.flow);

};
Expand All @@ -249,7 +302,7 @@ gameState.controls.updateFlow = function (id,value){

function basic(container) {

graph = Flotr.draw(container, [rates.headrate, rates.legsrate, document.gameState.levels[document.gameState.level]], {
graph = Flotr.draw(container, [rates.headrate, rates.armsrate, rates.upperlegrate, rates.legsrate, document.gameState.levels[document.gameState.level]], {
xaxis: {
minorTickFreq: 4, min : frameNumber-30, max : frameNumber+30
},
Expand All @@ -270,7 +323,7 @@ function basic(container) {
sprites.add(controls.head);
sprites.add(controls.arms);
sprites.add(controls.upperLeg);
sprites.add(controls.lowerLeg);
// sprites.add(controls.lowerLeg);


sprites.update(0);
Expand All @@ -279,8 +332,16 @@ function basic(container) {
for(var i=0;i<30;i++){
rates.legsrate.push([i,currentObjective]);
}
rates.headrate.push([frameNumber-1,heart.rate]);
rates.headrate.push([frameNumber,heart.rate]);
rates.headrate.push([frameNumber-1,controls.head.flow]);
rates.headrate.push([frameNumber,controls.head.flow]);
rates.armsrate.push([frameNumber-1,controls.arms.flow]);
rates.armsrate.push([frameNumber,controls.arms.flow]);
rates.upperlegrate.push([frameNumber-1,controls.upperLeg.flow]);
rates.upperlegrate.push([frameNumber,controls.upperLeg.flow]);




basic(graphContainer);


Expand Down Expand Up @@ -331,7 +392,9 @@ function basic(container) {
rates.headrate.shift();
}

rates.headrate.push([frameNumber,heart.rate]); //Update the graph with current value of heart
rates.headrate.push([frameNumber,controls.head.flow*10]); //Update the graph with current value of heart
rates.armsrate.push([frameNumber,controls.arms.flow*10]); //Update the graph with current value of heart
rates.upperlegrate.push([frameNumber,controls.upperLeg.flow*10]); //Update the graph with current value of heart

if (rates.legsrate.length>60) {
rates.legsrate.shift();
Expand All @@ -350,8 +413,12 @@ function basic(container) {
// scoreText = textcontainer.render('Score '+heart.rate);
// scoreText.rect = new gamejs.Rect([500,10]);
if (frameNumber > 500){
gameState.running = false;
submitScore();
gameState.running = false;
gamejs.time.deleteCallback(tick, FPS);
$("#menu").css({opacity: 1});
$("#menu").show(200);
loading();
}
} // end the running code
basic(graphContainer);
Expand All @@ -367,4 +434,4 @@ function basic(container) {
}

gamejs.preload(["images/background.png","images/heart.png","images/Artery.png","images/menu.png"]);
gamejs.ready(main);
gamejs.ready(loading);

0 comments on commit c42e1c4

Please sign in to comment.