Need help with .js game on phone

vmars316 · October 21, 2016

They're just syntax errors, syntax errors are easy to debug.

In my previous post I told you how to fix the hitTest method which had a mistake.
Game.hitTest = function(a,  {
There's also a mistake I made here, it should be using Game.cowpies:
Game.createCowpie = function() {
  cowpies.push(new Cowpie());
}
But you still seem to be missing the bigger picture, have you determined the structure of your game? The code itself does not matter very much, you should have the game designed well enough that it could be programmed in any language. You have to describe all the objects, their properties and methods, and the interactions between the objects.

The code I wrote is incomplete, it's just setting up some of the objects. If I write much more code I'll have built the whole game.

Pls notice that the code I last presented does include the changes you mentioned .

I had already fixed the errors .

I deliberately removed the "objects, their properties and methods" to make it easier to debug js syntax .

Again , what I am trying to do now , is simply to debug the js syntax ,

I am trying to establish an error free 'starting point . So that any errors that pop up after this 'starting point' are indeed my errors .

The code I wrote is incomplete

Yes I realize that . Isn't the diagram that you gave me , though incomplete , program structure ?

Or do you mean something else ?

Thanks

vmars316 · October 21, 2016

There's also a mistake I made here, it should be using Game.cowpies:

Game.createCowpie = function() {
cowpies.push(new Cowpie());
}

Oops , I misunderstood what you were saying . I fixed code & no error here .

But I am still getting these errors:

: Uncaught SyntaxError: Unexpected token {

// Create or destroy cowpies

Game.createCowpie = function() {

cowpies.push(new Cowpie());

//}

Last js statement"

: Uncaught SyntaxError: Unexpected end of input

// Draw the sprite

this.draw = function() {

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

}

vmars316 · October 22, 2016

Ok, I have got it stripped down , and no errors:

vmars316 · October 22, 2016

<!DOCTYPE html>

<html>

-<head>

<title>goBegin</title>

http://vmars.us/javascript/GameObject.html

-->

</head>

<!--

-->

<body>

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

/** Game object **/

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

/** Game object **/

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

var Game = {}

/* Properties */

// For drawing

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

Game.graphics = Game.canvas.getContext("2d");

// Sounds

Game.sounds = {

splat : new Audio("sounds/CowMooSplat.mp3"),

goodbye : new Audio("sounds/GoodBye-Female.mp3"),

cheering : new Audio("sounds/cheeringCrowd.mp3"),

oops : new Audio("sounds/oops.mp3")

};

// Movable objects

Game.cowpies = [];

Game.thrower = new Thrower(document.getElementById("thrower"), 0, 0);

Game.target = new Target(document.getElementById("lie02"), 128, 24)

/* Methods */

// Play a sound

Game.playSound = function(sound) {

sound.play();

}

// Detect a rectangular collision between two objects

/*Game.hitTest(a,

{

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;

} */

// Create or detroy cowpies

Game.createCowpie = function() {

Game.cowpies.push(new Cowpie());

}

Game.destroyCowpie = function(cowpie) {

// Play sound

Game.playSound(Game.sounds.splat);

// Remove from cowpies

var count = Game.cowpies.length;

var destroyed = false;

for(var i = 0; i < count && !destroyed; i++) {

if(Game.cowpies == cowpie) {

destroyed = true;

Game.cowpies.splice(i, 1);

}

// Starts up the game

Game.start = function() {

// Start by playing the cheering sound

playSound(Game.sounds.cheering);

// Then begin the game loop, this code depends on what kind of loop you're using

}

// Ends the game

/*Game.end() {

// Stop the game loop, this code depends on what kind of loop you're using.

} */

// This is the game loop

Game.gameLoop = function() {

// Loop through objects and update them

var amount = Game.cowpies.length;

var cowpie;

for(var i = 0; i < amount; i++) {

cowpie = Game.cowpies;

cowpie.update();

}

thrower.update();

target.update();

// Detect collisions and do something

//

// Draw everything

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

for(var i = 0; i < amount; i++) {

cowpie = Game.cowpies;

cowpie.draw();

}

thrower.draw();

target.draw();

}

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

/** Movable objects **/

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

/* Cowpie */

function Cowpie(sprite, x, y) {

this.sprite = sprite;

this.x = x;

this.y = y;

this.width = sprite.width;

this.height = sprite.height;

// Update position based on requirements

this.update = function() {

}

// Draw the sprite

this.draw = function() {

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

}

/* Thrower */

function Thrower(sprite, x, y) {

this.sprite = sprite;

this.x = x;

this.y = y;

/* this.width = sprite.width;

this.height = sprite.height;

*/

// Update position based on requirements

this.update = function() {

}

// Draw the sprite

this.draw = function() {

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

}

/* Target */

function Target(x, y) {

this.x = x;

this.y = y;

/* this.width = sprite.width;

this.height = sprite.height;

*/

// Update position based on requirements

this.update = function() {

}

// Draw the sprite

this.draw = function() {

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

}

</script>

</body>

</html>

Ingolme · October 22, 2016

I didn't provide a diagram, I just wrote some code with some incomplete object templates.

Why have you commented out the closing curly brace "}" in this code? That would be what's causing a syntax error.

// Create or destroy cowpies
Game.createCowpie = function() {
  cowpies.push(new Cowpie());
//}

The other errors likely just cascade down from there.

You seem to have completely commented out the hitTest() method, so it's not throwing errors, but doesn't do anything else either which isn't very useful.

Instead of pressing the <> button for code in your posts, just put your code between [ c o d e ] and [ / c o d e] tags.

vmars316 · October 22, 2016

Thanks ;

Why have you commented out the closing curly brace "}" in this code?

Yes , I fixed that .

I still couldn't find all the errors , so I stripped out everything (js) except

var Game = {} and Game.start = function() {}

(then added Game.hitTest(a, {)

However when I pruned code down to this:

<script type='text/javascript'>
 
/** Game object **/
var Game = {}
 
// Movable objects
Game.cowpies = []; 
 
/* Properties */
// For drawing
Game.canvas = document.getElementById("canvas");
Game.context = Game.canvas.getContext("2d");
 
// Starts up the game 
Game.start = function() {
 
    }
 
// Detect a rectangular collision between two objects
Game.hitTest(a,  {
  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;
} //
</script>

I am still getting the

Uncaught SyntaxError: Unexpected token {

on this:

[code]

Game.hitTest(a,

{

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;

} //

[/code]

Can you see the error ?

By the way this:

Instead of pressing the <> button for code in your posts, just put your code between code tags .

Works great !

Thanks

Ingolme · October 22, 2016

For the third time. You're writing this:

Game.hitTest(a,  {

It's supposed to be this:

Game.hitTest = function(a,  {

vmars316 · October 23, 2016

Got it , Thanks

vmars316 · October 26, 2016

Ah , back at it ;

Reminder.. Code works fine on desktop browser , but hangs on phone .

Here is my more readable code :

Thanks

vmars316 · October 27, 2016

Oops , try again:

vmars316 · October 27, 2016

vmars316 · October 27, 2016

<!DOCTYPE html>

<html>

-<head>

<title>GameObject.html</title>

http://vmars.us/javascript/GameObject.html

-->

<style>

#assets { height: 0px; overflow: hidden; visibility: hidden; width: 0px; }

body { background-color: Black; margin: 0; overflow: hidden; padding: 0; }

canvas { cursor: none; }

table { color: #E1E1E1; background-color: #732222; height: 24px; width: 800px; border: none; }

button {font-size: 16px;}

#buttonsArea { color: #E1E1E1; background-color: #732222; width: 600px; border: none; }</style>

</head>

<!--

-->

//<body>

<div>

<tr>

<td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td>

<td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td>

</tr>

</table>

</div>

<button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button>

<button onclick="catchButtons.pause()" ontouchstart="catchButtons.pause()" >Pause</button>

__ <button onclick="catchButtons.play()" ontouchstart="catchButtons.play()" >Play</button>

__ <button onclick="clearIt()" ontouchstart="clearIt()">Clear</button>

__ <button onclick="quitIt()" ontouchstart="quitIt()">Quit</button>

</div>

</div>

/* Globals */

var oops = 0; var goodHits = 0; var totalShots = 0; var ScreenSize = 0 ;

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

/** Game objects **/

var Game = {}

var My_audio_Urls = ["sounds/CowMooSplat.mp3",

"sounds/GoodBye-Female.mp3","sounds/cheeringCrowd.mp3","sounds/oops.mp3"];

// Sounds

Game.sounds = {

splat : new Audio("sounds/CowMooSplat.mp3"),

goodbye : new Audio("sounds/GoodBye-Female.mp3"),

cheering : new Audio("sounds/cheeringCrowdLow.mp3"),

oops : new Audio("sounds/oops.mp3")

};

var cached_Audio_files = [];

var allImgs = [ document.getElementById("thrower"), // 0

document.getElementById("lie02"), // 1

] ; // future version will have 9 images to load

// Movable objects

Game.cowpies = [];

var cowpie = Game.cowpies ;

var cowpieImg = document.getElementById("cowpie");

/* Properties For drawing */

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

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

/* requestAnimationFrame */

var gid = 0;

var lastTimestamp = 0;

var timestamp = 0;

var Thrower = function () { // in future version Thrower will be able to move left and right

var self = this;

this.idTag = 'thrower';

this.x = (Game.canvas.width / 2) -30;

this.y = Game.canvas.height - 64;

this.width= 64;

this.height = 64;

this.visible = true;

this.speedX = 4;

this.speedY = 0;

this.directionX = 1;

this.moveMe = false ;

this.draw = function() { Game.drawSprite(0, thrower.x, thrower.y, thrower.width, thrower.height); } // Thrower

this.update = function() {

// self.speedX = resetSpeedX;

if (self.x > Game.canvas.width -50 ) { self.x = Game.canvas.width -51; self.moveMe = false ; }

if (self.x < 3) { self.x = 4; self.moveMe = false ; }

self.x = self.x + (self.speedX * self.directionX); // always either +1 or -1 }

}

//

thrower = new Thrower();

thrower.idTag = 'thrower';

//

var Cowpie = function () { // there can be several cowpies active at same time

var self = this;

this.idTag = 'cowpie';

this.idActive = true ;

this.index = 0;

this.x = thrower.x; // cowpie will always launch from the same coordinates as Thrower

this.y = thrower.y; // to simulate that Cowpie is being thrown by Thrower

this.width= 32;

this.height = 32;

this.speedX = 0;

this.speedY = 4;

this.visible = true;

this.directionY = -1;

this.draw = function() { Game.context.drawImage(cowpieImg, this.x, this.y, this.width, this.height); } // draw cowpie

} // var cowpie

//

var TargetImages = function () {

var self = this ;

this.idTag = "";

this.imageIndex = 1 ;

this.x = 0;

this.y = 4;

this.width= 64;

this.height = 64;

this.speedX = 4;

this.tripsCnt = 0 ;

this.tripMax = 2 ;

this.visible = true ;

this.directionX = 1;

this.update = function() { // Manage Target back and forth movement & manage Cowpie collisions

// alert(" self.idTag = " + this.idTag )

Game.drawSprite(this.imageIndex,this.x,this.y,this.width,this.height);

this.x = this.x + (this.speedX * this.directionX); // direction always = +1 or -1

// Check for collisions Cowpie/Target

// When collision occurs , destroy Cowpie , update scores , and play collision sound

if(this.x > Game.canvas.width - 2) {this.directionX = -1; // If sprite out of bounds occurs change direction

this.x = Game.canvas.width - 2;

this.tripsCnt++; // totalTrips++;

}

if(this.x < -64 ) {this.directionX = 1; // If sprite out of bounds occurs change direction

this.x = 0;

this.tripsCnt++; // totalTrips++;

}

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

thisPie = i;

if (Game.cowpies[thisPie].idActive) {

if(self.visible) { // IF this Target is visible , do collision CK

if (Game.hitTest(lie02, Game.cowpies[thisPie]) ) { // alert("YES , a collision has occurred" )

yeslie = this.idTag.startsWith("lie");

yestru = this.idTag.startsWith("tru");

if (yeslie){ switch(this.idTag) {

case "lie02": lie02.visible=true ; goodHits += 1; // alert("case 'lie02': lie02.visible=true ;");

// lie02.tripsCnt =0 ; lie02.x = -60; this.speedX = 0;

// tru02.visible=true ; tru02.tripsCnt =0 ; tru02.x = 0; tru02.speedX = 1;

break ;

}

Game.playSound(Game.sounds.splat); // playsound for any liexx hit

}

if (yestru){

Game.playSound(Game.sounds.oops);

}

Game.cowpies.splice(thisPie,1);

}

} // endof or (var i = Game.cowpies.length - 1

} // this.update = function()

} // TargetImages

//

lie02 = new TargetImages();

lie02.idTag = "lie02";

lie02.imageIndex = 1 ;

lie02.x = 128;

lie02.y = 24;

lie02.speedX = 4 ;

lie02.tripsCnt = 0 ;

lie02.tripMax = 2 ;

lie02.visible = true ;

lie02.directionX = 1 ;

//

// Detect a rectangular collision between two objects

Game.hitTest = function(a,

{

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;

} // endof Game.hitTest = function

// Starts up the game

Game.start = function() {

// Start by playing the cheering sound

Game.playSound(Game.sounds.cheering);

Game.drawSprite(0,thrower.x,thrower.y,thrower.width,thrower.height);

Game.drawSprite(1,lie02.x,lie02.y,lie02.width,lie02.height);

catchButtons.start();

} // Game.start = function()

//

Game.gameLoop = function() { // This is the GAME LOOP

if (lastTimestamp == 0) {

lastTimestamp = timestamp;

}

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

thrower.draw();

updateScores ();

// Loop through cowpie objects and update them

var amount = Game.cowpies.length;

var cowpie;

for(var i = 0; i < amount; i++) {

cowpie = Game.cowpies;

cowpie.y = cowpie.y - cowpie.speedY ;

cowpie.draw();

}

// Draw everything else Game.hitTest done in TargetImages.update

if (lie02.visible) { lie02.update(); }

if(thrower.moveMe) { thrower.update(); thrower.draw(); }

lastTimestamp = timestamp;

gid = requestAnimationFrame(Game.gameLoop);

} // Game.gameLoop = function()

//

/* Methods */

// Play a sound

Game.playSound = function(sound) {

sound.play();

} // endof Game.playSound = function

// create cowpies

Game.createCowpie = function() {

Game.cowpies.push(new Cowpie());

index = (Game.cowpies.length - 1);

Game.cowpies[index].index = (Game.cowpies.length - 1);

// alert("Game.cowpies.[index].index = " + Game.cowpies[index].index )

} // Game.createCowpie = function()

// endof destroy cowpies

Game.destroyCowpie = function(cowpie) {

// Play sound

Game.playSound(Game.sounds.splat);

// Remove from cowpies

var count = Game.cowpies.length;

var destroyed = false;

for(var i = 0; i < count && !destroyed; i++) {

if(Game.cowpies == cowpie) {

destroyed = true;

Game.cowpies.splice(i, 1);

}

} // Game.destroyCowpie = function

//

Game.drawSprite = function (imgIndex,xPos,yPos,imgWidth,imgHeight) {

this.imgIndex = imgIndex ;

this.x = xPos ;

this.y = yPos ;

this.width = imgWidth ;

this.height = imgHeight ;

Game.context.drawImage(allImgs[this.imgIndex], this.x, this.y, this.width, this.height);

} // Game.drawSprite = function

//

var catchButtons = { //

start : function() {

gid = requestAnimationFrame(Game.gameLoop);

},

clear : function() {

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

},

stop : function() {

cancelAnimationFrame(gid);

},

pause : function() {

cancelAnimationFrame(gid);

pausePlayCnt = 0;

},

play : function() {

pausePlayCnt ++ ;

if(pausePlayCnt < 2) {

gid = requestAnimationFrame(Game.gameLoop);

}

} // endof var catchButtons = {}

//

function onScrnResize(){

var w = window.innerWidth; var h = window.innerHeight;

// alert("function onScrnResize()"); window.innerWidth canvas.width

document.getElementById("ScreenSize").innerHTML =

window.innerWidth + " x " + window.innerHeight ;

} // function onScrnResize()

//

function clearIt() {

oops = 0; goodHits = 0; totalShots = 0;

updateScores ();

// var num = 15; var n = num.toString();

} // endof function clearIt()

//

function updateScores () {

var goodHitsA = goodHits.toString();

document.getElementById('GoodHitz').innerHTML = goodHitsA;

var totalShotsA = totalShots.toString();

document.getElementById('TotalShotz').innerHTML = totalShotsA;

}

//

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

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

//

function keyDownHandler(e) {

if(e.keyCode == 39 || event.keyCode == 68) { // move right D or --->

thrower.directionX = 1;

thrower.moveMe = true ;

thrower.x = thrower.x + 4;

// thrower.draw();

if (thrower.x > canvas.width -40) { thrower.moveMe = false ; }

}

if(e.keyCode == 37 || event.keyCode == 65) { // move left A or <---

thrower.directionX = -1;

thrower.moveMe = true ;

thrower.x = thrower.x - 4;

// thrower.draw();

if (thrower.x < 3) { thrower.moveMe = false ; }

}

if(e.keyCode == 87 || event.keyCode == 38 ) { // shoot = W or upArrow

Game.createCowpie();

totalShots ++;

} // Endof shoot = W or upArrow

} // endof function keyDownHandler

//

function keyUpHandler(e) {

if(e.keyCode == 39 || event.keyCode == 68) { // move = rightArrow or D

rightPressed = false ;

thrower.moveMe = false ;

// thrower.x = thrower.x + 4;

// thrower.draw();

}

else if(e.keyCode == 37 || event.keyCode == 65) { // move = leftArrow or A

leftPressed = false;

thrower.moveMe = false ;

// thrower.x = thrower.x -4;

// thrower.draw();

} // endof else if(e.keyCode == 37

} // endof function keyUpHandler(e)

//

function touchUpArrow() {

Game.createCowpie();

totalShots ++;

} // endof function touchUpArrow

//

function quitIt() {

Game.playSound(Game.sounds.goodbye);

clearIt();

catchButtons.pause();

}

//

function updateScores () {

goodHitsA = goodHits.toString();

document.getElementById('GoodHitz').innerHTML = goodHitsA;

totalShotsA = totalShots.toString();

document.getElementById('TotalShotz').innerHTML = totalShotsA;

}

//

</script>

</body>

</html>

Ingolme · October 27, 2016

It seems I can't properly teach you software development on a forum, there are so many principles you can't grasp without prior experience.

I've attached a working game that runs smoothly on my phone, it will work provided you put it in the same location on your server and you use the same image and audio file names. Hopefully reading the code you can learn about structuring your software.

You seem to have missed out a whole lot of requirements when describing your game to me, here are some things I had to figure out by digging through your original code:

When a target gets hit by a cowpie it toggles its state between "tru" and "lies"
When a target bounces off the boundaries three times it also toggles a state change
Each state has a different image to represent it
There can be more than one target on the screen
Hitting a target in its "tru" state adds 1 to the "oops!" counter
Hitting a target in its "lies" state adds 1 to the "goodHits" counter
The total score is calculated with the following formula: goodHits * 4 - oops * 2

All these details and more are necessary in your requirements document. If you can't describe your game to somebody, how are you going to be able to build it?

index.html

vmars316 · October 28, 2016

Wow , Thank you very much for all your help , works great !

Understanding/learning from Your version will keep me busy for a long time .

Now I see what you meant by using as few Globals as possible :

function Game(c) { // from statement 173 to 366

var self = this;

You seem to have missed out a whole lot of requirements when describing your game to me, here are some things I had to figure out by digging through your original code:

When a target gets hit by a cowpie it toggles its state between "tru" and "lies"

When a target bounces off the boundaries three times it also toggles a state change

Each state has a different image to represent it

There can be more than one target on the screen

Hitting a target in its "tru" state adds 1 to the "oops!" counter

Hitting a target in its "lies" state adds 1 to the "goodHits" counter

The total score is calculated with the following formula: goodHits * 4 - oops * 2

.

I understand what you are saying

and I will review all my requirements above & add to as needed .

Side note: none of the requirements you mentioned above

are part of the original code I presented .

I had stripped down the code to use only 1 target ,

and react only by playing a sound on each hit .

And thrower doesn't move .

Leaving all that other stuff for a future version .

However , you went far above and beyond what I had hoped for .

And I am VERY THANKFUL for what you have done , because now

I have 'examples of' for 'my future versions' .

I have Posted your code here:

http://vmars.us/javascript/GameObject/Foxy.Mod-w3schools.invisionzone-ORIG.html

It runs great !

WindowsPhone, Chrome, Edge, InternetExplorer:

And I notice that when I Restart/reLoad the game by hitting the Browser Reload-button

or pressing cntrl+F5 , the game runs fine ,

except

that now the only visible images are bgcompound , manufacturer and cowpie .

The target images are there , because they react to a 'cowpie hit' .

But they are invisible .

I can solve this by a new button , maybe called "Play again!" ,

That sends me to: window.location = "http://........

Pls , why is this happining , and is there a coding solution ?

Thanks

Edited October 28, 2016 by vmars316

Ingolme · October 28, 2016

My guess is that upon creating the sprites the images haven't been loaded yet, so they have a width and height of 0.

That can be solved by wrapping the entire logic section in a function and set a window load event to call it. Remember to remove the window load event that's currently being used for game.start.

/***********//** Logic **//***********/window.addEventListener("load", setup, false);function setup() {  /** All logic here **/}/*************//** Objects **//*************/// The rest of the code

vmars316 · October 29, 2016

Hello & Thanks ,

Sorry to say , but now the cowpies won't launch .

Any ideas ?

Thanks

Ingolme · October 29, 2016

You probably did something wrong. If all you did was wrap the logic in an event handler it should work just the same.

vmars316 · October 30, 2016

Probably

But when I do it exactly like you said , no images and no sound .

/***********/
/** Logic **/
/***********/
window.addEventListener("load", setup, false);  //  Listen for Browser ReFresh-Button
function setup() {  // Wrap the entire logic section in a function and set a window load event to call 
 
/* 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 */
// window.addEventListener("load", game.start, false);  // Use  function setup()  instead .
 
} // function setup()  Wrap the entire logic section in a function and set a window load event to call 
 
/*************/
/** Objects **/
/*************/

There seems to be no way for script to get to game.start() .

So what I did was to insert "game.start()"

Here:

}

/* Begin the game */

// window.addEventListener("load", game.start, false); // Use function setup() instead .

game.start() ;

} // function setup() Wrap the entire logic section in a function and set a window load event to call

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

/** Objects **/

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

Then it runs for all sounds and all images EXCEPT cowpies .

Thanks

Edited October 30, 2016 by vmars316

Ingolme · October 30, 2016

Where is game.start() called? If you don't call that method the game will not work.

vmars316 · October 30, 2016

Where is game.start() called? If you don't call that method the game will not work.

Where should I put game.start() ?

Thanks

Ingolme · October 30, 2016

Do you understand how this works? I'm trying to help you learn.

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

vmars316 · October 30, 2016

I know your are , Thank you !

(Although , from some of your comments ,

I was thinking that you thought I was unteachable .)

Yes , please do 'hang in there' because I have some questions about your code .

Originally Ready to start at "onload" .

With changes , at the end of 'setup function' .

But when I put game.start there ,

images disappear .

Edited October 30, 2016 by vmars316

vmars316 · October 30, 2016

This whole POST is just a side note :

I do want to understand your code , and I want you to know that I am not just sitting back and waiting for answers . But I am working at solutions .

Ans I did come up with a work around , its ugly , but it works with your original code .

I was unable to get working

window.location.href

and

window.open()

triggered by a Button .

But I did notice that for Browser 'Back and Forward' Buttons game restarts fine .

So on a "Play Again !" Button click :

code opens up a new webpage called "RestartGame.html" .

which runs this code:

<script type='text/javascript'>
function goBack() {
  setTimeout(function() {
    window.history.back();
//    window.location.href = "http://vmars.us/javascript/GameObject/Foxy.Mod-w3schools.invisionzone-vmFIX-Web.html";
  }, 1000);
  }
</script>

Here: http://vmars.us/javascript/GameObject/Restart-FoxyModGame.html

and here: http://vmars.us/javascript/GameObject/Foxy.Mod-w3schools.invisionzone-vmFIX-Web.html

Thanks

Edited October 30, 2016 by vmars316

Ingolme · October 31, 2016

You don't need to load the page again to start the game over.

Just give the game a reset() method which sets all the relevant values to their initial state. The method should:

Set scores to zero
Empty the cowpies array
Set all the target isGood properties to false

There's an easy way to reload the page if that's really the route you want to take to solve this problem. Use the location.reload() method: http://www.w3schools.com/jsref/met_loc_reload.asp

vmars316 · October 31, 2016

Thanks

Yes , I'd rather learn

Just give the game a reset() method which sets all the relevant values to their initial state. The method should:

Set scores to zero

Empty the cowpies array

Set all the target isGood properties to false

Ok , I'll work on this . Thanks

Need help with .js game on phone

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Announcements