Jump to content

vmars316

Members
 View Profile  See their activity

  • Posts

    480

  • Joined

  • Last visited

 Content Type 

Everything posted by vmars316

  1. vmars316
  2. vmars316
    Thanks This is working ok . . I forgot I needed to reference id="buttonsArea" as #buttonsArea . Thanks
  3. vmars316
    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> 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: #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>
  4. vmars316
    Trouble with <> code .
  5. vmars316
    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
  6. vmars316
    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
  7. vmars316
    id.tag : to identify which Target has focus . directionX & Y : to identify which direction Target is moving . Pls, what is your rational for this ?
  8. vmars316
    [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;
  9. vmars316
    [The requirements] The requirements would be a description of exactly how the game is supposed to look from 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 . Ok , I'll work on these .
  10. vmars316
    Here is an updated specs docs : 1. The [requirements] The requirements would be a description of exactly how the game is supposed to look from 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"), // 0 document.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 upArrow cowpies.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 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 yeslie = thisIdTag.startsWith("lie");
  11. vmars316
    Hello & Thanks; I usually do all this in my head , but I do see the benefits of writing it all down . 1. The requirements The requirements would be a description of exactly how the game is supposed to look from 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 screen sprite 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 sprite but 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 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. (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"), // 0 document.getElementById("lie02"), ]; // 1 cowpies.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 upArrow cowpies.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 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 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 yeslie = thisIdTag.startsWith("lie"); Hope this helps!
  12. vmars316
    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
  13. vmars316
    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> http://vmars.us/javascript/_StripHillaryOnly.html 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="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 canvas ctx = canvas.getContext('2d'); // create canvas Context; var allImgs = [ document.getElementById("thrower"), // 0 document.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 direction this.x = canvas.width - 2; this.tripsCnt++; totalTrips++; } // if(this.x < -64 ) {this.directionX = 1; // change direction this.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 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 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 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 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 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.width document.getElementById("ScreenSize").innerHTML = window.innerWidth + " x " + window.innerHeight ; } </script> </body> </html>
  14. vmars316
    Try again Hope this works...
  15. vmars316
    same prob , I'll try again
  16. vmars316
    Having probs with Code tag (see below for new code). Thanks
  17. vmars316
    <!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>
  18. vmars316
    Having Trouble with <> code
  19. vmars316
    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
  20. vmars316
    Ah , works great , Thanks !
  21. vmars316
    Foxy Mod ; I still working on your suggestions: You have quite a lot of messy code. Just replace this: With this: It's more readable and more efficient. I am hung up on how to turn tru01 into a function: I tried a few things , like this: But I keep getting this type of error: Uncaught TypeError: tru01.update is not a function I need some help . Thanks
  22. vmars316
    Foxy Mod , Ah , much better : liesandcowpies.com/javascript/measureTimestamp.html Thank You very much !
  23. vmars316
    Thanks All , Ah , finally , I get it . I misread And thought I must use 'timestamp' in some way , until I started tinkering with the code above , turning it into this : This works as intended , except for the 1st loopDuration which 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 delay for this to happen : window.location.reload(); Another anomaly (to me) is that when I run code online : It runs fine except that when it encounters if (loopCount > 399) { stopMe(); window.location.reload(); } It goes into a loop . And I have to use TaskManager to shut it down . Thanks
  24. vmars316
    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
  25. vmars316
    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 : How come the 'stop' function doesn't work ? And here is the game loop : Also : 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 clicking the 'start' button repeatedly . Though , I suppose I could add another 'start' button and call it 'Increase Speed' button I 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
×
×
  • Create New...