Skip to content

Commit

Permalink
Added a start menu screen, need a click to get rid of it
Browse files Browse the repository at this point in the history 
Improvements in understanding and cleaning up code
  • Loading branch information
@SimonMcCallum
SimonMcCallum committed May 7, 2012
1 parent b07f1e2 commit 140d414
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 67 deletions.
74 changes: 47 additions & 27 deletions BloodFlow/css/jsgame.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,67 +18,87 @@
top:-200px;
}
#game-div {
width : 600px;
width : 700px;
height: 350px;
margin-left: auto;
margin-right:auto;
display: block;
top: 0px;
left: 50%;
margin-left: -350px;
position: absolute;
}
#game-canvas {
width : 600px;
width : 700px;
height: 350px;
position: relative;
position: absolute;
zindex:-1;
}
#gamecanvas-div{
width : 700px;
height: 150px;
top:0px;
left: 50%;
margin-left: -350px;
position: absolute;
}
#graphcanvas-div {
#graphcanvas-div{
width : 400px;
height: 150px;
left: -37px;
top:-450px;
margin: 0px auto;
position: relative;
left: 70px;
top:-155px;
position: absolute;
}
#heartRateSlider {
width : 10px;
height: 100px;
left: 20px;
top:-320px;
position: relative;
left: 25px;
top:150px;
position: absolute;
}
#artHead {
width : 4px;
height: 40px;
left: 165px;
top:-525px;
position: relative;
top:60px;
position: absolute;
z-index:5;
}
#artArms{
width : 4px;
height: 40px;
left: 115px;
top:-505px;
position: relative;
top:120px;
position: absolute;
}
#artUpperLeg{
width : 4px;
height: 40px;
left: 115px;
top:-470px;
position: relative;
top:200px;
position: absolute;
}
#artLowerLeg{
width : 4px;
height: 40px;
left: 165px;
top:-450px;
position: relative;
top:250px;
position: absolute;
}
#submitScore {
left: 0px;
top:-50px;
position: relative;
top:500px;
position: absolute;
}
#play {
left: 0px;
top:-50px;
position: relative;
left: 20px;
top:400px;
position: absolute;
}
#menu {
width : 700px;
height: 350px;
top: 50px;
margin-left: auto;
margin-right:auto;
z-index:5;
position: absolute;
background: url('../images/menu.png');
}
Binary file added BloodFlow/images/menu.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 75 additions & 32 deletions BloodFlow/javascript/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
var gamejs = require('gamejs');
var draw = require('gamejs/draw');


//create a game state to put items into so they can be accessesd
var gameState= new Object();
document.gameState = gameState;

gameState.levels = [];
gameState.levels[0] = [[0,70],[20,80]];
gameState.level = 0;
var frameNumber = 0;
var exerciseTime = 0;
var levelNumber = 0;
var running = false;
gameState.running = false;
//document.frameNumber = frameNumber;
var FPS = 20;
var currentObjective = 70;

//This is the submission of score section.
function submitScore(value){
$.post("http://gamemetrics.otago.ac.nz/scores.php?score="+document.score.value+"&level="+levelNumber, {score: document.score.value, level: levelNumber} );
$.post("http://gamemetrics.otago.ac.nz/scores.php?score="+document.score.value+"&level="+gameState.level, {score: document.score.value, level: gameState.level} );
console.debug("http://gamemetrics.otago.ac.nz/scores.php?score="+document.score.value);
}

//respond to button push
$('#submitScore').click(submitScore);


$('#play').click(function() {running=!running; $('#play').button("option", "label", "custom label");});





Expand All @@ -40,7 +44,7 @@ var Control = function (rectCont, rectDest, slider)
slider.slider({ orientation: "vertical", min : 2 , max: 20, value: 10 });
slider.slider({
slide: function(event, ui) {
console.debug(this, event, ui);
//console.debug(this, event, ui);
document.gameState.controls.updateFlow(this.id, ui.value);
}
});
Expand Down Expand Up @@ -72,6 +76,7 @@ var Heart = function (maxrate)
{
Heart.superConstructor.apply(this, arguments);
this.rate= 0.5*maxrate;
this.maxrate = maxrate;
this.rateGoal= this.rate;
this.ratedelta= 0.0;
this.beat =0;
Expand All @@ -85,8 +90,14 @@ var Heart = function (maxrate)
document.heart.rateGoal = ui.value;
}
});


bar = new Object();
bar.x = 30;
bar.y = 90;
bar.width =15;
bar.range = 40;
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)/(maxrate-20))),bar.x+bar.width,bar.y+bar.range],0);




Expand All @@ -107,9 +118,17 @@ Heart.prototype.update = function(msDuration) {
this.ratedelta -= 0.2;
} */
this.ratedelta = this.rateGoal - this.rate;
console.debug(this.ratedelta+" "+this.rateGoal + this);
//console.debug(this.ratedelta+" "+this.rateGoal + this);
this.ratedelta = Math.min(Math.max(this.ratedelta, -5),+5);
this.rate += this.ratedelta;
console.debug(gamejs.backgroundImage,bar,this.rate);
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];
}

