Jump to content

Need help with .js game on phone


vmars316

Recommended Posts

on the way to: reset()

I don't understand the purpose of

// Scores
game.scores.totalScore = document.getElementById("totalScore");
console.log(document.getElementById("totalScore"));
console.log(game.scores.totalScore);
It looks like document.getElementById("totalScore") returns:
<td style="width: 18%"> totalScore </td>
?What is the purpose of that?
Thanks
Link to comment
Share on other sites

  • Replies 73
  • Created
  • Last Reply

Top Posters In This Topic

That's the HTML element in which the score is displayed.

 

Do you know what getElementById() is?

Yes I do .

But why does 'document.getElementById("totalScore")' return

'<td style="width: 18%"> totalScore </td>'

instead of the value of 'document.getElementById("totalScore")' ?

 

And in general what is the purpose of , what is it actually doing:

game.scores.totalScore = document.getElementById("totalScore"); ?

Edited by vmars316
Link to comment
Share on other sites

All that line of code does is point to an element on the page. game.scores.totalScore just tells the program in which HTML element the score should be written.

 

The value you're looking for is not in game.scores.totalScore.

The actual values are stored in these variables:


// Counters
var totalScore = 0;
var totalShots = 0;
var oops = 0;
var hits = 0;
Link to comment
Share on other sites

Thanks ,


I would like to understand why the self.sprites = {

is there . And what is the name of this type of "self.sprites = {" structure .


<img id="cowpie" src="sprites/cowpie.png">

//

game.sprites.cowpie = document.getElementById("cowpie");

//

// HTML elements

self.sprites = {

background : null,

manufacturer : null,

cowpie : null

};

//

// Create a cowpie

self.createCowpie = function(x, y) {

var cowpie = new Cowpie(self.sprites.cowpie, x, y);

cowpie.game = this;

cowpies.push(cowpie);

};


Thanks

Link to comment
Share on other sites

self is also an object. sprites is a property of self that also contains an object. You cannot use var to set properties.

 

Objects can contain other objects and arrays as properties.

var a = {}; // This is an object
a.b = { // Property "b" is an object that contains a property "c" which is also an object
  c : {}
};
a.b.c.d = "Value"; // Object "c" has a property called "d" with a string as its value.
Link to comment
Share on other sites

The first one is a method that belongs to another object.

 

 

When a function is declared like this:

var f = function() {};

The function is only accessible in the lines of code following that function declaration.

 

When declared like this:

function f() {}

The function can be accessed from code that's written before it was declared.

Link to comment
Share on other sites

A bit confusing here:




Description seems to contradict itself :

Declared functions are not executed immediately. They are "saved for later use", and will be executed later,

when they are invoked (called upon).


Example

function myFunction(a, B) {

return a * b;

}


Semicolons are used to separate executable JavaScript statements.

Since a function declaration is not an executable statement,

it is not common to end it with a semicolon.

Thanks

Link to comment
Share on other sites

The major difference is hoisting, which that page talks about. This will run:

 

testFunc();

function testFunc() {
  alert('test');
}
This will cause an error about the function not being defined, because it doesn't get hoisted:

 

testFunc();

var testFunc = function() {
  alert('test');
}
Link to comment
Share on other sites

 

At what point in the program's execution do you think the game is ready to start?

 

Good point :

I really don't understand the sequence of program execution .

How can I track that

put a console.log after every statement ?

 

Thanks

Link to comment
Share on other sites

I don't see where the contradiction is. Function declarations are not executable, so they don't need to end with a semi-colon.

These two statements are what I am confused about :

1) Declared functions are not executed immediately. They are "saved for later use", and will be executed later,
when they are invoked (called upon).
2) Since a function declaration is not an executable statement,
Are 'Declared functions ' executable or not ?
Thanks
Link to comment
Share on other sites

Declared functions are not executed immediately. They are "saved for later use", and will be executed later,

when they are invoked (called upon).

If you do this:

 

function testfunc() {
  alert('test');
}
You aren't going to see that alert. All you did was define the function, it has not been executed until you actually run it:

 

testfunc();

Since a function declaration is not an executable statement,

That's not a very good way to phrase it. Function declarations are executed in the sense that they define the function. Then, at some point in the program you execute the actual function by calling or running it, which executes the statements inside the function body.
Link to comment
Share on other sites

Hello & Thanks ,

 

