vmars316
-
Posts
480 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by vmars316
-
-
Thanks
This is working ok .
.
I forgot I needed to reference id="buttonsArea" as #buttonsArea .
Thanks
-
Still trouble with <> code , try this :
<!DOCTYPE html><html>-<head><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta charset="utf-8" /><title>Debug Hillary Only</title>--><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: #992D2D; height: 24px; width: 800px; border: none; }button {font-size: 16px;}</style></head><body onload="Game.start()" onresize="onScrnResize()"><div><table align="center"><tr><td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td><td width="5%"></td><td width="10%"> Good Hits</td> <td id="GoodHitz" width="5%"> </td><td width="8%"></td><td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td></tr></table></div><div id="canvasDiv" align="center" ><canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas><br><br><button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button><br><br><button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button>__ <button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button>__ <button onclick="clearIt()" ontouchstart="clearIt()">Clear</button>__ <button onclick="quitIt()" ontouchstart="quitIt()">Quit</button></div><div id="assets"><img id="lie02" src="sprites/lies02.png" width="64" height="64" /><img id="cowpie" src="sprites/cowpie.png" width="32" height="32" /><img id="thrower" src="sprites/thrower.png" width="64" height="64" /></div><script type='text/javascript'>//</script></body></html> -
Trouble with <> code .
-
Hmm..
THis sort of worked .
<!DOCTYPE html> <html> -<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Debug Hillary Only</title> <!-- --> <style> #assets { height: 0px; overflow: hidden; visibility: hidden; width: 0px; } body { background-color: Black; margin: 0; overflow: hidden; padding: 0; } canvas { cursor: none; } table, th, tr, td { color: #E1E1E1; background-color: #732222; height: 24px; width: 600px; border: none; text-align: center;} button {font-size: 16px;} </style> </head> <body onload="Game.start()" onresize="onScrnResize()"> <div id="table1" align="center"> <table align="center"> <tr> <td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td> <td width="5%"></td> <td width="10%"> Good Hits</td> <td id="GoodHitz" width="5%"> </td> <td width="8%"></td> <td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td> </tr> </table> </div> <div id="canvasDiv" align="center" > <canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas> </div> <div id="table2" align="center" > <table align="center"> <tr> <td><button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button> </td> </tr> <tr align="center"> <td><button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button> </td> <td><button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button> </td> <td><button onclick="clearIt()" ontouchstart="clearIt()">Clear</button> </td> <td><button onclick="quitIt()" ontouchstart="quitIt()">Quit</button> </td> </tr> </table> </div> <div id="assets" > <img id="lie02" src="sprites/lies02.png" width="64" height="64" /> <img id="cowpie" src="sprites/cowpie.png" width="32" height="32" /> <img id="thrower" src="sprites/thrower.png" width="64" height="64" /> </div> <script type='text/javascript'> // </script> </body> </html>
This is what I had originally , but I wanted to change colors in top & bottom rectangles .
Thanks
-
Hello & Thanks ;
<!DOCTYPE html> <html> -<head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Debug Hillary Only</title> <!-- --> <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: 600px; border: none; } button {font-size: 16px;} </style> </head> <body onload="Game.start()" onresize="onScrnResize()"> <div id="table1"> <table align="center"> <tr> <td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td> <td width="5%"></td> <td width="10%"> Good Hits</td> <td id="GoodHitz" width="5%"> </td> <td width="8%"></td> <td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td> </tr> </table> </div> <div id="canvasDiv" align="center" > <canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas> </div> <div id="table2" align="center" > <table align="center"> <tr align="center"> <td><button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button> </td> </tr> <tr align="center"> <td><button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button> </td> <td><button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button> </td> <td><button onclick="clearIt()" ontouchstart="clearIt()">Clear</button> </td> <td><button onclick="quitIt()" ontouchstart="quitIt()">Quit</button> </td> </tr> </table> </div> <div id="assets" > <img id="lie02" src="sprites/lies02.png" width="64" height="64" /> <img id="cowpie" src="sprites/cowpie.png" width="32" height="32" /> <img id="thrower" src="sprites/thrower.png" width="64" height="64" /> </div> <script type='text/javascript'> // </script> </body> </html>
I am Trouble with centering table data :
Pls, what am I doing wrong ?
Above is my code :
Thanks
-
What is the purpose of the idTag, directionX and directionY properties?
id.tag : to identify which Target has focus .
directionX & Y : to identify which direction Target is moving .
If I were you I would not put the collision detection in the target's update function. Instead I would put it in the main game loop.Pls, what is your rational for this ?
-
[Game objects properties and methods]
var Thrower = function () { // in future version Thrower will be able to move left and right var self = this; this.idTag = 'thrower'; this.x = (canvas.width / 2) -30; this.y = canvas.height - 64; this.width= 64; this.height = 64; this.visible = true; } var Cowpie = function () { // there can be several cowpies active at same time var self = this; this.idTag = 'cowpie'; this.idActive = true ; 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 = -3; this.visible = true; this.directionY = -1; } // var cowpie function TargetImages() { var self = this ; this.idTag = ""; this.x = 0; this.y = 4; this.width= 64; this.height = 64; this.speedX = 4; this.visible = true ; this.directionX = 1; this.update = function() { // Manage Target back and forth movement // If out of bounds occurs , switch movement direction // Check for collisions Cowpie/Target // When collision occurs , destroy Cowpie , update scores , and play collision sound } lie02 = new TargetImages(); // in future version this game will have 8 TargetImages var self = this ; this.idTag = "lie02"; this.x = 128; this.y = 24; this.width= 64; this.height = 64; this.speedX = 4; this.visible = true ; this.directionX = 1;
-
[The requirements]The requirements would be a description of exactly how the game is supposed to lookfrom a user's perspective, with all the details .The requirements should be what somebody who knows nothing about programming would ask you to make.[There are three rectangle areas on the screen .][Top of screen] shows game scores: screenSize , Good Hits , Total Shots .[Game area] Below that is a rectangular area where the game plays (game area)[bottom of screen] At bottom of screen there are two rows of buttons , 5 Buttons in all :row 1: "Throw" , row 2: "Pause" , "Play", "Clear Score" and "Quit" .[Game objects] There are three game objects (sprites): Target , Cowpie and Thrower .There are 2 moving sprites , and 1 stationary sprite , 3 sprites in total .Game objects movement:The Target moves back and forth across the screen .The Cowpie is a projectile which moves vertically aimed at the Target .Cowpie appears/shoots each time the Throw button is touched/pressed or clicked on ,and disappears when it hits the Target , or when it goes out of game area boundaries .When a cowpie hits the Target a sound is played and the score counter increases .The Thrower is stationary at bottom/center of screen . It is a launchpad for Cowpie .[Game sounds] There are three different sounds that play: 1) at game start ,2) when Cowpie hits Target , 3) when the Quit button is pressed .[The game objective]To hit Target with a Cowpie , racking up as high a score as possible .
We need to define what properties and methods these objects should have and how they interact with each other.
I've already started you off with a template of how your game should be designed, I'd like you to start filling in the blanks.
Ok , I'll work on these .
-
Here is an updated specs docs :
1. The [requirements]The requirements would be a description of exactly how the game is supposed to lookfrom a user's perspective, with all the details .The requirements should be what somebody who knows nothing about programming would ask you to make.[Game canvas]<canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas>[Top of page] shows game scores: screenSize , Good Hits , Total Shots .[sprite Movement] Game will have 2 moving sprites , and 1 stationary sprite , 3 sprites in total]<img id="lie02" src="sprites/lies02.png" width="64" height="64" /><img id="cowpie" src="sprites/cowpie.png" width="32" height="32" /><img id="thrower" src="sprites/thrower.png" width="64" height="64" />[sprite lies02.png] (the target) will be located at : lie02.x = 128; lie02.y = 24;and will move back and forth on screen[sprite cowpie.png] (the projectile) will be located initially at same coordinates as thrower.png sprite ,but when the Throw-Button is clicked (or the Up-Arrow is depressed) ,cowpie.png will move vertically toward the target , lies02.png .[sprite thrower.png] will be stationary , at location: this.x = (canvas.width / 2) -30; this.y = canvas.height - 64;thrower doesn't do anything , he's just a launchpad for cowpie.png .At [bottom of screen] will be two rows of buttons , 5 Buttons in all :row 1: "Throw" , row 2: , "Pause" , "Play", "Clear Score" and "Quit" .2. [The software design]For the software design, it would be good enough to make a diagram of all the objects in the game,their properties and how they interact with each other.[The object of the game is]To hit Target(lies02.png) with a cowpie.png , racking up as high a score as possible .[Game starts] with the playing of "cheeringCrowd.mp3" , with two sprites visible , lies02.png and thrower .[sprite movement][sprite "lies02.png"] moves continually back and forth across screen horizontaly .[sprite "cowpie.png"] moves vertically , when user 'clicks or touches' the "Throw" button,a new cowpie is created (cowpie.png) , and shoots vertically toward target (lies02.png) , attempting to collide with target .If cowpie.png collides with lies02.png , "Good Hits" score is incremented by 1 ,and sound file "CowMooSplat.mp3" is played .cowpies disappear on two occasions , when cowpie reaches top of page ( if(cowpies[thisPie].y < 1) ) ,and disappears when cowpie collides with lies02.png .[thrower.png]Each time the "Throw" button is depressed, a new cowpie is created , and "Total Shots" score is incremented by 1 .[soundfiles are loaded into an array here]var My_audio_Urls = ["sounds/CowMooSplat.mp3","sounds/GoodBye-Female.mp3","sounds/cheeringCrowd.mp3","sounds/oops.mp3"];And are played here:function playAudio(playThis) { playThis.play(); } // playThis = [object HTMAudioElement]var playThis is the name of the sound file to play , actually (cached_Audio_files[soundArrayIndex])Like this: {soundArrayIndex = My_audio_Urls.indexOf("sounds/CowMooSplat.mp3"); }playAudio(cached_Audio_files[soundArrayIndex]);[sprites are loaded into an array here]var allImgs = [ document.getElementById("thrower"), // 0document.getElementById("lie02"), ]; // 1[cowpies are updated in an array here]var cowpies = [];Cowpies are created here:function keyDownHandler(e) {if(e.keyCode == 87 || event.keyCode == 38 ) { // shoot = W or upArrowcowpies.push(cowpie = new Cowpie); // (pop) add cowpie in last position[Cowpies are removed here]if (thisIdTag == "lie02") {playsIt = My_audio_Urls.indexOf("sounds/CowMooSplat.mp3"); }playAudio(cached_Audio_files[playsIt]);cowpies.splice(thisPie,1); //alert("cowpies.length= "+ cowpies.length);and also removed here:if(cowpies.length > 0){for (var i = cowpies.length - 1; i >= 0; i--) {thisPie = i;cowpies[thisPie].y = cowpies[thisPie].y -3 ;ctx.drawImage(cowpieImg, cowpies[thisPie].x, cowpies[thisPie].y, cowpies[thisPie].width, cowpies[thisPie].height);if(cowpies[thisPie].y < 1) { cowpies[thisPie].idActive = false ; cowpies.splice(thisPie,1); } // out of bounds}}[Collision detection] occurs here and cowpie disappears :for (var i = cowpies.length - 1; i >= 0; i--) {thisPie = i;if (cowpies[thisPie].idActive) {if(self.visible) { // yes , do collision CKif (cowpies[thisPie].y < this.y + this.height && cowpies[thisPie].y + cowpies[thisPie].height > this.y){ if (cowpies[thisPie].x < this.x + this.width && cowpies[thisPie].x + cowpies[thisPie].width > this.x ){ // alert("YES , a collision has occurred");thisIdTag = this.idTag ; var findsIt = 0 ; var playsIt = 0 ;var yeslie = thisIdTag.startsWith("lie"); -
Hello & Thanks;
I usually do all this in my head , but I do see the benefits of writing it all down .1. The requirementsThe requirements would be a description of exactly how the game is supposed to lookfrom a user's perspective, with all the details :Game canvas stage:<canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas>Top of page shows game info: screenSize , Good Hits , Total Shots .Screen will show 3 visible sprites:<div id="assets"><img id="lie02" src="sprites/lies02.png" width="64" height="64" /><img id="cowpie" src="sprites/cowpie.png" width="32" height="32" /><img id="thrower" src="sprites/thrower.png" width="64" height="64" /></div> ,sprite lies02.png (the target) will be located at : lie02.x = 128; lie02.y = 24;and will move back and forth on screensprite thrower.png will be stationary at location: this.x = (canvas.width / 2) -30; this.y = canvas.height - 64;sprite cowpie.png (the projectile) will be located initially at same coordinates as thrower.png spritebut will move vertically toward the target .At bottom of screen will be 5 Buttons: line 1: "Throw", "Pause", line 2: "Play", "Clear Score" and "Quit" .2. The software designFor the software design, it would be good enough to make a diagram of all the objects in the game,their properties and how they interact with each other. (Sorry, I don't have any diagramming tools.)The object of game is :To hit Target with a cowpie , racking up as high a score as possible .Game starts with playing "cheeringCrowd.mp3" .and "lies02.png" starts its moving back and forth, across screen, behavior .thrower.png , when user 'clicks or touches' the "Throw button", a new cowpie is created (cowpie.png)and shoots toward target (lie02) , attempting to collide with Target .Also, each time the Throw button is depressed, The "Total Shots" score is incremented by 1 .If cowpie.png collides with lies02.png , "Good Hits" score is incremented by 1 ,and sound file "CowMooSplat.mp3" is played . Game converts "lies02.png" for use as "lie02" .Soundfiles are loaded into an array here:var My_audio_Urls = ["sounds/CowMooSplat.mp3","sounds/GoodBye-Female.mp3","sounds/cheeringCrowd.mp3","sounds/oops.mp3"];And souds are played here:function playAudio(playThis) { playThis.play(); }Sprites are loaded into an array here:var allImgs = [ document.getElementById("thrower"), // 0document.getElementById("lie02"), ]; // 1cowpies.png are updated in an array here:var cowpies = [];Cowpies are created here:function keyDownHandler(e) {if(e.keyCode == 87 || event.keyCode == 38 ) { // shoot = W or upArrowcowpies.push(cowpie = new Cowpie); // (pop) add cowpie in last positionCowpies are removed here:if (thisIdTag == "lie02") {playsIt = My_audio_Urls.indexOf("sounds/CowMooSplat.mp3"); }playAudio(cached_Audio_files[playsIt]);cowpies.splice(thisPie,1); //alert("cowpies.length= "+ cowpies.length);and removed here:if(cowpies.length > 0){for (var i = cowpies.length - 1; i >= 0; i--) {thisPie = i;cowpies[thisPie].y = cowpies[thisPie].y -3 ;ctx.drawImage(cowpieImg, cowpies[thisPie].x, cowpies[thisPie].y, cowpies[thisPie].width, cowpies[thisPie].height);if(cowpies[thisPie].y < 1) { cowpies[thisPie].idActive = false ; cowpies.splice(thisPie,1); } // out of bounds}}Collision detection occurs here:for (var i = cowpies.length - 1; i >= 0; i--) {thisPie = i;if (cowpies[thisPie].idActive) {if(self.visible) { // yes , do collision CKif (cowpies[thisPie].y < this.y + this.height && cowpies[thisPie].y + cowpies[thisPie].height > this.y){ if (cowpies[thisPie].x < this.x + this.width && cowpies[thisPie].x + cowpies[thisPie].width > this.x ){ // alert("YES , a collision has occurred");thisIdTag = this.idTag ; var findsIt = 0 ; var playsIt = 0 ;var yeslie = thisIdTag.startsWith("lie");Hope this helps! -
Did you spend any time designing this software before beginning the implementation phase?
I'd like to see the structure of your program, because it's really hard to tell what it's supposed to be from just the source code.
Sorry to say "no" .
I am learning .js as I go .
Is there a predefined structure for a .js game ?
I am happy to put it into a more readable format .
Thanks
-
Still no go for Code tag , so i'll just paste code below:
<!DOCTYPE html><html>-<head><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta charset="utf-8" /><title>Hillary Benghazi</title>--><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: #992D2D;height: 24px; width: 800px;border: none;}button {font-size: 14px;}</style></head><body onload="startGame()" onresize="onScrnResize()"><div><table align="center"><tr><td width="10%">Screen Size </td> <td id="ScreenSize" width="10%"> </td><td width="5%"></td><td width="10%"> Good Hits</td> <td id="GoodHitz" width="5%"> </td><td width="8%"></td><td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td></tr></table></div><div id="canvasDiv" align="center" ><canvas id="canvas" width="600" height="450" style="background-color:#992D2D"></canvas><br><br><button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">----Throw----</button><br><br><button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button>__ <button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button>__ <button onclick="clearIt()" ontouchstart="clearIt()">Clear</button>__ <button onclick="quitIt()" ontouchstart="quitIt()">Quit</button></div><div id="assets"><img id="lie02" src="sprites/lies02.png" width="64" height="64" /><img id="cowpie" src="sprites/cowpie.png" width="32" height="32" /><img id="thrower" src="sprites/thrower.png" width="64" height="64" /></div><script type='text/javascript'>//var lastTimestamp = 0;var oneTraceLine = ""; var traceYESorNO = false;var visible = true;var interval = 0; var tripsMax=0;var thisIdTag = ""; var resetSpeedX = 2; var newestPie =0;var idTag = "lie02"; var idTagTh = "thrower";var thisPie = 0;var tripsCnt=0; var directionX=1 ; var addit = 0; var thisCowpieActive = false;var countUpdateGameArea = 0;var oops = 0; var goodHits = 0; var totalShots = 0; var screenWidth = 0; var screenHeight=0;var oopsA; var goodHitsA; var totalShotsA; var screenSizeA; var screenWidthA; var screenHeightA;var yestru = true ; var yeslie = true ; var playThis = ""; var pausePlayCnt=0;var allImgsCnt = 0; var totalTrips = 0; var imWinningMsg = false;var My_audio_Urls = ["sounds/CowMooSplat.mp3","sounds/GoodBye-Female.mp3","sounds/cheeringCrowd.mp3","sounds/oops.mp3"];var cached_Audio_files = [];canvas = document.getElementById("canvas"); // get the canvasctx = canvas.getContext('2d'); // create canvas Context;var allImgs = [ document.getElementById("thrower"), // 0document.getElementById("lie02"), // 1] ;//var cowpies = [];var cowpieImg = document.getElementById("cowpie");//var Thrower = function () {var self = this;this.idTag = 'thrower';this.x = (canvas.width / 2) -30;this.y = canvas.height - 64;this.width= 64;this.height = 64;this.speedX = 4 ;this.speedY = 0;this.visible = true;this.directionX = 9;this.moveMe ;this.update = function() {self.speedX = resetSpeedX;if (self.x > canvas.width -50 ) { self.x = 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';thrower.x ; // = 0;thrower.y ; // = canvas.height - 64;thrower.width ; // = 64;thrower.height ; // = 64;thrower.speedX ; // = 1;thrower.speedY ; // = 0;thrower.visible ; // = true ;thrower.directionX ; // = 1;thrower.moveMe = false ;//var Cowpie = function () {var self = this;this.idTag = 'cowpie';this.idActive = true ;this.x = thrower.x;this.y = thrower.y;this.width= 32;this.height = 32;this.speedX = 0;this.speedY = -3;this.visible = true;this.directionY = -1;// this.moveMe = false;} // var cowpie//function startGame() {preload_audio_files(My_audio_Urls);playsIt = My_audio_Urls.indexOf("sounds/cheeringCrowd.mp3");playAudio(cached_Audio_files[playsIt]);myGameArea.start();}//function TargetImages() {var self = this ;this.idTag = "";this.x = 0;this.y = 4;this.width= 64;this.height = 64;this.speedX = 4;this.speedY = 0;this.tripsCnt =0;this.tripsMax=0;this.visible = true ;this.directionX = 1;this.update = function() {ctx.drawImage(allImgs[allImgsCnt], this.x, this.y, this.width, this.height);this.x = this.x + (this.speedX * this.directionX); // always = +1 or -1//idTag = this.idTag;//if(this.x > canvas.width - 2) {this.directionX = -1; // change directionthis.x = canvas.width - 2;this.tripsCnt++; totalTrips++;}//if(this.x < -64 ) {this.directionX = 1; // change directionthis.x = 0;this.tripsCnt++; totalTrips++;}//for (var i = cowpies.length - 1; i >= 0; i--) {thisPie = i;if (cowpies[thisPie].idActive) {if(self.visible) { // yes , do collision CKif (cowpies[thisPie].y < this.y + this.height && cowpies[thisPie].y + cowpies[thisPie].height > this.y){ if (cowpies[thisPie].x < this.x + this.width && cowpies[thisPie].x + cowpies[thisPie].width > this.x ){ // alert("YES , a collision has occurred");thisIdTag = this.idTag ; var findsIt = 0 ; var playsIt = 0 ;var yeslie = thisIdTag.startsWith("lie");if(yeslie){ switch(this.idTag) {case "lie02": lie02.visible=true ; goodHits += 1;// lie02.tripsCnt =0 ; lie02.x = -60; this.speedX = 0;// tru02.visible=true ; tru02.tripsCnt =0 ; tru02.x = 0; tru02.speedX = 1; break ;}}if (thisIdTag == "lie02") {playsIt = My_audio_Urls.indexOf("sounds/CowMooSplat.mp3"); }playAudio(cached_Audio_files[playsIt]);cowpies.splice(thisPie,1); //alert("cowpies.length= "+ cowpies.length);}}}}} // endof or (var i = cowpies.length - 1} // endof TargetImages this.update ;} // endof function TargetImages()//lie02 = new TargetImages();lie02.idTag = "lie02";lie02.x = 128;lie02.y = 24;lie02.visible = true ;lie02.tripsCnt =0;lie02.tripsMax=2;function updateGameArea(timestamp) {if (lastTimestamp == 0) {lastTimestamp = timestamp;}myGameArea.clear();updateScores ();imWinningMsg = false;allImgsCnt = 0; drawThrower();allImgsCnt = 1; if(lie02.visible) { lie02.speedX = resetSpeedX; lie02.update(); }allImgsCnt = 0; if(thrower.moveMe) { thrower.update(); drawThrower(); }if(cowpies.length > 0){for (var i = cowpies.length - 1; i >= 0; i--) {thisPie = i;cowpies[thisPie].y = cowpies[thisPie].y -3 ;ctx.drawImage(cowpieImg, cowpies[thisPie].x, cowpies[thisPie].y, cowpies[thisPie].width, cowpies[thisPie].height);if(cowpies[thisPie].y < 1) { cowpies[thisPie].idActive = false ; cowpies.splice(thisPie,1); } // out of bounds}}lastTimestamp = timestamp;gid = requestAnimationFrame(updateGameArea);} // End OF function updateGameArea()//function drawThrower() {ctx.drawImage(allImgs[allImgsCnt], thrower.x, thrower.y, thrower.width, thrower.height);}//var myGameArea = {start : function() {gid = requestAnimationFrame(updateGameArea);},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(updateGameArea);}}} // endof var myGameArea = {}//function clearIt() {oops = 0; goodHits = 0; totalShots = 0;// var num = 15; var n = num.toString();}//function updateScores () {goodHitsA = goodHits.toString();document.getElementById('GoodHitz').innerHTML = goodHitsA;totalShotsA = totalShots.toString();document.getElementById('TotalShotz').innerHTML = totalShotsA;}//document.addEventListener("keydown", keyDownHandler, false);document.addEventListener("keyup", keyUpHandler, false);function keyDownHandler(e) {// alert(" 1 cowpies.length - 1 " + newestPie);if(e.keyCode == 87 || event.keyCode == 38 ) { // shoot = W or upArrowcowpies.push(cowpie = new Cowpie); // add cowpie in last positionnewestPie = 0;newestPie = cowpies.length - 1; // put last pie created position into newestPiectx.drawImage(cowpieImg, cowpies[newestPie].x, cowpies[newestPie].y, cowpies[newestPie].width, cowpies[newestPie].height);totalShots ++;} // Endof shoot = W or upArrow} // endof unction keyDownHandler//function keyUpHandler(e) {if(e.keyCode == 39 || event.keyCode == 68) {rightPressed = false ;thrower.moveMe = false ;drawThrower();}else if(e.keyCode == 37 || event.keyCode == 65) {leftPressed = false;thrower.moveMe = false ;drawThrower();}}//function touchUpArrow() {cowpies.push(cowpie = new Cowpie); // add cowpie in last positionnewestPie = 0;newestPie = cowpies.length - 1; // put last pie created position into newestPiectx.drawImage(cowpieImg, cowpies[newestPie].x, cowpies[newestPie].y, cowpies[newestPie].width, cowpies[newestPie].height);totalShots ++;}//function quitIt() {playsIt = My_audio_Urls.indexOf("sounds/GoodBye-Female.mp3");playAudio(cached_Audio_files[playsIt]);}//function preload_audio_files(arr_files){for (var i = 0; i < arr_files.length; i++){cached_Audio_files = new Audio();cached_Audio_files.src = My_audio_Urls;cached_Audio_files.preload = "auto";}}// preload_audio_files(My_audio_Urls);function playAudio(playThis) {playThis.play();}function onScrnResize(){var w = window.innerWidth; var h = window.innerHeight;// alert("function onScrnResize()"); window.innerWidth canvas.widthdocument.getElementById("ScreenSize").innerHTML =window.innerWidth + " x " + window.innerHeight ;}</script></body></html> -
Try again
Hope this works...
-
same prob , I'll try again
-
Hello & Thanks :
I was able to strip it down even more:
The full game is here: 1) http://vmars.us/javascript/BenghaziGame.html 550 statements.
I have stripped it down to 330 statements here: 2) http://vmars.us/javascript/_StripHillary-Only.html .
I stripped it down to debug "why it doesn't run properly on a phone" .
Both run fine in PC browser .
1) runs on phone , but images get screwed up (on collisions) , often appearing on screen bottom .
Game uses interval code , not requestAnnmation .
2) runs on phone , but stops dead on collisions .
Game uses requestAnnmation code .
Any ideas what I am doing wrong ?
Thanks
Having probs with Code tag (see below for new code).
Thanks
-
<!DOCTYPE html>
<html>
-<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8" />
<title>Hillary Benghazi</title>
http://liesandcowpies.com/javascript/
-->
<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: #992D2D;
height: 24px; width: 800px;
border: none;
}
button {font-size: 14px;}
</style>
</head>
<body onload="startGame()" onresize="onScrnResize()">
<div>
<table align="center">
<tr>
<td width="12%"> Oops! Hits</td> <td id="Oop######z" width="5%"> </td>
<td width="8%"></td>
<td width="10%"> Good Hits</td> <td id="GoodHitz" width="5%"> </td>
<td width="8%"></td>
</tr>
<tr>
<td width="10%">Screen Size </td> <td id="ScreenSize" width="5%"> </td>
<td width="8%"></td>
<td width="8%"> Total Shots </td> <td id="TotalShotz" width="5%"> </td>
</tr>
</table>
</div>
<div id="canvasDiv" align="center" >
<canvas id="canvas" width="800" height="550" style="background-color:#992D2D"></canvas>
<br>
<button onclick="myGameArea.pause()" ontouchstart="myGameArea.pause()" >Pause</button>
<button onclick="myGameArea.play()" ontouchstart="myGameArea.play()" >Play</button>
___
<button onmousedown="touchLeftArrow()" onmouseup="touchEndLeft()" ontouchstart="touchLeftArrow()" ontouchend="touchEndLeft()">MoveLeft</button>
_
<button onclick="touchUpArrow()" ontouchstart="touchUpArrow()">Throw</button>
_
<button onmousedown="touchRightArrow()" onmouseup="touchEndRight()" ontouchstart="touchRightArrow()" ontouchend="touchEndRight()">MoveRight</button>
___
<button onclick="clearIt()" ontouchstart="clearIt()">Clear</button>
<button onclick="quitIt()" ontouchstart="quitIt()">Quit</button>
</div>
<div id="assets">
<img id="lie02" src="sprites/lies02.png" width="64" height="64" />
<img id="tru02" src="sprites/hillaryThrow-a.png" width="64" height="64" />
<img id="cowpie" src="sprites/cowpie.png" width="32" height="32" />
<img id="thrower" src="sprites/thrower.png" width="64" height="64" />
<img id="bgCompound" src="sprites/bgCompound.jpeg" width="320" height="191" />
<img id="manufacturer" src="sprites/manufacturer.png" width="180" height="100" />
</div>
<script type='text/javascript'>
//
var lastTimestamp = 0;
var oneTraceLine = ""; var traceYESorNO = false;
var visible = true;
var interval = 0; var tripsMax=0;
var thisIdTag = ""; var resetSpeedX = 2; var newestPie =0;
var idTag = "lie02"; var idTagTh = "thrower";
var thisPie = 0;
var tripsCnt=0; var directionX=1 ; var addit = 0; var thisCowpieActive = false;
var countUpdateGameArea = 0;
var oop######s = 0; var goodHits = 0; var totalShots = 0; var screenWidth = 0; var screenHeight=0;
var oop######sA; var goodHitsA; var totalShotsA; var screenSizeA; var screenWidthA; var screenHeightA;
var yestru = true ; var yeslie = true ; var playThis = ""; var pausePlayCnt=0;
var allImgsCnt = 0; var totalTrips = 0; var imWinningMsg = false;
var My_audio_Urls = ["sounds/CowMooSplat.mp3",
"sounds/GoodBye-Female.mp3","sounds/cheeringCrowd.mp3","sounds/oops.mp3"];
var cached_Audio_files = [];
canvas = document.getElementById("canvas"); // get the canvas
ctx = canvas.getContext('2d'); // create canvas Context;
var allImgs = [ document.getElementById("thrower"), // 0
document.getElementById("lie02"), // 1
document.getElementById("tru02"), // 2
document.getElementById("bgCompound"), // 3
document.getElementById("manufacturer") // 4
] ;
//
var cowpies = [];
var cowpieImg = document.getElementById("cowpie");
//
var Thrower = function () {
var self = this;
this.idTag = 'thrower';
this.x = (canvas.width / 2) -30;
this.y = canvas.height - 64;
this.width= 64;
this.height = 64;
this.speedX = 4 ;
this.speedY = 0;
this.visible = true;
this.directionX = 9;
this.moveMe ;
this.update = function() {
self.speedX = resetSpeedX;
if (self.x > canvas.width -50 ) { self.x = 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';
thrower.x ; // = 0;
thrower.y ; // = canvas.height - 64;
thrower.width ; // = 64;
thrower.height ; // = 64;
thrower.speedX ; // = 1;
thrower.speedY ; // = 0;
thrower.visible ; // = true ;
thrower.directionX ; // = 1;
thrower.moveMe = false ;
//
var Cowpie = function () {
var self = this;
this.idTag = 'cowpie';
this.idActive = true ;
this.x = thrower.x;
this.y = thrower.y;
// this.y = 69; // for testing only
this.width= 32;
this.height = 32;
this.speedX = 0;
this.speedY = -3;
this.visible = true;
this.directionY = -1;
// this.moveMe = false;
} // var cowpie
//
// workSpace:
// Endof workSpace
//
function startGame() {
preload_audio_files(My_audio_Urls);
playsIt = My_audio_Urls.indexOf("sounds/cheeringCrowd.mp3");
playAudio(cached_Audio_files[playsIt]);
alert( '<--- Arrow = move Left .\n' + '---> Arrow = move Right .\n' + ' Up Arrow = Throw Cowpie \n ' + '\n Best Screen size: Width = >840 , Height = > 640 .\n' +
'\n Click anywhere on screen to ACTIVATE BUTTONS .\n (Buttons coming soon...)');
myGameArea.start();
}
//
function TargetImages() {
var self = this ;
this.idTag = "";
this.x = 0;
this.y = 4;
this.width= 64;
this.height = 64;
this.speedX = 4;
this.speedY = 0;
this.tripsCnt =0;
this.tripsMax=0;
this.visible = true ;
this.directionX = 1;
this.update = function() {
ctx.drawImage(allImgs[allImgsCnt], this.x, this.y, this.width, this.height);
this.x = this.x + (this.speedX * this.directionX); // always = +1 or -1
//
idTag = this.idTag;
//
if(this.x > canvas.width - 2) {this.directionX = -1; // change direction
this.x = canvas.width - 2;
this.tripsCnt++; totalTrips++;
}
//
if(this.x < -64 ) {this.directionX = 1; // change direction
this.x = 0;
this.tripsCnt++; totalTrips++;
}
//
if(this.tripsCnt > this.tripsMax) { // time to change sprites
if(this.idTag == "lie02") {this.speedX = resetSpeedX; lie02.tripsCnt =0; this.visible=false ;
tru02.speedX=resetSpeedX ; tru02.visible=true ; // idTag = "lie02";
}
if(this.idTag == "tru02") {this.speedX = resetSpeedX; tru02.tripsCnt =0; this.visible=false ;
lie02.speedX=resetSpeedX ; lie02.visible=true ; // idTag = "lie01";
}
}
for (var i = cowpies.length - 1; i >= 0; i--) {
thisPie = i;
if (cowpies[thisPie].idActive) {
if(self.visible) { // yes , do collision CK
if (cowpies[thisPie].y < this.y + this.height && cowpies[thisPie].y + cowpies[thisPie].height > this.y)
{ if (cowpies[thisPie].x < this.x + this.width && cowpies[thisPie].x + cowpies[thisPie].width > this.x )
{ // alert("YES , a collision has occurred");
thisIdTag = this.idTag ; var findsIt = 0 ; var playsIt = 0 ;
var yestru = thisIdTag.startsWith("tru"); // if thisIdTag starts with "tru" then set yestru to "true"
var yeslie = thisIdTag.startsWith("lie");
if(yestru) { switch(this.idTag) {
case "tru02": tru02.visible = false ; tru02.tripsCnt =0 ; tru02.x = -60; this.speedX = 0; oop######s += 1;
lie02.visible=true ; lie02.tripsCnt =0 ; lie02.x = 0 ; lie02.speedX = resetSpeedX; break;
}
} // if(yestru) { switch(this.idTag)
if(yeslie){ switch(this.idTag) {
case "lie02": lie02.visible=false ; lie02.tripsCnt =0 ; lie02.x = -60; this.speedX = 0; goodHits += 1;
tru02.visible=true ; tru02.tripsCnt =0 ; tru02.x = 0; tru02.speedX = 1; break ;
}
}
if (thisIdTag == "lie02") {playsIt = My_audio_Urls.indexOf("sounds/CowMooSplat.mp3"); }
if (thisIdTag == "tru02") {playsIt = My_audio_Urls.indexOf("sounds/oops.mp3"); }
playAudio(cached_Audio_files[playsIt]);
cowpies.splice(thisPie,1); //alert("cowpies.length= "+ cowpies.length);
}
}
}
}
} // endof or (var i = cowpies.length - 1
} // endof TargetImages this.update ;
} // endof function TargetImages()
//
lie02 = new TargetImages();
lie02.idTag = "lie02";
lie02.x = 128;
lie02.y = 24;
lie02.visible = false ;
lie02.tripsCnt =0;
lie02.tripsMax=2;
//
tru02 = new TargetImages()
tru02.idTag = "tru02";
tru02.x = 0;
tru02.y = 86;
tru02.visible = true ;
tru02.tripsCnt =0;
tru02.tripsMax=2;
//
function updateGameArea(timestamp) {
if (lastTimestamp == 0) {
lastTimestamp = timestamp;
}
myGameArea.clear();
updateScores ();
imWinningMsg = false;
ctx.drawImage(allImgs[3], 0, canvas.height - 195, 320, 191); // show bgCompound
ctx.drawImage(allImgs[4], canvas.width -180, canvas.height - 104, 180, 100); // show manufacturer
allImgsCnt = 0; drawThrower();
allImgsCnt = 1; if(lie02.visible) { lie02.speedX = resetSpeedX; lie02.update(); }
allImgsCnt = 2; if(tru02.visible) { tru02.speedX = resetSpeedX; tru02.update(); }
allImgsCnt = 0; if(thrower.moveMe) { thrower.update(); drawThrower(); }
if(cowpies.length > 0){
for (var i = cowpies.length - 1; i >= 0; i--) {
thisPie = i;
cowpies[thisPie].y = cowpies[thisPie].y -3 ;
ctx.drawImage(cowpieImg, cowpies[thisPie].x, cowpies[thisPie].y, cowpies[thisPie].width, cowpies[thisPie].height);
if(cowpies[thisPie].y < 1) { cowpies[thisPie].idActive = false ; cowpies.splice(thisPie,1); } // out of bounds
}
}
lastTimestamp = timestamp;
gid = requestAnimationFrame(updateGameArea);
} // End OF function updateGameArea()
//
function drawThrower() {
ctx.drawImage(allImgs[allImgsCnt], thrower.x, thrower.y, thrower.width, thrower.height);
}
//
var myGameArea = {
start : function() {
gid = requestAnimationFrame(updateGameArea);
},
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(updateGameArea);
}
}
} // endof var myGameArea = {}
//
function clearIt() {
oop######s = 0; goodHits = 0; totalShots = 0;
// var num = 15; var n = num.toString();
}
//
function updateScores () {
oop######sA = oop######s.toString();
document.getElementById('Oop######z').innerHTML = oop######sA;
goodHitsA = goodHits.toString();
document.getElementById('GoodHitz').innerHTML = goodHitsA;
totalShotsA = totalShots.toString();
document.getElementById('TotalShotz').innerHTML = totalShotsA;
}
//
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
/* document.addEventListener( 'keyup', function( e ) {
console.log( 'Keyup event' );
console.log( e.keyCode );
} );
*/
function keyDownHandler(e) {
// alert(" 1 cowpies.length - 1 " + newestPie);
if(e.keyCode == 39 || event.keyCode == 68) { // move right D or --->
// alert("RIGHT.thrower.directionX = 9;");
thrower.directionX = 1;
thrower.moveMe = true ;
if (thrower.x > canvas.width -40) { thrower.moveMe = false ; }
}
if(e.keyCode == 37 || event.keyCode == 65) { // move left A or <---
// alert("LEFT.thrower.directionX = -9;");
thrower.directionX = -1;
thrower.moveMe = true ;
if (thrower.x < 3) { thrower.moveMe = false ; }
}
if(e.keyCode == 87 || event.keyCode == 38 ) { // shoot = W or upArrow
cowpies.push(cowpie = new Cowpie); // add cowpie in last position
newestPie = 0;
newestPie = cowpies.length - 1; // put last pie created position into newestPie
ctx.drawImage(cowpieImg, cowpies[newestPie].x, cowpies[newestPie].y, cowpies[newestPie].width, cowpies[newestPie].height);
totalShots ++;
} // Endof shoot = W or upArrow
} // endof unction keyDownHandler
//
function keyUpHandler(e) {
if(e.keyCode == 39 || event.keyCode == 68) {
rightPressed = false ;
thrower.moveMe = false ;
drawThrower();
}
else if(e.keyCode == 37 || event.keyCode == 65) {
leftPressed = false;
thrower.moveMe = false ;
drawThrower();
}
}
function mouseMoveHandler(e) {
// var relativeX = e.clientX - canvas.offsetLeft;
// if(relativeX > 0 && relativeX < canvas.width) {
// paddleX = relativeX - paddleWidth/2;
// }
}
//
function touchUpArrow() {
cowpies.push(cowpie = new Cowpie); // add cowpie in last position
newestPie = 0;
newestPie = cowpies.length - 1; // put last pie created position into newestPie
ctx.drawImage(cowpieImg, cowpies[newestPie].x, cowpies[newestPie].y, cowpies[newestPie].width, cowpies[newestPie].height);
totalShots ++;
}
//
function touchLeftArrow() {
//alert("function touchLeftArrow() {");
thrower.directionX = -1;
thrower.moveMe = true ;
if (thrower.x < 3) { thrower.moveMe = false ; }
}
//
function touchEndLeft() {
//alert("function touchEndLeft() {");
leftPressed = false;
thrower.moveMe = false ;
drawThrower();
}
//
function touchRightArrow() {
//alert("function touchRightArrow() {");
thrower.directionX = 1;
thrower.moveMe = true ;
if (thrower.x > canvas.width -40) { thrower.moveMe = false ; }
}
//
function touchEndRight() {
//alert("function touchEndRight() {");
rightPressed = false ;
thrower.moveMe = false ;
drawThrower();
}
//
function quitIt() {
playsIt = My_audio_Urls.indexOf("sounds/GoodBye-Female.mp3");
playAudio(cached_Audio_files[playsIt]);
setTimeout(function() {
window.location = "http://liesandcowpie...e-Tutorial.html"; }, 1000);
}
//
function preload_audio_files(arr_files)
{
for (var i = 0; i < arr_files.length; i++)
{
cached_Audio_files = new Audio();
cached_Audio_files.src = My_audio_Urls;
cached_Audio_files.preload = "auto";
}
}
// preload_audio_files(My_audio_Urls);
function playAudio(playThis) {
playThis.play();
}
function showWinningMsg() {
imWinningMsg = true;
// alert('showWinningMsg()');
ctx.drawImage(allImgs[6], 250, 325, 129, 60);
}
function onScrnResize(){
var w = window.innerWidth; var h = window.innerHeight;
// alert("function onScrnResize()"); window.innerWidth canvas.width
document.getElementById("ScreenSize").innerHTML =
// screen.width + " x " + screen.height ;
// w + " x " + h ;
canvas.width + " x " + canvas.height ;
}
function ForceUpArrow(){
// if( countUpdateGameArea == 10){
newestPie= 0 ;
cowpies.push(cowpie = new Cowpie); // add cowpie in last position
cowpies.speedY = 12;
newestPie = cowpies.length - 1; // put last pie created position into newestPie
ctx.drawImage(cowpieImg, cowpies[newestPie].x, cowpies[newestPie].y, cowpies[newestPie].width, cowpies[newestPie].height);
// alert("ForcedUpArrow: Should see a cowpie now newestPie= " + newestPie);
// }
}
//
</script>
</body>
</html>
-
Having Trouble with <> code
-
Hello & Thanks :
The full game is here: 1) http://vmars.us/javascript/BenghaziGame.html 550 statements.
I have stripped it down to 450 statements here: 2) http://vmars.us/javascript/Hillary-Only-Phone.html .
I stripped it down to debug "why it doesn't run properly on a phone" .
Both run fine in PC browser .
1) runs on phone , but images get screwed up (on collisions) , often appearing on screen bottom .
Game uses interval code , not requestAnnmation .
2) runs on phone , but stops dead on collisions .
Game uses requestAnnmation code .
Any ideas what I am doing wrong ?
Thanks
-
Ah , works great , Thanks !
-
Foxy Mod ;
I still working on your suggestions:
You have quite a lot of messy code. Just replace this:
var TargetImages = (function () {
function TargetImages() {
// Big block of code
} // endof function TargetImages()
return TargetImages;
})(); // endof var TargetImages = (function ()With this:
function TargetImages() {
// Big block of code
}It's more readable and more efficient.
I am hung up on how to turn tru01 into a function:
truth01 = new TargetImages();truth01.idTag = "tru01";truth01.x = 0;truth01.y = 40;truth01.width = 64;truth01.height = 64;truth01.speedX = 2;truth01.speedY = 0;truth01.tripsCnt = 0;truth01.tripsMax = 2;truth01.visible = true;truth01.directionX = 1;//var TargetImages = (function() {function TargetImages() {this.nameTag = 'tru01'this.x = 0;this.y = 0;this.width = 32;this.height = 32;this.speedX = 4;this.speedY = 0;this.tripsCnt = 0;this.tripsMax = 2;this.visible = true;this.directionX = 1;this.update = function() {ctx.drawImage(targetImgs[targetImgsCnt], this.x, this.y, this.width, this.height);this.x = this.x + (this.speedX * this.directionX); // always = +1 or -1idTag = this.idTag;if (this.idTag == "truth01") {this.speedX = 0;truth01.tripsCnt = 0;lies01.speedX = 3;idTag = "lies01";this.visible = false;lies01.visible = true;}}}}return TargetImages;})();I tried a few things , like this:var tru01 = new TargetImages();var self = this;tru01.idTag = "tru01";tru01.x = 128;tru01.y = 24;tru01.visible = false ;tru01.tripsCnt =0;tru01.tripsMax=0;//But I keep getting this type of error:
Uncaught TypeError: tru01.update is not a function
I need some help .
Thanks
-
Foxy Mod ,
Ah , much better :
liesandcowpies.com/javascript/measureTimestamp.html
<!DOCTYPE html><html><head><meta charset="utf-8"><!----></head><body><canvas id="canvas" width="400" height="200" style="background-color:#992D2D"></canvas><br><button id="start_Me" onmouseup="startMe()" ontouchend="startMe()">Click to Start Me</button><br><br><button id="stop_Me" onmouseup="stopMe()" ontouchend="stopMe()">Click to Stop Me</button><br><br><p id="traceMsg"></p><script>//var gid;var loopCount = 0;var lastTimestamp = 0;var loopDuration = 0;var durationSums = 0;var durationAverage = 0;var oneTraceLine = '';//var start = null;var element = document.getElementById("stop_Me");element.style.position = 'absolute';function step(timestamp) {if (lastTimestamp == 0) {lastTimestamp = timestamp;}if (!start) start = timestamp;var progress = timestamp - start;element.style.left = Math.min(progress / 10, 400) + "px";loopCount += 1;loopDuration = timestamp - lastTimestamp;if (loopCount < 12) {writeTraceLog("loopCount = " + loopCount + " , loopDuration = " + loopDuration);durationSums = durationSums + loopDuration}lastTimestamp = timestamp;if (loopCount > 399) {stopMe();} else {// Only called if loopCount < 400gid = window.requestAnimationFrame(step);}}//window.requestAnimationFrame(step);function startMe() {gid = window.requestAnimationFrame(step);writeTraceLog('start: gid = window.requestAnimationFrame(step);')}function stopMe() {cancelAnimationFrame(gid);writeTraceLog('stop: function cancelAnimationFrame gid');writeTraceLog("durationSums = " + durationSums);durationAverage = durationSums / 10;writeTraceLog("durationAverage = " + durationAverage);// window.location.reload();}function writeTraceLog(oneTraceLine){document.getElementById("traceMsg").innerHTML += (oneTraceLine + "<br>");}</script></body></html>Thank You very much !
-
Thanks All ,Ah , finally , I get it .I misread
And thought I must use 'timestamp' in some way ,var start = null;var element = document.getElementById("SomeElementYouWantToAnimate");element.style.position = 'absolute';function step(timestamp) {if (!start) start = timestamp;var progress = timestamp - start;element.style.left = Math.min(progress/10, 200) + "px";if (progress < 2000) {window.requestAnimationFrame(step);}}window.requestAnimationFrame(step);until I started tinkering with the code above ,turning it into this :<!DOCTYPE html><html><head><meta charset="utf-8"></head><body><canvas id="canvas" width="400" height="200" style="background-color:#992D2D"></canvas><br><button id="start_Me" onmouseup="startMe()" ontouchend="startMe()">Click to Start Me</button><br><br><button id="stop_Me" onmouseup="stopMe()" ontouchend="stopMe()">Click to Stop Me</button><script>//var gid;var loopCount = 0;var lastTimestamp = 0;var LoopDuration = 0;var durationAverage = 0;//var start = null;var element = document.getElementById("stop_Me");element.style.position = 'absolute';function step(timestamp) {if (loopCount < 1) {durationAverage =0; LoopDuration = 0;}if (!start) start = timestamp;var progress = timestamp - start;element.style.left = Math.min(progress/10, 400) + "px";// if (progress < 2000) {loopCount += 1; // = loopCount + 1;LoopDuration = timestamp - lastTimestamp;if (loopCount < 11) {console.log("LoopDuration = " + LoopDuration) ;durationAverage = durationAverage + LoopDuration}lastTimestamp = timestamp;if (loopCount > 399) {stopMe();window.location.reload();}gid = window.requestAnimationFrame(step);// }}//window.requestAnimationFrame(step);function startMe() {gid = window.requestAnimationFrame(step);console.log('start: gid = window.requestAnimationFrame(step);')}function stopMe() {cancelAnimationFrame(gid);console.log('stop: function cancelAnimationFrame gid');console.log("durationsTotal = " + durationAverage) ;durationAverage = durationAverage / 10.0;console.log("durationAverage = " + durationAverage) ;}</script></body></html>This works as intended , except for the 1st loopDurationwhich reports as '2454857.5550000095' .I am curious why that happens .It seems that loopDuration runs between 16.xxx to 32.xxx .Also , there is a 1 ==> 2 second delayfor this to happen :window.location.reload();Another anomaly (to me) is that when I run code online :It runs fine except that when it encountersif (loopCount > 399) {stopMe();window.location.reload();}It goes into a loop .And I have to use TaskManager to shut it down .Thanks -
The timstamp is passed as a parameter to your animate() function.
function animate(TIMESTAMP) { console.log(TIMESTAMP);
Thanks ,
but I don't understand :
Is 'TIMESTAMP' a js reserved word or function .
I am having trouble to piece it all together .
I decided to make rAF a separate issue :
And then come back to the other code problems you mentioned above .
Thanks
-
Hello & Thanks ,
From topic : http://w3schools.invisionzone.com/index.php?showtopic=55453#entry304554
I have lots of questions about requestAnimationFrame
So I decided to make this question a separate issue :
The code size is trimmed way down from the actual running game ,
to make it easy to follow .
Here is the updated function to start and stop animation :
var myGameArea = {start: function() {thrower.moveMe = false;// interval = setInterval(updateGameArea, 5);gid = requestAnimationFrame(updateGameArea);},clear: function() {ctx.clearRect(0, 0, canvas.width, canvas.height);},stop: function() {// clearInterval(this.interval);cancelAnimationFrame(gid);console.log('stop: function cancelAnimationFrame GID');}}How come the 'stop' function doesn't work ?
<div id="buttons" class="center" align="center"><button type="button" onclick="myGameArea.start()" ontouchstart="myGameArea.start()">Start</button><button type="button" onclick="myGameArea.stop()" ontouchstart="myGameArea.stop()">Stop</button></div>And here is the game loop :
Also :function updateGameArea() {setTimeout(function() {myGameArea.clear();targetImgsCnt = 0;if (idTag == "truth01" && truth01.visible) {truth01.update();}targetImgsCnt = 1;if (idTag == "lies01" && lies01.visible) {lies01.update();}targetImgsCnt = 2;if (thrower.visible) {if (thrower.moveMe) {thrower.update();}ctx.drawImage(targetImgs[targetImgsCnt], thrower.x, thrower.y, thrower.width, thrower.height);thisIdTag = thrower.idTag;visible = this.visible;tripsMax = this.tripsMax;tripsCnt = this.tripsCnt;directionX = this.directionX;thisx = this.x;}requestAnimationFrame(updateGameArea);}, 1000 / framesPerSecond);}var gid;var framesPerSecond = 17;Here are my ?s :How come the 'stop' function doesn't work ?Why is it so slow ? I have tried several speeds , but always , soooo slow .And this really puzzles me : I can increase the speed by simply clickingthe 'start' button repeatedly .Though , I suppose I could add another 'start' buttonand call it 'Increase Speed' buttonI would rather use the methods (timestamp & performance.now) here :
and here :
But I can't piece it all together , to make it work .
I would like some help with this also .
Thanks
Trouble with centering table data ?
in HTML/XHTML
Posted