Jump to content

vmars316

Members
 View Profile  See their activity

  • Posts

    431

  • Joined

  • Last visited

 Content Type 

Everything posted by vmars316

  1. vmars316
    https://validator.w3.org/nu/#textarea Thanks , no errors now . This is the closest I can get so far . Still table 1 has too much space at top and bottom . Can you help me out here . Thanks <!DOCTYPE html> <html lang="en"> <head> <title>Table spacing problem</title> <style> .button{ background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif ; font-size: 24px; cursor: pointer; } span.RedTxt{ color: red; } table.center { margin-right:auto; margin-left:auto; } table { border: 8px solid #D9B04E; width: auto; height: auto; } #DivWholePage { border: 24px solid #282A36; } </style> </head> <body> <div id="DivWholePage"> <div id="TopRightImage" style="text-align:center;"> <br><button class="button">Dancing Man Kit -Docs & Pics</button> </div> <!-- TopRightImage --> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh;"> <tbody> <tr> <td> <img src="Arms-1.png" alt="SmileyFace.png"> <br><br>&nbsp; &nbsp; &nbsp; &nbsp; Attaching Arms </td> <td> <br><br> Attaching Arms : <br><br> Notice how the forearms turn out and away from the body . <br>The purpose of this is so that the arms don't collide with the body <br>as they swing while dancing . <br>To make this happen , you need to twist the forearm out a bit <br>as you glue the upper arm to the forearm . Make one forearm <br>twist to the right . And twist the other forearm to the left , <br> as shown in the photo to left . </td> </tr> </tbody> </table> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td > <img src="ArmsToShoulder-2.png" alt="SmileyFace.png"> <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png"> <img src="Axle-EnndCap-1.png" alt="SmileyFace.png"> <br> Attaching Arms to Shoulders </td> <td> <br> Attaching Arms to Shoulders : <br><br> Make sure the forearms turn out away from the body . <br>Thread the axle thru the arm and thru the <br>end cap piece and into the shoulder hole . <br>Test it out to make sure axle is the correct length . <br>as shown in photos at left . </td> </tr> </tbody> </table> </div> <!-- <div id="DivWholePage"> --> </body> </html>
  2. vmars316
    This works for the 2nd <td> But for 1st <td> there is 200px of space of the bottom . td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; vertical-align: top; } so right now code looks like: <!DOCTYPE html> <html> <head> <style> .button{ background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif ; font-size: 24px; cursor: pointer; } span.RedTxt{ color: red; } table.center { margin-right:auto; margin-left:auto; } table { border: 8px solid #D9B04E; } td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; vertical-align: top; } #DivWholePage { border: 24px solid #282A36; } </style> </head> <body> <div id="DivWholePage"> <div id="TopRightImage" style="text-align:center;"> <br><button class="button">Dancing Man Kit -Docs & Pics</button></a> </div> <!-- TopRightImage --> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr > <td> <img src="Arms-1.png" alt="SmileyFace.png"> <br><br>&nbsp; &nbsp; &nbsp; Attaching Arms </td> <td > <br><br> Attaching Arms : <br><br> Notice how the forearms turn out and away from the body . <br>The purpose of this is so that the arms don't collide with the body <br>as they swing while dancing . <br>To make this happen , you need to twist the forearm out a bit <br>as you glue the upper arm to the forearm . Make one forearm <br>twist to the right . And twist the other forearm to the left , <br><==== as shown in the photo . </td> </tr> </tbody> </table> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td > <img src="ArmsToShoulder-2.png" alt="SmileyFace.png"> <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png"> <img src="Axle-EnndCap-1.png" alt="SmileyFace.png"> <br> Attaching Arms to Shoulders </td> <td> <br> Attaching Arms to Shoulders : <br><br> Make sure the forearms turn out away from the body . <br>Thread the axle thru the arm and thru the <br>end cap piece and into the shoulder hole . <br>Test it out to make sure axle is the correct length . <br>You may have cut the axle a bit . <br>Next glue the axle into the endcap , making sure to keep <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> . <br>When glue is dry , mount the arm making sure the arm <br>swings freely . If not you may have to sand off excess glue . <br>Next glue the axle (which now includes the arm and endcap) <br>into the shoulder hole . Again making sure the arm swings . <br>Repeat same procedure for the other arm . <br><==== as shown in photos . </td> </tr> </tbody> </table> <br><br> </div id="DivWholePage"> </body> </html> How do I eliminate all that space at bottom ? Thanks
  3. vmars316
    When I use this: td { padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; } The right and left padding works fine but top and bottom padding don't work . Still need help Thanks
  4. vmars316
    Thanks , Can someone give me an example of correct css & html coding . In the mean time I will look for how to's on css margins . Thanks
  5. vmars316
    Hello & Thanks , win 10 , chrome: <!DOCTYPE html> <html> <head> <style> .button{ background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif ; font-size: 24px; cursor: pointer; } span.RedTxt{ color: red; } table.center { margin-left:auto; margin-right:auto; } table { border: 8px solid #D9B04E; } #DivWholePage { border: 24px solid #282A36; } } </style> </head> <body> <div id="DivWholePage"> <div id="TopRightImage" style="text-align:center;"> <br><button class="button">Dancing Man Kit -Docs & Pics</button></a> </div> <!-- TopRightImage --> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td width="226" height="200"> <img src="Arms-1.png" alt="SmileyFace.png"> <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Attaching Arms </td> <td> Attaching Arms : <br><br> Notice how the forearms turn out and away from the body . <br>The purpose of this is so that the arms don't collide with the body <br>as they swing while dancing . <br>To make this happen , you need to twist the forearm out a bit <br>as you glue the upper arm to the forearm . Make one forearm <br>twist to the right . And twist the other forearm to the left , <br><==== as shown in the photo . </td> </tr> </tbody> </table> <br><br> <!-- =====================NEW TABLE==================== --> <table class="center" style="text-align: left; height:100vh; " > <tbody> <tr> <td width="226" height="200"> <img src="ArmsToShoulder-2.png" alt="SmileyFace.png"> <br><br><img src="ArmsToShoulder-1.png" alt="SmileyFace.png"> <img src="Axle-EnndCap-1.png" alt="SmileyFace.png"> <br> Attaching Arms to Shoulders </td> <td> Attaching Arms to Shoulders : <br><br> Make sure the forearms turn out away from the body . <br>Thread the axle thru the arm and thru the <br>end cap piece and into the shoulder hole . <br>Test it out to make sure axle is the correct length . <br>You may have cut the axle a bit . <br>Next glue the axle into the endcap , making sure to keep <br>any glue from spreading up the axle -another <span class="RedTxt">danger zone</span> . <br>When glue is dry , mount the arm making sure the arm <br>swings freely . If not you may have to sand off excess glue . <br>Next glue the axle (which now includes the arm and endcap) <br>into the shoulder hole . Again making sure the arm swings . <br>Repeat same procedure for the other arm . <br><==== as shown in photos . </td> </tr> </tbody> </table> <br><br> </div id="DivWholePage"> </body> </html> Pls , why does 1st table have more space showing at the Top than does 2nd table ? I would like them both to show 1 <br> from the top . Thanks
  6. vmars316
    Add me to the Notpad++ list :)
  7. vmars316
    Please respond , Thanks
  8. vmars316
    Thanks , got rid of '}' & width "" : Width is working fine now . How come this page can use html { height: 100%; https://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_height_percent Also , on same page they are showing Resize values . Theoretically , could I likewise calculate a Resize value , then plug this absolute value into "td height: value" ? ? Also , I am using css .thumb:hover, .thumb:hover span { . It works fine when not using <iframe . But when I use <iframe , instead the hover object and <img show up side by side . Is there a way to get hover working ? Thanks
  9. vmars316
    Hello & Thanks, Yes, the <iframe> is working , But shows up as very small height & width . My attempts to get height:100%; are not working . I whittled down my code. Can you take a look at my code & see what's the prob . Thanks <!DOCTYPE html> <head> <!-- http://vmars.us/index.html http://vmars.us/default.html --> <title> vmars.us.html </title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <style type="text/css"> /* html5 semantics tags */ article, aside, div, figure, footer, header, hgroup, menu, nav, p, section, summary{ display: block; } html { height: 100%; } #thumbwrap { } .thumb img { } .thumb span { } } body { font-size: 18px; line-height:1.25em; height: 100%;} iframe {height: 100%; } table { border-style: solid; border-color: #5A697D; border-width: 20px; } #tdLeft { text-align: center; height:100%; width:25%"; } #tdRight { text-align: left; height:100%; width:75%"; } h1, h2, h3 {font-size:22px;} </style> </head> <body style="background-color:#000000"> <!-- <body style="color:#FFFFFF"> --> <!-- =======================================TOP TABLE======== --> <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2" > <tbody> <tr> <!-- ============================================== --> <td id="tdLeft" style="background-color:#D3DDEB; text-align:center; " > <!-- <div id="topLeft" style="text-align:center;"> --> <br> <iframe src="buttons_iframe.html" style="border:none; "> </iframe> <!-- </div> <!-- id="topLeft" --> </td> <!-- https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe_frameborder_css --> <td id="tdRight" style="text-align: center; " bgcolor="#FFFFFF"> <div id="TopRightImage" style="text-align:center;"> <img src="http://vmars.us/javascript/images/Welcome-gold.png" alt="SmileyFace.png" width="150" height="35"> </div> <!-- TopRightImage --> <div id="TopRightContent" style="text-align:center;"> <br><br> ************************************ , <br><br> ============================= . <br><br> ********** <br><br> ============================= . <br><br> ************************************ : <br><br> <a href="http://vmars.us/freeware/clipLog/clipLog-Help.html" target="_blank">clipLog/clipFind : Personal Information Manager</a> <br><br> <a href="http://vmars.us/freeware/myFavs/myFavs_Help.html" target="_blank">myFavs : Internet Bookmark Manager</a> <br><br> <a href="http://vmars.us/freeware/mySort/mySort_Help.html" target="_blank">mySort : Handy Text Sorter</a> <br> <br>"All things in moderation , except for love and forgiveness" <br> </div> <!-- TopRightContent --> </td> </tr> </tbody> </table> <br> <!-- ============================================== --> </body> </html>
  10. vmars316
    Foxy Mod Thanks
  11. vmars316
    Hello & Thanks, I am trying to get an iframe with no borders without specifying exact width: These aren't working : <iframe seamless height="100%" width="100%" src="buttons_iframe.html" ></iframe> <iframe seamless="seamless" height="100%" width="100%" src="buttons_iframe.html" ></iframe> Pls, what is the proper way ? Thanks
  12. vmars316
    Thanks, I am trying to send a msg (popup window) without a Button. Guess I'll have to do this: document.getElementById("currentLevelLbl").innerHTML = currentLevelLbl + startClockAt ; or maybe a popup-image. Thanks
  13. vmars316
    Aw shucks , Thanks
  14. vmars316
    Thanks Ingolme , I plan to delete the "<body onload = "myFunction()">", and the "<button onclick="myFunction()">msgBox</button>" code. And I want to call "myFunction" from the js code. Is there a way to get pure js to call "myFunction" from within the same page? Thanks
  15. vmars316
    Hello & Thanks, I am getting error msg: jsMsgBoxPlusTinker.html:13 Uncaught TypeError: Cannot read property 'document' of null at myFunction And I can't see my error, need help from someone with better eyes than me, Thanks: <!DOCTYPE html> <html> <title>file:///C:/vmars.us/javascript/SimpleGame-js/ClaustrophobiaGame/jsMsgBoxPlusTinker.html </title> <body onload = "myFunction()"> <p>Click Button to open a msgBox</p> <button onclick="myFunction()">msgBox</button> <script type = "text/javascript" > var myWindowHtml = '<p>Yes , No , Continue , Cancel ?</p><p><button id="yesBtn">Yes</button><button id="noBtn">No</button><button id="continueBtn">Continue</button><button id="cancelBtn">Cancel</button></p>'; var myWindow; var btn1 = "yesBtn"; var btn2 = "noBtn"; var btn3 = "continueBtn"; var btn4 = "cancelBtn"; function myFunction() { myWindow = window.open("", "MsgWindow", "width=400,height=100"); myWindow.document.write(myWindowHtml); myWindow.document.getElementById(btn1).addEventListener("click", function(){yesClick();}); myWindow.document.getElementById(btn2).addEventListener("click", function(){noClick();}); myWindow.document.getElementById(btn3).addEventListener("click", function(){continueClick();}); myWindow.document.getElementById(btn4).addEventListener("click", function(){cancelClick();}); } function yesClick(){ alert("you Clicked Yes !\n Bye..."); myWindow.close(); } function noClick(){ alert("you Clicked no !\n Bye..."); myWindow.close(); } function continueClick(){ alert("you Clicked continue !\n Bye..."); myWindow.close(); } function cancelClick(){ alert("you Clicked cancel !\n Bye..."); myWindow.close(); } </script> </body> </html>
  16. vmars316
    Ok Great Thanks
  17. vmars316
    Hello & Thanks , Can I call/name video/ogg files *.ogv , instead of *.ogg ? <source src="movie.ogv" type="video/ogg"> <source src="movie.ogg" type="video/ogg"> I have seen it both ways . THanks
  18. vmars316
    Pls , never mind . I think there is something wrong with the video . Thanks
  19. vmars316
    Hello & Thanks , Any idea why this video won't play ? : <!DOCTYPE html> <html> <title>Play .mp4 video http://vmars.us/ShowMe/NotYourAverage-HorseRace.mp4.html : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay : </title> <body> <video width="640" height="360" controls autoplay > <source src="NotYourAverage-HorseRace.mp4" type="video/mp4"> <source src="NotYourAverage-HorseRace.mp4" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html> Thanks
  20. vmars316
    Thanks : it takes a long time to figure out the intention behind it. My code is structured according to common theoretical programming models and data structures. You probably should take some college courses because the theory is probably much more than what can be taught in a forum post. Ah , when I google: "javascript common theoretical programming models and data structures" I get a wealth of info , Thanks When I set it up as you say I get an error here: FoxyMod-Game-reset.html:519 Uncaught ReferenceError: game is not defined // Throw a cowpie self.throwCowpie = function() { game.createCowpie(self.x, self.y); } whenever I click on 'Throw' button . So I moved this: var canvas = document.getElementById("canvas"); var game = new Game(canvas); to here: var canvas = document.getElementById("canvas"); var game = new Game(canvas); window.addEventListener("load", setup, false); function setup() { That must have been what was happening before , only I didn't notice that error , since I hadn't yet dived into Chrome debug, breakpoints and writeTraceLog . Btw: I noticed late last nite , that your code works fine in IE . Also , using F12: Is there a way to step thru code one line at a time ? I have used 'Step into next function' & 'Resume execution', But I havent't yet found a way to 'step into next line' . game.reset(); Since code is working fine , I guess I dont't need to do the last 2 resets now : 1) Set scores to zero 2) Empty the cowpies array 3) Set all the target isGood properties to false Thanks
  21. vmars316
    It creates them , but doesn't yet draw them . Correct ? http://vmars.us/javascript/GameObject/FoxyMod-Game-reset.html I would like you to take a look at the above link , so you can see what I am doing . And also while there , pls rightMouse click to 'view the code' . If you are willing to do that , then I won't need to even Post my code . I have already tried : wrapping the logic section as a function , and executing it at 'load' . Then adding a game.start() immediately after executing that function . Then adding a self.reset() function at the beginning of game.start() . In game.reset() I cleared pertinent var s to 0 . I need some help with 'what else I need to clear , set to null or what ever' in the self.reset() . My code was foreign to you , your code is alien to me . There are lots of things that are new to me . I have spent 8hrs a day for the last 2 days , trying to understand your code , using console debug , & writeTraceLog , etc.. Thanks
  22. vmars316
    <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>Reset</title> --> <style> body { background-color: black; margin: 0; padding: 0; } #assets { display: none; } #canvasDiv { text-align: center; } canvas { cursor: none; } table { margin: 0 auto; color: #E1E1E1; background-color: #732222; height: 24px; width: 800px; border: none; } button { font-size: 1em; } #buttonsArea { color: #E1E1E1; background-color: #732222; width: 600px; margin: 0 auto; border: none; } </style> </head> <body> <div> <table> <tr> <td style="width: 18%"> totalScore </td> <td id="totalScore" style="width: 5%"></td> <td style="width: 18%"> oops! </td> <td id="oopsScore" style="width: 5%"></td> <td style="width: 18%"> goodHits </td> <td id="goodHits" style="width: 5%"></td> <td style="width:18%"> totalShots </td> <td id="totalShots" style="width: 5%"></td> </tr> </table> </div> <!-- <div id="canvasDiv"> <canvas id="canvas" width="600" height="400" style="background-color:#992D2D"></canvas> </div> --> <div align="center"> <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="width:70%";><p id="traceMsg">traceLog goes here:</p> </td> <td style="width:30%";> <canvas id="canvas" width="600" height="400"></canvas> </td> </tr> </tbody> </table> </div> <div id="buttonsArea"> <button id="pause">Pause</button> <button id="play">Play</button> <button id="left">Move left</button> <button id="throw">Throw</button> <button id="right">Move right</button> </div> <!-- </div> --> <div id="assets"> <img id="lie02" src="sprites/lies02.png"> <img id="tru02" src="sprites/tru02.png"> <img id="cowpie" src="sprites/cowpie.png"> <img id="thrower" src="sprites/thrower.png"> <img id="bgCompound" src="sprites/bgCompound.jpeg"> <img id="manufacturer" src="sprites/manufacturer.png"> </div> <script> //debugger; /* explain Difference between Function constructor and function declaration Functions created with the Function constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function constructor was called. This is different from using eval with code for a function expression. //function declaration function foo() {} Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon). Semicolons are used to separate executable JavaScript statements. Since a function declaration is not an executable statement, it is not common to end it with a semicolon. All it can do is create an object variable parented by its current scope. In contrast a Function Expression (by definition) is part of a larger construct. If you want to create an anonymous function or assign a function to a prototype or as a property of some other object you need a Function Expression. // function expression (function bar() {}) // function expression x = function hello() {} if (x) { // function expression function world() {} } // function declaration function a() { // function declaration function b() {} if (0) { // function expression function c() {} } } */ /***********/ /** Logic **/ /***********/ /* Initialize the game object */ function writeTraceLog(oneTraceLine){ traceCount ++; document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine); } var gameLoopDraw = 0; var TargetSelfDraw = 0; var targetsLengthVar = 0; // targetsLengthVar = targets.length ; var traceCount = 1; var canvas = document.getElementById("canvas"); var game = new Game(canvas); // Sounds game.sounds.splat = new Audio("sounds/CowMooSplat.mp3"); game.sounds.goodbye = new Audio("sounds/GoodBye-Female.mp3"); game.sounds.cheering = new Audio("sounds/cheeringCrowd.mp3"); game.sounds.oops = new Audio("sounds/oops.mp3"); // Sprites game.sprites.background = document.getElementById("bgCompound"); game.sprites.manufacturer = document.getElementById("manufacturer"); game.sprites.cowpie = document.getElementById("cowpie"); // Scores explain //points to an element on the page. game.scores.totalScore just tells the //program in which HTML element the score should be written. game.scores.totalScore = document.getElementById("totalScore"); game.scores.oops = document.getElementById("oopsScore"); game.scores.hits = document.getElementById("goodHits"); game.scores.totalShots = document.getElementById("totalShots"); // Create thrower var throwerSprite = document.getElementById("thrower"); var throwerX = canvas.width / 2; // Center of the canvas var throwerY = canvas.height - throwerSprite.height; // Bottom of the canvas var thrower = new Thrower(throwerSprite, throwerX, throwerY); thrower.speed = 120 / 1000; // 120 pixels per second thrower.cowpieSpeed = 180 / 1000; // 180 pixels per second game.setThrower(thrower); // Create targets var hillarytrue = document.getElementById("tru02"); var hillarylies = document.getElementById("lie02"); var target1 = new Target(hillarylies, hillarytrue, 128, 24); target1.speed = 120 / 1000; // 120 pixels per second var target2 = new Target(hillarylies, hillarytrue, 0, 68); target2.speed = 120 / 1000; // 120 pixels per second game.addTarget(target1); game.addTarget(target2); /* Set event handlers */ // Pause/Resume document.getElementById("pause").addEventListener("click", game.pause, false); document.getElementById("play").addEventListener("click", game.resume, false); // Actions document.getElementById("left").addEventListener("mousedown", thrower.pressLeft, false); document.getElementById("left").addEventListener("mouseup", thrower.releaseLeft, false); document.getElementById("right").addEventListener("mousedown", thrower.pressRight, false); document.getElementById("right").addEventListener("mouseup", thrower.releaseRight, false); document.getElementById("throw").addEventListener("click", thrower.throwCowpie, false); document.addEventListener("keydown", keyPressed, false); document.addEventListener("keyup", keyReleased, false); var canFire = true; function keyPressed(e) { writeTraceLog("function keyPressed targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); switch(e.keyCode) { case 39: case 68: // Right arrow and D thrower.pressRight(); break; case 37: case 65: // Left arrow and A thrower.pressLeft(); break; case 38: case 87: // Up arrow and W if(canFire) { canFire = false; thrower.throwCowpie(); } break; } } function keyReleased(e) { writeTraceLog("function keyReleased(e) targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); switch(e.keyCode) { case 39: case 68: // Right arrow and D thrower.releaseRight(); break; case 37: case 65: // Left arrow and A thrower.releaseLeft(); break; case 38: case 87: // Up arrow and W canFire = true; break; } } /* Begin the game */ window.addEventListener("load", game.start, false); /*************/ /** Objects **/ /*************/ /** Game **/ function Game© { // function declaration var self = this; /** Properties **/ // Canvas var canvas = c; var context = canvas.getContext("2d"); // HTML elements explain /* Objects are variables too. But objects can contain many values. JavaScript objects are containers for named values called properties or methods. self.sprites is an object. It's in the Javascript tutorial: Objects are used to organize data. self is also an object. .sprites is a property of self that also contains an object. You cannot use var to set properties. Objects can contain other objects and arrays as properties. var a = {}; // This is an object a.b = { // Property "b" is an object that contains a property "c" which is also an object c : {} }; a.b.c.d = "Value"; // Object "c" has a property called "d" with a string as its value. */ self.reset = function () { totalScore = 0; totalShots = 0; oops = 0; hits = 0; for (var i = targets.length - 1; i >= 0; i--) { targetsLengthVar = targets.length ; targets.splice(index, 1); writeTraceLog("self.reset targets.splice func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); } for (var i = cowpies.length - 1; i >= 0; i--) { cowpies.splice(index, 1); writeTraceLog("self.reset cowpies.splice func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); } }; // self.reset = function () self.sprites = { background : null, manufacturer : null, cowpie : null }; self.sounds = { splat : null, goodbye : null, cheering : null, oops : null }; self.scores = { totalScore : null, oops : null, hits : null, totalShots : null }; // Movable objects var thrower = null; var targets = []; var cowpies = []; self.setThrower = function(t) { thrower = t; thrower.game = self; writeTraceLog("self.addThrower func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); }; self.addTarget = function(t) { targets.push(t); writeTraceLog("self.addTarget func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount + " which target = " + t.name); }; // States var paused = false; // Counters var totalScore = 0; var totalShots = 0; var oops = 0; var hits = 0; /** Methods **/ // explain Methods are functions stored as object properties. // http://www.w3schools.com/js/js_object_methods.asp // Start the game =========================== self.start = function () { // Reset counters totalScore = 0; totalShots = 0; oops = 0; hits = 0; writeTraceLog("self.start = function targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); // Play a sound console.log(self.sounds.cheering); self.sounds.cheering.play(); // Begin the game loop requestAnimationFrame(gameLoop); } // self.start = function () ======================== // Pause the game self.pause = function() { paused = true; lastTimestamp = 0; writeTraceLog("self.pause func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); }; self.resume = function() { paused = false; }; // Create a cowpie self.createCowpie = function(x, y) { writeTraceLog("self.createCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); var cowpie = new Cowpie(self.sprites.cowpie, x, y); cowpie.game = this; cowpies.push(cowpie); }; // Remove a cowpie by its index self.destroyCowpie = function(index) { if(index instanceof Cowpie) { writeTraceLog("self.destroyCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); var found = false; numCowpies = cowpies.length; for(var i = 0; i < numCowpies && !found; i++) { if(cowpies == index) { found = true; cowpies.splice(index, 1); } } } else { cowpies.splice(index, 1); } } // self.destroyCowpie = function(index) /** Private methods **/ // Collision detection // Detect rectangular collision var hitTest = function(a, { return a.x <= b.x + b.width && a.x + a.width >= b.x && a.y <= b.y + b.height && a.y + a.height >= b.y; } var lastTimestamp = 0; var gameLoop = function(timestamp) { // =================== gameLoop ============== var i, j, numTargets, numCowpies, collision; /* If the game is paused then do nothing */ if(paused) { requestAnimationFrame(gameLoop); return; } /* Calculate delta time */ if(lastTimestamp == 0) { lastTimestamp = timestamp; } deltaTime = timestamp - lastTimestamp; lastTimestamp = timestamp; /* Update all objects */ // Thrower thrower.update(deltaTime, canvas); // Targets numTargets = targets.length; targetsLengthVar = targets.length; for(i = 0; i < numTargets; i++) { targets.update(deltaTime, canvas); } // Cowpies for(i = 0; i < cowpies.length; i++) { cowpies.update(deltaTime, canvas); } /* Calculate interations between all objects */ // For each cowpie calculate collision with the targets var target; for(i = 0; i < cowpies.length; i++) { for(j = 0; j < numTargets; j++) { collision = hitTest(cowpies, targets[j]); // If a collision occurred, destroy the cowpie and change the target if(collision) { // Destroy cowpie self.destroyCowpie(i); // Change target's state and update scores target = targets[j]; if(target.isGood()) { self.sounds.oops.play(); oops++; target.setGood(false); } else { self.sounds.splat.play(); hits++; target.setGood(true); } totalScore = hits * 4 - oops * 2; i--; // (Accounts for the cowpie being removed from the array) break; } // if(collision) } // for(j = 0; j < numTargets; j++) } // for(i = 0; i < cowpies.length; i++) /* Display everything */ // Clear canvas context.clearRect(0, 0, canvas.width, canvas.height); // Draw background images context.drawImage(self.sprites.background, 0, canvas.height - 195); context.drawImage(self.sprites.manufacturer, canvas.width - 180, canvas.height - 104); // Draw thrower thrower.draw(context); // Draw targets for(i = 0; i < numTargets; i++) { // TargetSelfDraw gameLoopDraw if (TargetSelfDraw < 5) { gameLoopDraw ++; writeTraceLog("if gameLoopSelf < 5 = "+ gameLoopDraw + " traceCount = " + traceCount); } targets.draw(context); } // Draw cowpies numCowpies = cowpies.length; // Update this to account for destroyed cowpies for(i = 0; i < numCowpies; i++) { cowpies.draw(context); } // Update scores self.scores.totalScore.innerHTML = totalScore; self.scores.totalShots.innerHTML = totalShots; self.scores.oops.innerHTML = oops; self.scores.hits.innerHTML = hits; // Start a new game loop requestAnimationFrame(gameLoop); } // var gameLoop = function(timestamp) }; // EndOf function Game© /** Thrower **/ function Thrower(s, startX, startY) { // Declared functions are not executed immediately. // They are "saved for later use", and will be executed later, when they are invoked (called upon). var self = this; var sprite = s; self.x = startX; self.y = startY; self.width = sprite.width; self.height = sprite.height; self.game = null; self.speed = 120 / 1000; var left = 0; var right = 0; // For movement self.pressLeft = function() { left = 1; writeTraceLog("self.pressLeft func self.x = "+ self.x + " traceCount = " + traceCount); }; self.releaseLeft = function() { left = 0; }; self.pressRight = function() { right = 1; writeTraceLog("self.pressRight func self.x = "+ self.x + " traceCount = " + traceCount); }; self.releaseRight = function() { right = 0; }; // Throw a cowpie self.throwCowpie = function() { writeTraceLog("self.throwCowpie func targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); game.createCowpie(self.x, self.y); } // Update position self.update = function(deltaTime, canvas) { var direction = right - left; self.x += direction * self.speed * deltaTime; if(self.x + self.width > canvas.width) { self.x = canvas.width - self.width; } if(self.x < 0) { self.x = 0; } } // Draw self.draw = function(context) { context.drawImage(sprite, self.x, self.y, self.width, self.height); } } // function Thrower(s, startX, startY) /** Cowpie **/ function Cowpie(s, startX, startY) { var self = this; var sprite = s; self.x = startX; self.y = startY; self.width = sprite.width; self.height = sprite.height; self.game = null; self.speed = 180 / 1000; self.update = function(deltaTime, canvas) { self.y -= self.speed * deltaTime; if(self.y < 0) { game.destroyCowpie(self); } } self.draw = function(context) { context.drawImage(sprite, self.x, self.y, self.width, self.height); //writeTraceLog("self.draw cowpie targetsLengthVar = "+ targetsLengthVar + " traceCount = " + traceCount); } } // function Cowpie(s, startX, startY) /** Target **/ function Target(bad, good, startX, startY) { var self = this; /* Properties */ self.x = startX; self.y = startY; self.width = bad.width; self.height = bad.height; self.speed = 120 / 1000; // For changing sprite var isGood = false; var spriteGood = good; var spriteBad = bad; var sprite = spriteBad; // For motion var direction = 1; var trips = 0; var maxTrips = 2; /* Get or set the isGood value */ self.isGood = function() { return isGood; } self.setGood = function(value) { isGood = value; trips = 0; // Reset trips if(isGood) { width = spriteGood.width; height = spriteGood.height; } else { width = spriteBad.width; height = spriteBad.height; } } /* Update method, called on each frame */ self.update = function(deltaTime, canvas) { // target /* Update position */ self.x += direction * self.speed * deltaTime; /* Check boundaries */ var hitBoundary = false; // Check if we hit the left boundary if(self.x < 0) { self.x = 0; direction = -direction; hitBoundary = true; } // Check if we hit the right boundary if(self.x + self.width > canvas.width) { self.x = canvas.width - self.width; direction = -direction; hitBoundary = true; } // If we hit a boundary then count trips if(hitBoundary) { trips++; // Switch sprites if we hit a boundary too many times if(trips > maxTrips) { isGood = !isGood; if(isGood) { width = spriteGood.width; height = spriteGood.height; } else { width = spriteBad.width; height = spriteBad.height; } } } } /* Draw the sprite */ self.draw = function(context) { TargetSelfDraw ++; sprite = isGood ? spriteGood : spriteBad; context.drawImage(sprite, self.x, self.y, self.width, self.height); //gameLoopDraw TargetSelfDraw = 0; if (TargetSelfDraw < 5) { writeTraceLog("if TargetSelfDra < 5 = "+ TargetSelfDraw + " traceCount = " + traceCount); } } // TargetSelfDraw } // function Target(bad, good, startX, startY) // /* function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine); } */ </script> </body> </html>
  23. vmars316
    Hello & Thanks , Pls , what is this code doing , What does it look like , a separate target1.hillartlies and one for target1.hillarylies ? var target1 = new Target(hillarylies, hillarytrue, 128, 24); target1.speed = 120 / 1000; // 120 pixels per second I tried the things you suggested , but still get bad results . Using console debug , I have a better understanding of what/when the interpreter is doing . I am still stumped with how to code to make a pageReload give the same results as first time running . I put some trace code in there , hoping to understand the code better . But I am still stumped . I need help , Pls show me how to debug this thing . Here is my code : [link] http://vmars.us/javascript/GameObject/FoxyMod-Game-reset.html [/link] Here is my code: Thanks
  24. vmars316
    These two statements are what I am confused about : 1) Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon). 2) Since a function declaration is not an executable statement, Are 'Declared functions ' executable or not ? Thanks
  25. vmars316
    Good point : I really don't understand the sequence of program execution . How can I track that put a console.log after every statement ? Thanks
×
×
  • Create New...