Pls , what is this code doing ,

What does it look like , a separate target1.hillartlies and one for target1.hillarylies ?

 

var target1 = new Target(hillarylies, hillarytrue, 128, 24);
target1.speed = 120 / 1000; // 120 pixels per second
I tried the things you suggested , but still get bad results .
Using console debug , I have a better understanding of what/when the interpreter is doing .
I am still stumped with how to code to make a pageReload give the same results as first time running .
I put some trace code in there , hoping to understand the code better .
But I am still stumped .
I need help , Pls show me how to debug this thing .
Here is my code :
[link]
[/link]
Here is my code:
Thanks
Link to comment
Share on other sites

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta charset="utf-8" />

<title>Reset</title>




-->

<style>

body {

background-color: black;

margin: 0;

padding: 0;

}

#assets { display: none; }

#canvasDiv { text-align: center; }

canvas { cursor: none; }

table {

margin: 0 auto;

color: #E1E1E1;

background-color: #732222;

height: 24px;

width: 800px;

border: none;

}

button { font-size: 1em; }

#buttonsArea {

color: #E1E1E1;

background-color: #732222;

width: 600px;

margin: 0 auto;

border: none;

}

</style>

</head>

<body>

<div>

<table>

<tr>

<td style="width: 18%"> totalScore </td>

<td id="totalScore" style="width: 5%"></td>

<td style="width: 18%"> oops! </td>

<td id="oopsScore" style="width: 5%"></td>

<td style="width: 18%"> goodHits </td>

<td id="goodHits" style="width: 5%"></td>

<td style="width:18%"> totalShots </td>

<td id="totalShots" style="width: 5%"></td>

</tr>

</table>

</div>

<!-- <div id="canvasDiv">

<canvas id="canvas" width="600" height="400" style="background-color:#992D2D"></canvas>

</div>

-->

<div align="center">

<table style="text-align: left; width: 100%;" border="0"

cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td style="width:70%";><p id="traceMsg">traceLog goes here:</p>

</td>

<td style="width:30%";> <canvas id="canvas" width="600" height="400"></canvas>

</td>

</tr>

</tbody>

</table>

</div>


<div id="buttonsArea">

<button id="pause">Pause</button>

<button id="play">Play</button>

<button id="left">Move left</button>

<button id="throw">Throw</button>

<button id="right">Move right</button>

</div>

<!-- </div> -->


<div id="assets">

<img id="lie02" src="sprites/lies02.png">

<img id="tru02" src="sprites/tru02.png">

<img id="cowpie" src="sprites/cowpie.png">

<img id="thrower" src="sprites/thrower.png">

<img id="bgCompound" src="sprites/bgCompound.jpeg">

<img id="manufacturer" src="sprites/manufacturer.png">

</div>


<script>

//debugger;

/* explain

Difference between Function constructor and function declaration

Functions created with the Function constructor do not create closures to their creation contexts;

they always are created in the global scope.

When running them, they will only be able to access their own local variables and global ones,

not the ones from the scope in which the Function constructor was called.

This is different from using eval with code for a function expression.

//function declaration

function foo() {}

Declared functions are not executed immediately. They are "saved for later use",

and will be executed later, when they are invoked (called upon).

Semicolons are used to separate executable JavaScript statements.

Since a function declaration is not an executable statement,

it is not common to end it with a semicolon.

All it can do is create an object variable parented by its current scope.

In contrast a Function Expression (by definition) is part of a larger construct.

If you want to create an anonymous function or assign a function to a prototype

or as a property of some other object you need a Function Expression.


// function expression

(function bar() {})


// function expression

x = function hello() {}


if (x) {

// function expression

function world() {}

}


// function declaration

function a() {

// function declaration

function b() {}

if (0) {

// function expression

function c() {}

}

}

*/

/***********/

/** Logic **/

/***********/


/* Initialize the game object */


function writeTraceLog(oneTraceLine){

traceCount ++;

document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine);

}

var gameLoopDraw = 0; var TargetSelfDraw = 0;

var targetsLengthVar = 0; // targetsLengthVar = targets.length ;

var traceCount = 1;

var canvas = document.getElementById("canvas");

var game = new Game(canvas);


// Sounds

game.sounds.splat = new Audio("sounds/CowMooSplat.mp3");

game.sounds.goodbye = new Audio("sounds/GoodBye-Female.mp3");