if (frameNumber%((FPS*60)/this.rate) < 1){
this.image = gamejs.transform.scale(this.originalImage, [this.dims[0] * (0.45),this.dims[1] * (0.45)]);
this.beat = this.beatDuration;
Expand Down Expand Up @@ -143,9 +162,19 @@ var Score = function (initScore)
};
gamejs.utils.objects.extend(Score, gamejs.sprite.Sprite);
Score.prototype.update = function(msDuration) {
console.debug(document.gameState.rates.headrate[30], document.gameState.rates.legsrate[30]);
// console.debug(document.gameState.rates.headrate[30], document.gameState.rates.legsrate[30]);
// console.debug(Math.abs((document.headrate[60])[1] - document.gameState.rates.legsrate[30][1]));
// console.debug(document.gameState.rates.headrate.length);
// if (document.gameState.rates.headrate.length > 30) {
// partialvalue = document.calcScore(document.gameState.rates.headrate[30][1],document.gameState.rates.legsrate[30][1]);
// this.value +=partialvalue;
// }
this.image = this.textcontainer.render('Score '+Math.round(this.value));
};
Score.prototype.updateScore = function(value) {
// console.debug(document.gameState.rates.headrate[30], document.gameState.rates.legsrate[30]);
// console.debug(Math.abs((document.headrate[60])[1] - document.gameState.rates.legsrate[30][1]));
console.debug(document.gameState.rates.headrate.length);
// console.debug(document.gameState.rates.headrate.length);
if (document.gameState.rates.headrate.length > 30) {
partialvalue = document.calcScore(document.gameState.rates.headrate[30][1],document.gameState.rates.legsrate[30][1]);
this.value +=partialvalue;
Expand All @@ -154,6 +183,7 @@ Score.prototype.update = function(msDuration) {
};


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


function main() {
Expand All @@ -164,17 +194,27 @@ function main() {

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

// inherit (actually: set prototype)
$("#play").button( "option", "icons", {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} );
$("#play").text("Play");
$("#play").click(function() {
if (gameState.running){
gameState.running =false;
$("#play").text("Play");
} else {
gameState.running =true;
$("#play").text("Pause");
}
});

var heart = new Heart(200);
document.heart = heart;
var score = new Score(0);
document.score = score;

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

//create a game state to put items into so they can be accessesd
var gameState= new Object();
document.gameState = gameState;
$("#menu").prepend('<img id="theImg" src=../images/menu.png)');
$("#menu").remove();

var rates = new Object();
rates.headrate = [];
Expand All @@ -194,7 +234,7 @@ gameState.rates=rates;
gameState.controls = controls;

gameState.controls.updateFlow = function (id,value){
console.debug(id,value,controls);
//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;
Expand All @@ -206,14 +246,10 @@ gameState.controls.updateFlow = function (id,value){
// chart.addTimeSeries(bloodflow1, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });



function basic(container) {
var i, graph;
//for (i = score.value/20; i < score.value/20 + 14; i += 0.05) {
// head.push([i, Math.sin(i)]);
// legs.push([i,document.heart.rate]);
//}

graph = Flotr.draw(container, [rates.headrate, rates.legsrate], {
graph = Flotr.draw(container, [rates.headrate, rates.legsrate, document.gameState.levels[document.gameState.level]], {
xaxis: {
minorTickFreq: 4, min : frameNumber-30, max : frameNumber+30
},
Expand All @@ -225,6 +261,9 @@ function basic(container) {
};





var sprites = new gamejs.sprite.Group();
sprites.add(heart);
sprites.add(score);
Expand All @@ -240,6 +279,7 @@ 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]);
basic(graphContainer);

Expand Down Expand Up @@ -269,7 +309,7 @@ function basic(container) {
function tick(msDuration) {
sprites.update(msDuration);

if(running){
if(gameState.running){
// var events = gamejs.event.get();
/*
events.forEach(function(event) {
Expand All @@ -285,7 +325,7 @@ function basic(container) {
*/
frameNumber +=1;

score.update(msDuration);
score.updateScore(3);

if (rates.headrate.length>30) {
rates.headrate.shift();
Expand All @@ -299,20 +339,23 @@ function basic(container) {
if (frameNumber < 500-30){
rates.legsrate.push([frameNumber+30,currentObjective]); //Update the graph with current value of heart
}
if(Math.random() < 0.02) {
currentObjective = 20+(Math.random()*160);
}
if(frameNumber%30 == 0) {
currentObjective = Math.min(Math.max(currentObjective+(-40 +(Math.random()*80)),20),200);
if (currentObjective<50) currentObjective += 10;
if (currentObjective>150) currentObjective -= 10;
}


basic(graphContainer);

// scoreText = textcontainer.render('Score '+heart.rate);
// scoreText.rect = new gamejs.Rect([500,10]);
if (frameNumber > 500){
running = false;
gameState.running = false;
submitScore();
}
} // end the running code
display.clear();
basic(graphContainer);
display.clear();
display.blit(gamejs.backgroundImage);
sprites.draw(display);
//score.draw(display);
Expand All @@ -323,5 +366,5 @@ function basic(container) {
gamejs.time.fpsCallback(tick, this, FPS);
}

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

0 comments on commit 140d414

Please sign in to comment.