Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Posts posted by vmars316

  1. 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>
  2. 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

  3. 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

  4. 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 ?

  5. [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;
    
    
    
    
    

     

  6. [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 .

    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 .

  7. 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");
  8. 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!
  9. 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

  10. 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 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>
  11. 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

  12. 
    

     

    <!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>

     

  13. 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

     

  14. 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 -1
    idTag = 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

  15. 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 < 400
    gid = 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 !

  16. Thanks All ,
    Ah , finally , I get it .
    I misread
    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);

     

    And thought I must use 'timestamp' in some way ,
    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 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
  17.  

    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

  18. 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 :

    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);
    }
    Also :
    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 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...