game.sounds.cheering = new Audio("sounds/cheeringCrowd.mp3");

game.sounds.oops = new Audio("sounds/oops.mp3");


// Sprites

game.sprites.background = document.getElementById("bgCompound");

game.sprites.manufacturer = document.getElementById("manufacturer");

game.sprites.cowpie = document.getElementById("cowpie");


// Scores explain

//points to an element on the page. game.scores.totalScore just tells the

//program in which HTML element the score should be written.

game.scores.totalScore = document.getElementById("totalScore");

game.scores.oops = document.getElementById("oopsScore");

game.scores.hits = document.getElementById("goodHits");

game.scores.totalShots = document.getElementById("totalShots");


// Create thrower

var throwerSprite = document.getElementById("thrower");

var throwerX = canvas.width / 2; // Center of the canvas

var throwerY = canvas.height - throwerSprite.height; // Bottom of the canvas

var thrower = new Thrower(throwerSprite, throwerX, throwerY);

thrower.speed = 120 / 1000; // 120 pixels per second

thrower.cowpieSpeed = 180 / 1000; // 180 pixels per second

game.setThrower(thrower);


// Create targets

var hillarytrue = document.getElementById("tru02");

var hillarylies = document.getElementById("lie02");


var target1 = new Target(hillarylies, hillarytrue, 128, 24);

target1.speed = 120 / 1000; // 120 pixels per second


var target2 = new Target(hillarylies, hillarytrue, 0, 68);

target2.speed = 120 / 1000; // 120 pixels per second


game.addTarget(target1);

game.addTarget(target2);


/* Set event handlers */

// Pause/Resume

document.getElementById("pause").addEventListener("click", game.pause, false);

document.getElementById("play").addEventListener("click", game.resume, false);


// Actions

document.getElementById("left").addEventListener("mousedown", thrower.pressLeft, false);

document.getElementById("left").addEventListener("mouseup", thrower.releaseLeft, false);

document.getElementById("right").addEventListener("mousedown", thrower.pressRight, false);

document.getElementById("right").addEventListener("mouseup", thrower.releaseRight, false);

document.getElementById("throw").addEventListener("click", thrower.throwCowpie, false);

document.addEventListener("keydown", keyPressed, false);

document.addEventListener("keyup", keyReleased, false);


var canFire = true;

