vmars316 Posted October 31, 2016 Author Share Posted October 31, 2016 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 More sharing options...
Ingolme Posted October 31, 2016 Share Posted October 31, 2016 That's the HTML element in which the score is displayed. Do you know what getElementById() is? Link to comment Share on other sites More sharing options...
vmars316 Posted October 31, 2016 Author Share Posted October 31, 2016 (edited) 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 October 31, 2016 by vmars316 Link to comment Share on other sites More sharing options...
Ingolme Posted October 31, 2016 Share Posted October 31, 2016 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 More sharing options...
vmars316 Posted November 1, 2016 Author Share Posted November 1, 2016 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 More sharing options...
Ingolme Posted November 1, 2016 Share Posted November 1, 2016 That's an object. It's in the Javascript tutorial: http://www.w3schools.com/js/js_objects.asp Objects are used to organize data. Link to comment Share on other sites More sharing options...
vmars316 Posted November 1, 2016 Author Share Posted November 1, 2016 Thanks That's an object. It's in the Javascript tutorial: http://www.w3schools.../js_objects.asp Objects are used to organize data. I am used to 'var person = { ' 'self.sprites = { ' without the var , threw me . Then Is 'self.sprites = { ' the same as 'var self.sprite = { ' Thanks for the Link . Link to comment Share on other sites More sharing options...
Ingolme Posted November 1, 2016 Share Posted November 1, 2016 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 More sharing options...
vmars316 Posted November 1, 2016 Author Share Posted November 1, 2016 Aha! , Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted November 2, 2016 Author Share Posted November 2, 2016 Thanks , What is the difference between functions coded in different ways : self.setThrower = function(t){ var hitTest = function(a, { function Thrower(s, startX, startY) { Thanks Link to comment Share on other sites More sharing options...
Ingolme Posted November 2, 2016 Share Posted November 2, 2016 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 More sharing options...
vmars316 Posted November 2, 2016 Author Share Posted November 2, 2016 A bit confusing here: http://www.w3schools.com/js/js_function_definition.asp 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, { 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 More sharing options...
Ingolme Posted November 2, 2016 Share Posted November 2, 2016 I don't see where the contradiction is. Function declarations are not executable, so they don't need to end with a semi-colon. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 2, 2016 Share Posted November 2, 2016 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 More sharing options...
vmars316 Posted November 2, 2016 Author Share Posted November 2, 2016 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 More sharing options...
vmars316 Posted November 2, 2016 Author Share Posted November 2, 2016 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 More sharing options...
justsomeguy Posted November 2, 2016 Share Posted November 2, 2016 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 More sharing options...
vmars316 Posted November 5, 2016 Author Share Posted November 5, 2016 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] http://vmars.us/javascript/GameObject/FoxyMod-Game-reset.html [/link] Here is my code: Thanks Link to comment Share on other sites More sharing options...
vmars316 Posted November 5, 2016 Author Share Posted November 5, 2016 <!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. // http://www.w3schools.com/js/js_object_methods.asp // 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, { 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 More sharing options...
Ingolme Posted November 5, 2016 Share Posted November 5, 2016 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 More sharing options...
vmars316 Posted November 5, 2016 Author Share Posted November 5, 2016 (edited) 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 November 5, 2016 by vmars316 Link to comment Share on other sites More sharing options...
Ingolme Posted November 5, 2016 Share Posted November 5, 2016 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 More sharing options...
vmars316 Posted November 5, 2016 Author Share Posted November 5, 2016 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 More sharing options...
Ingolme Posted November 5, 2016 Share Posted November 5, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now