function keyPressed(e) {

writeTraceLog("function keyPressed targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

switch(e.keyCode) {

case 39: case 68: // Right arrow and D

thrower.pressRight();

break;

case 37: case 65: // Left arrow and A

thrower.pressLeft();

break;

case 38: case 87: // Up arrow and W

if(canFire) {

canFire = false;

thrower.throwCowpie();

}

break;

}

}


function keyReleased(e) {

writeTraceLog("function keyReleased(e) targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

switch(e.keyCode) {

case 39: case 68: // Right arrow and D

thrower.releaseRight();

break;

case 37: case 65: // Left arrow and A

thrower.releaseLeft();

break;

case 38: case 87: // Up arrow and W

canFire = true;

break;

}

}


/* Begin the game */

window.addEventListener("load", game.start, false);


/*************/

/** Objects **/

/*************/


/** Game **/

function Game© { // function declaration

var self = this;


/** Properties **/


// Canvas

var canvas = c;

var context = canvas.getContext("2d");


// HTML elements explain

/* Objects are variables too. But objects can contain many values.

JavaScript objects are containers for named values called properties or methods.

self.sprites is an object. It's in the Javascript tutorial:

Objects are used to organize data.

self is also an object. .sprites is a property of self that also contains an object.

You cannot use var to set properties.

Objects can contain other objects and arrays as properties.

var a = {}; // This is an object

a.b = { // Property "b" is an object that contains a property "c" which is also an object

c : {}

};

a.b.c.d = "Value"; // Object "c" has a property called "d" with a string as its value.

*/

self.reset = function () {

totalScore = 0;

totalShots = 0;

oops = 0;

hits = 0;


for (var i = targets.length - 1; i >= 0; i--) {

targetsLengthVar = targets.length ;

targets.splice(index, 1);

writeTraceLog("self.reset targets.splice func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

}

for (var i = cowpies.length - 1; i >= 0; i--) {

cowpies.splice(index, 1);

writeTraceLog("self.reset cowpies.splice func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

}


}; // self.reset = function ()

self.sprites = {

background : null,

manufacturer : null,

cowpie : null

};

self.sounds = {

splat : null,

goodbye : null,

cheering : null,

oops : null

};

self.scores = {

totalScore : null,

oops : null,

hits : null,

totalShots : null

};


// Movable objects

var thrower = null;

var targets = [];

var cowpies = [];

self.setThrower = function(t) { thrower = t; thrower.game = self;

writeTraceLog("self.addThrower func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

};

self.addTarget = function(t) { targets.push(t);

writeTraceLog("self.addTarget func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount + " which target = " + t.name);

};


// States

var paused = false;


// Counters

var totalScore = 0;

var totalShots = 0;

var oops = 0;

var hits = 0;


/** Methods **/

// explain Methods are functions stored as object properties.


// Start the game ===========================

self.start = function () {

// Reset counters

totalScore = 0;

totalShots = 0;

oops = 0;

hits = 0;

writeTraceLog("self.start = function targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

// Play a sound

console.log(self.sounds.cheering);

self.sounds.cheering.play();


// Begin the game loop

requestAnimationFrame(gameLoop);

} // self.start = function () ========================


// Pause the game

self.pause = function() { paused = true; lastTimestamp = 0;

writeTraceLog("self.pause func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

};

self.resume = function() { paused = false; };


// Create a cowpie

self.createCowpie = function(x, y) {

writeTraceLog("self.createCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

var cowpie = new Cowpie(self.sprites.cowpie, x, y);

cowpie.game = this;

cowpies.push(cowpie);

};


// Remove a cowpie by its index

self.destroyCowpie = function(index) {

if(index instanceof Cowpie) {

writeTraceLog("self.destroyCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

var found = false;

numCowpies = cowpies.length;

for(var i = 0; i < numCowpies && !found; i++) {

if(cowpies == index) {

found = true;

cowpies.splice(index, 1);

}

}

} else {

cowpies.splice(index, 1);

}

} // self.destroyCowpie = function(index)


/** Private methods **/

// Collision detection

// Detect rectangular collision

var hitTest = function(a, B) {

return a.x <= b.x + b.width &&

a.x + a.width >= b.x &&

a.y <= b.y + b.height &&

a.y + a.height >= b.y;

}


var lastTimestamp = 0;

var gameLoop = function(timestamp) { // =================== gameLoop ==============

var i, j, numTargets, numCowpies, collision;

/* If the game is paused then do nothing */

if(paused) {

requestAnimationFrame(gameLoop);

return;

}


/* Calculate delta time */

if(lastTimestamp == 0) {

lastTimestamp = timestamp;

}

deltaTime = timestamp - lastTimestamp;

lastTimestamp = timestamp;


/* Update all objects */

// Thrower

thrower.update(deltaTime, canvas);


// Targets

numTargets = targets.length;

targetsLengthVar = targets.length;

for(i = 0; i < numTargets; i++) {

targets.update(deltaTime, canvas);

}


// Cowpies

for(i = 0; i < cowpies.length; i++) {

cowpies.update(deltaTime, canvas);

}


/* Calculate interations between all objects */

// For each cowpie calculate collision with the targets

var target;

for(i = 0; i < cowpies.length; i++) {

for(j = 0; j < numTargets; j++) {

collision = hitTest(cowpies, targets[j]);

// If a collision occurred, destroy the cowpie and change the target

if(collision) {


// Destroy cowpie

self.destroyCowpie(i);


// Change target's state and update scores

target = targets[j];

if(target.isGood()) {

self.sounds.oops.play();

oops++;

target.setGood(false);

} else {

self.sounds.splat.play();

hits++;

target.setGood(true);

}


totalScore = hits * 4 - oops * 2;


i--; // (Accounts for the cowpie being removed from the array)

break;

} // if(collision)

} // for(j = 0; j < numTargets; j++)

} // for(i = 0; i < cowpies.length; i++)


/* Display everything */

// Clear canvas

context.clearRect(0, 0, canvas.width, canvas.height);


// Draw background images

context.drawImage(self.sprites.background, 0, canvas.height - 195);

context.drawImage(self.sprites.manufacturer, canvas.width - 180, canvas.height - 104);


// Draw thrower

thrower.draw(context);


// Draw targets

for(i = 0; i < numTargets; i++) { // TargetSelfDraw gameLoopDraw

if (TargetSelfDraw < 5) { gameLoopDraw ++;

writeTraceLog("if gameLoopSelf < 5 = "+ gameLoopDraw + " traceCount = " + traceCount);

}

targets.draw(context);

}


// Draw cowpies

numCowpies = cowpies.length; // Update this to account for destroyed cowpies

for(i = 0; i < numCowpies; i++) {

cowpies.draw(context);

}


// Update scores

self.scores.totalScore.innerHTML = totalScore;

self.scores.totalShots.innerHTML = totalShots;

self.scores.oops.innerHTML = oops;

self.scores.hits.innerHTML = hits;


// Start a new game loop

requestAnimationFrame(gameLoop);

} // var gameLoop = function(timestamp)

}; // EndOf function Game©


/** Thrower **/


function Thrower(s, startX, startY) { // Declared functions are not executed immediately.

// They are "saved for later use", and will be executed later, when they are invoked (called upon).

var self = this;


var sprite = s;

self.x = startX;

self.y = startY;

self.width = sprite.width;

self.height = sprite.height;

self.game = null;

self.speed = 120 / 1000;

var left = 0;

var right = 0;


// For movement

self.pressLeft = function() { left = 1;

writeTraceLog("self.pressLeft func self.x = "+ self.x + " traceCount = " + traceCount);

};

self.releaseLeft = function() { left = 0; };

self.pressRight = function() { right = 1;

writeTraceLog("self.pressRight func self.x = "+ self.x + " traceCount = " + traceCount);

};

self.releaseRight = function() { right = 0; };


// Throw a cowpie

self.throwCowpie = function() {

writeTraceLog("self.throwCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

game.createCowpie(self.x, self.y);

}


// Update position

self.update = function(deltaTime, canvas) {

var direction = right - left;

self.x += direction * self.speed * deltaTime;

if(self.x + self.width > canvas.width) {

self.x = canvas.width - self.width;

}

if(self.x < 0) {

self.x = 0;

}

}


// Draw

self.draw = function(context) {

context.drawImage(sprite, self.x, self.y, self.width, self.height);

}

} // function Thrower(s, startX, startY)


/** Cowpie **/

function Cowpie(s, startX, startY) {

var self = this;

var sprite = s;

self.x = startX;

self.y = startY;

self.width = sprite.width;

self.height = sprite.height;

self.game = null;

self.speed = 180 / 1000;


self.update = function(deltaTime, canvas) {

self.y -= self.speed * deltaTime;

if(self.y < 0) {

game.destroyCowpie(self);

}

}


self.draw = function(context) {

context.drawImage(sprite, self.x, self.y, self.width, self.height);

//writeTraceLog("self.draw cowpie targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount);

}

} // function Cowpie(s, startX, startY)


/** Target **/

function Target(bad, good, startX, startY) {

var self = this;


/* Properties */

self.x = startX;

self.y = startY;

self.width = bad.width;

self.height = bad.height;

self.speed = 120 / 1000;


// For changing sprite

var isGood = false;

var spriteGood = good;

var spriteBad = bad;

var sprite = spriteBad;


// For motion

var direction = 1;

var trips = 0;

var maxTrips = 2;


/* Get or set the isGood value */

self.isGood = function() {

return isGood;

}

self.setGood = function(value) {

isGood = value;

trips = 0; // Reset trips

if(isGood) {

width = spriteGood.width;

height = spriteGood.height;

} else {

width = spriteBad.width;

height = spriteBad.height;

}

}


/* Update method, called on each frame */

self.update = function(deltaTime, canvas) { // target

/* Update position */

self.x += direction * self.speed * deltaTime;


/* Check boundaries */

var hitBoundary = false;


// Check if we hit the left boundary

if(self.x < 0) {

self.x = 0;

direction = -direction;

hitBoundary = true;

}


// Check if we hit the right boundary

if(self.x + self.width > canvas.width) {

self.x = canvas.width - self.width;

direction = -direction;

hitBoundary = true;

}


// If we hit a boundary then count trips

if(hitBoundary) {

trips++;

// Switch sprites if we hit a boundary too many times

if(trips > maxTrips) {

isGood = !isGood;

if(isGood) {

width = spriteGood.width;

height = spriteGood.height;

} else {

width = spriteBad.width;

height = spriteBad.height;

}


}

}

}


/* Draw the sprite */

self.draw = function(context) {

TargetSelfDraw ++;

sprite = isGood ? spriteGood : spriteBad;

context.drawImage(sprite, self.x, self.y, self.width, self.height); //gameLoopDraw TargetSelfDraw = 0;

if (TargetSelfDraw < 5) {

writeTraceLog("if TargetSelfDra < 5 = "+ TargetSelfDraw + " traceCount = " + traceCount);

}

} // TargetSelfDraw


} // function Target(bad, good, startX, startY)

//

/*

function writeTraceLog(oneTraceLine){

document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine);

}

*/

</script>

</body>

</html>

Link to comment
Share on other sites

Goodness, please stop posting hundreds of lines of code, my computer's going to short circuit from too much scrolling.

 

Post the 10 or 15 lines that are relevant to the question you're asking. Describe clearly what you want to happen and show us what solution you have attempted.

 

 

I'm not entirely sure what you were asking. You seemed to be talking about these lines of code:

var target1 = new Target(hillarylies, hillarytrue, 128, 24);
target1.speed = 120 / 1000; // 120 pixels per second

var target2 = new Target(hillarylies, hillarytrue, 0, 68);
target2.speed = 120 / 1000; // 120 pixels per second

This creates two targets. Each target has the following parameters:

  • Lies image
  • True image
  • Starting X coordinate
  • Starting Y coordinate
Link to comment
Share on other sites

It creates them , but doesn't yet draw them .

Correct ?

 

http://vmars.us/javascript/GameObject/FoxyMod-Game-reset.html

I would like you to take a look at the above link ,

so you can see what I am doing .

And also while there , pls rightMouse click to 'view the code' .

If you are willing to do that , then I won't need to even Post my code .

 

I have already tried :

wrapping the logic section as a function , and executing it at 'load' .

Then adding a game.start() immediately after executing that function .

Then adding a self.reset() function at the beginning of game.start() .

In game.reset() I cleared pertinent var s to 0 .

 

I need some help with 'what else I need to clear , set to null or what ever' in the self.reset() .

My code was foreign to you , your code is alien to me .

There are lots of things that are new to me .

I have spent 8hrs a day for the last 2 days , trying to understand your code ,

using console debug , & writeTraceLog , etc..

 

Thanks

Edited by vmars316
Link to comment
Share on other sites

Your code was not foreign to me, just very messy and inefficient, it takes a long time to figure out the intention behind it. My code is structured according to common theoretical programming models and data structures. You probably should take some college courses because the theory is probably much more than what can be taught in a forum post.

 

This is altered from the original game file I gave you and not from the code you have now. It will make sure that the game actually runs properly because it won't do anything until the images have loaded:

/***********/
/** Logic **/
/***********/

// This event listener makes sure nothing runs until everything is ready
window.addEventListener("load", setup, false);

function setup() {
  // All the rest of the code goes here, unaltered

  /* Begin the game */
  //// This is the only line that needs to be changed
  //// Remove the following:
  // window.addEventListener("load", game.start, false);
  //// And replace it with the following
  game.start();
}


/*************/
/** Objects **/
/*************/

I can't tell you how to write the reset() method because I don't know what you want the game to do when that button is clicked. The only thing that has changed since the game started are the numbers in the score counters. Is there anything else you want to reset?

Link to comment
Share on other sites

Thanks :

 

Your code was not foreign to me, just very messy and inefficient,
it takes a long time to figure out the intention behind it.
My code is structured according to common theoretical programming
models and data structures. You probably should take some
college courses because the theory is probably much more than what
can be taught in a forum post.
Ah , when I google: "javascript common theoretical programming models and data structures"
I get a wealth of info , Thanks
When I set it up as you say
I get an error here:
FoxyMod-Game-reset.html:519 Uncaught ReferenceError: game is not defined
// Throw a cowpie
self.throwCowpie = function() {
game.createCowpie(self.x, self.y);
}
whenever I click on 'Throw' button .
So I moved this:
var canvas = document.getElementById("canvas");
var game = new Game(canvas);
to here:
var canvas = document.getElementById("canvas");
var game = new Game(canvas);
 
window.addEventListener("load", setup, false);
 
function setup() {  
That must have been what was happening before ,
only I didn't notice that error ,
since I hadn't yet dived into Chrome debug, breakpoints and writeTraceLog .
Btw: I noticed late last nite , that your code works fine in IE .
Also , using F12:
Is there a way to step thru code one line at a time ?
I have used 'Step into next function' & 'Resume execution',
But I havent't yet found a way to 'step into next line' .
game.reset();
Since code is working fine ,
I guess I dont't need to do the last 2 resets now :
1) Set scores to zero
2) Empty the cowpies array
3) Set all the target isGood properties to false
Thanks
Link to comment
Share on other sites

I don't think there's a way to run line by line, but add as many break points as you need.

 

 

Your solution worked, but all you really needed to do was to move these lines

var canvas = document.getElementById("canvas");
var game = new Game(canvas);

to the beginning of setup(). I gave you that advice assuming you were using the same code I originally sent to you. You've started adding new functions and global variables.

 

 

Here is the full setup function:

window.addEventListener("load", setup, false);

function setup() {
  /* Initialize the game object */
  var canvas = document.getElementById("canvas");
  var game = new Game(canvas);

  // Sounds
  game.sounds.splat = new Audio("sounds/CowMooSplat.mp3");
  game.sounds.goodbye = new Audio("sounds/GoodBye-Female.mp3");
  game.sounds.cheering = new Audio("sounds/cheeringCrowd.mp3");
  game.sounds.oops = new Audio("sounds/oops.mp3");

  // Sprites
  game.sprites.background = document.getElementById("bgCompound");
  game.sprites.manufacturer = document.getElementById("manufacturer");
  game.sprites.cowpie = document.getElementById("cowpie");

   // Scores
  game.scores.totalScore = document.getElementById("totalScore");
  game.scores.oops = document.getElementById("oopsScore");
  game.scores.hits = document.getElementById("goodHits");
  game.scores.totalShots = document.getElementById("totalShots");

  // Create thrower
  var throwerSprite = document.getElementById("thrower");
  var throwerX = canvas.width / 2; // Center of the canvas
  var throwerY = canvas.height - throwerSprite.height; // Bottom of the canvas
  var thrower = new Thrower(throwerSprite, throwerX, throwerY);
  thrower.speed = 120 / 1000; // 120 pixels per second
  thrower.cowpieSpeed = 180 / 1000; // 180 pixels per second
  game.setThrower(thrower);

  // Create targets
  var hillarytrue = document.getElementById("tru02");
  var hillarylies = document.getElementById("lie02");

  var target1 = new Target(hillarylies, hillarytrue, 128, 24);
  target1.speed = 120 / 1000; // 120 pixels per second

  var target2 = new Target(hillarylies, hillarytrue, 0, 68);
  target2.speed = 120 / 1000; // 120 pixels per second

  game.addTarget(target1);
  game.addTarget(target2);

  /* Set event handlers */
  // Pause/Resume
  document.getElementById("pause").addEventListener("click", game.pause, false);
  document.getElementById("play").addEventListener("click", game.resume, false);

  // Actions
  document.getElementById("left").addEventListener("mousedown", thrower.pressLeft, false);
  document.getElementById("left").addEventListener("mouseup", thrower.releaseLeft, false);
  document.getElementById("right").addEventListener("mousedown", thrower.pressRight, false);
  document.getElementById("right").addEventListener("mouseup", thrower.releaseRight, false);
  document.getElementById("throw").addEventListener("click", thrower.throwCowpie, false);
  document.addEventListener("keydown", keyPressed, false);
  document.addEventListener("keyup", keyReleased, false);

  var canFire = true;
  function keyPressed(e) {
    switch(e.keyCode) {
      case 39: case 68: // Right arrow and D
        thrower.pressRight();
      break;
      case 37: case 65: // Left arrow and A
        thrower.pressLeft();
      break;
      case 38: case 87: // Up arrow and W
        if(canFire) {
          canFire = false;
          thrower.throwCowpie();
        }
      break;
    }
  }

  function keyReleased(e) {
    switch(e.keyCode) {
      case 39: case 68: // Right arrow and D
        thrower.releaseRight();
      break;
      case 37: case 65: // Left arrow and A
        thrower.releaseLeft();
      break;
      case 38: case 87: // Up arrow and W
        canFire = true;
      break;
    }
  }

  /* Begin the game */
  //// This is the only line that needs to be changed
  //// Remove the following:
  // window.addEventListener("load", game.start, false);
  //// And replace it with the following
  game.start();
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...