Jump to content

vmars316

Members
  • Posts

    431
  • Joined

  • Last visited

Everything posted by vmars316

  1. Hello & Thanks , I am getting this error: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)' on this line: ctx.drawImage(cowpies[i], cowpies[i].x, cowpies[i].y, cowpies[i].width, cowpies[i].height); I got no error msg from the 'onload' . Haven't figured out what I am doing wrong . Pls , take a look .
  2. Yes , Thanks , I am reading the Arrays Tutorial http://www.w3schools.com/js/js_arrays.asp now.
  3. Thanks , this line was problem : Cowpie.prototype.update = function() { then this one : var cowpie = new Cowpie(); I'll try to do better next time . A related question , I don't have much experience with arrays : Array defined like this : var cowpies = [document.getElementById("cowpie")]; I am getting a '174 Uncaught TypeError: Cannot read property 'idActive' of undefined' on this line : if (!cowpies.cowpie.idActive) {cowpies.pop(cowpie);}; in : if(e.keyCode == 87 || event.keyCode == 38) { // shoot W or upArrow // check cowpies array if idActive = false Delete item // 1st active cowpie already set up in function startGame() for (var i = cowpies.length - 1; i >= 0; i--) { cowpiesCount = i ; if (!cowpies[i].cowpie.idActive) {cowpies[i].pop(cowpie);}; alert("cowpies[i].cowpie.idActive = " + i + " "+ cowpies[i].cowpie.idActive ); } cowpie = new Cowpie; cowpies[i].cowpie.update; cowpies.push(cowpie); } I think I am messing up on the array syntax . Pls , what should it be ? Thanks
  4. Hello & Thanks , I am getting 'Uncaught SyntaxError: Unexpected identifier' on : Cowpie.prototype.update = function() { for (var i = cowpies.length - 1; i >= 0; i--) { cowpieCount = i ; if (cowpies[i].cowpie.idActive) { self.y = self.y+ (self.speedY * self.directionY); // always -1 } } else { cowpies[i].pop(this.cowpie);} } } and if I comment the above out , then I get same for : var cowpie = new Cowpie(); and so on , down the line . Until I dismiss the whole section below . var Cowpie = (function () { var self = this; this.idTag = 'cowpie'; this.idActive = true; this.x = thrower.x; this.y = thrower.y; this.width= 64; this.height = 64; this.speedX = 0; this.speedY = 5; this.visible = true; this.directionY = -1; this.moveMe = false ; } // Cowpie.prototype.update = function() { for (var i = cowpies.length - 1; i >= 0; i--) { cowpieCount = i ; if (cowpies[i].cowpie.idActive) { self.y = self.y+ (self.speedY * self.directionY); // always -1 } } else { cowpies[i].pop(this.cowpie);} } } // var cowpie = new Cowpie(); // var Thrower = function () { var self = this; this.idTag = 'thrower'; this.x = (canvas.width / 2); this.y = canvas.height - 64; this.width= 64; this.height = 64; this.speedX = 1; this.speedY = 0; this.visible = true; this.directionX = 5; this.moveMe = false ; } Thrower.prototype.update = function() { self.x = self.x + (self.speedX * self.directionX); // always either +1 or -1 } } // var thrower = new Thrower(); thrower.idTag ; // = 'thrower'; // function startGame() { myGameArea.start(); }
  5. Oops , <> not working , here's the code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>move pieThrower</title> <!-- [url=http://liesandcowpies.com/javascript/]http://liesandcowpies.com/javascript/[/url] --> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; } #assets { visibility: hidden; } </style> </head> <body onload="startGame()"> fromWhere= <span id="fromWhere">fromWhere</span><br> idTag= <span id="idTag">idTag</span><br> this.idTag= <span id="thisIdTag">this.idTag</span><br> this.visible= <span id="this.visible"> this.visible</span><br> this.tripsMax= <span id="this.tripsMax"> this.tripsMax</span><br> this.tripsCnt= <span id="this.tripsCnt"> this.tripsCnt</span><br> this.directionX= <span id="this.directionX"> this.directionX</span><br> this.x= <span id="this.x"> this.x</span><br> thrower x,y,w,h= <span id="thrower.xywh">thrower.x,y,w,h</span><br> <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="300" height="300"></canvas> </td> </tr> </tbody> </table> </div> <div id="assets"> <img id="truth01" src="sprites/truth01.png" width="64" height="64" /> <img id="truth02" src="sprites/truth02.png" width="64" height="64" /> <img id="lies01" src="sprites/lies01.png" width="64" height="64" /> <img id="lies02" 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" /> <audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio> </div> <script type='text/javascript'> // var oneTraceLine = ""; var traceYESorNO = false; var updateFor1stTime = 0; var fromWhere = "fromWhere"; var timesInTripsCk=0; var visible = true; var thisx=0; var tripsMax=0; priorTripsMax = 0; var thisIdTag; var holdThrower_x = 0; var idTag = "truth01"; var idTagTh = "thrower"; var tripsCnt=0; var directionX=1 ; var addit = 0; // canvas = document.getElementById("canvas"); // get the canvas ctx = canvas.getContext('2d'); // create canvas Context; var targetImgsCnt = 0; var idTag = "truth01"; var totalTrips = 0; var targetImgs = [document.getElementById("truth01"), document.getElementById("lies01"), //, document.getElementById("truth02"), document.getElementById("lies02"), document.getElementById("thrower") ] ; // // function startGame() { var Thrower = function () { var self = this; this.idTag = 'thrower'; this.x = (canvas.width / 2); this.y = canvas.height - 64; this.width= 64; this.height = 64; this.speedX = 1; this.speedY = 0; this.visible = true; this.directionX = 5; this.moveMe = false ; this.update = function() { self.x = self.x + (self.speedX * self.directionX); // always either +1 or -1 } self.moveMe = false ; } } // 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 ; // = true ; // myGameArea.start(); } // function updateGameArea() { myGameArea.clear(); targetImgsCnt = 4; if(thrower.visible) { if(thrower.moveMe) {thrower.update();} ctx.drawImage(targetImgs[targetImgsCnt], thrower.x, thrower.y, thrower.width, thrower.height); /*120*/ document.getElementById("thrower.xywh").innerHTML = thrower.x; } } // var myGameArea = { start : function() { thrower.moveMe = false ; interval = setInterval(updateGameArea, 5); // updateGameArea(); }, clear : function() { ctx.clearRect(0, 0, canvas.width, canvas.height); }, stop : function() { clearInterval(this.interval); } } // document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); document.addEventListener("mousemove", mouseMoveHandler, false); function keyDownHandler(e) { if(e.keyCode == 39 || event.keyCode == 68) { // rightPressed = true; // alert("keyDownHandler: rightPressed"); thrower.directionX = 7; thrower.moveMe = true; } else if(e.keyCode == 37 || event.keyCode == 65) { // leftPressed = true; // alert("keyDownHandler: leftPressed"); thrower.directionX = -7; thrower.moveMe = true; } } function keyUpHandler(e) { if(e.keyCode == 38 || event.keyCode == 87) { rightPressed = false; } else if(e.keyCode == 40 || event.keyCode == 83) { leftPressed = false; } } function mouseMoveHandler(e) { var relativeX = e.clientX - canvas.offsetLeft; // alert("function mouseMoveHandler(e)"); } // // </script> </body> </html>
  6. Hello & Thanks , In my game , I check for leftArrow and rightArrow down to move sprite (Thrower) , and also for keyup , to stop movement . But I am getting sprite movement pauses on all keydown ? Is there a way to speed things up ? See/run game (so far) : http://liesandcowpies.com/javascript/BenghaziGame-starter-04-ThrowerONLY.html Thanks
  7. Yes , like this : var Thrower = function () { var self = this; this.idTag = 'thrower'; this.x = (canvas.width / 2); this.y = canvas.height - 64; this.width= 64; this.height = 64; this.speedX = 1; this.speedY = 0; this.visible = true; this.directionX = 5; this.moveMe = false ; this.update = function() { self.x = self.x + (self.speedX * self.directionX); // always either +1 or -1 } self.moveMe = false ; } } Thanks
  8. Thanks Folks , Foxy: I set up this: var Thrower = function() { var self = this; ? outside of Thrower/thrower methods , can I use Thrower.x anywhere ? Human: Thanks , directionX did solve the moving problem .
  9. Sorry to say , neither < > nor [ code][ /code] are working for me . Is there a limit on how many < > Post ?
  10. Hello & Thanks , 1) Are the following objects set up correctly ? function startGame() { var Thrower = function () { this.idTag = 'thrower'; this.x = 0; this.y = canvas.height - 64; this.width= 64; this.height = 64; this.speedX = 1; this.speedY = 0; this.visible = true; this.direction = 1; this.moveMe = false ; this.update = function() { // this.x = this.x + (this.speedX * this.directionX); // always = +1 or -1 } thrower.x = this.x + (this.speedX * this.directionX); // always = +1 or -1 } this.moveMe = false; // thrower.moveMe = false; } } // 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.direction = 1; thrower.moveMe = true ; myGameArea.start(); } 2) Why am I getting a 'NaN' from : /*120*/ document.getElementById("thrower.xywh").innerHTML = thrower.x; See full code (178 lines) below: Sorry to say , neither <> icon nor [ code][ /code], are working for me , is there a limit on how many <> in one Post ? Thanks
  11. Awesome , now they both work , locally and online . THANKS
  12. Hmm... Yes , that's interesting . this one: <input type="button" onclick="window.reload(); return false;" value="click me" /> </a> runs fine , locally , no errors . This one run locally , gives this error: <input type="button" onclick="window.reload(); return false;" value="click me" /> mozilla.org-Breakout-All-ReadOnly-vmTest01.html:18 Uncaught TypeError: window.reload is not a function Run online: they both get errors: <input type="button" onclick="window.reload(); return false;" value="click me" /> </a> mozilla.org-Breakout-All-ReadOnly-vmTest01.html:16 Uncaught TypeError: window.reload is not a functiononclick @ mozilla.org-Breakout-All-ReadOnly-vmTest01.html:16 <input type="button" onclick="window.reload(); return false;" value="click me" /> mozilla.org-Breakout-All-ReadOnly-vmTest01.html:18 Uncaught TypeError: window.reload is not a function The surrounding code looks like this: I can Post the whole code if you like , its 196 lines . You can run it here: http://liesandcowpies.com/javascript/mozilla.org-Breakout-All-ReadOnly-vmTest01.html It's the breakout game , with a few additions . Thanks
  13. Hello & Thanks , I would like to know why this doesn't work: <input type="button" onclick="window.reload(); return false;" value="click me" /> but this does: Thanks
  14. Ouch . Sorry , my dyslexia gets the best of me sometimes . I've seen the term 'bbcode' . Until , you used the term 'bbcode' in this context , I didn't realize that this markup is called 'bbcode' . Also , it would be more clear (to me) if the icons used above were ' ' and '
  15. Oops , its not working for me . Pls , what am I doing wrong ? <code> function continueOrCancel(){ var x; var r = confirm(" function continueOrCancel() \nPress OK to continue...\nElse\nPress Cancel to Abort javascript ."); if (r == true) { alert("You pressed OK! Let's Continue..."); } else { if(true){alert(" function continueOrCancel()\nInside ELSE , r= " + r); return; } } } <code> Thanks
  16. Hello & Thanks , When I copy code from , for example , http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open3 and paste it into my notepad++ *.html , it won't run . What I have to do is paste it into a wordpad *.text , then a save the file as 'DOS *.txt' , then copy that file & paste it into a notepad++ *.html file . then save that file . And voila , it runs fine . So , my question is : What format are the ' http://www.w3schools.com/jsref/tryit.asp?filename= ' files in ? And is there an easier way to do this ? Thanks
  17. Oh , I interpreted "(spaces before code intentional)." to mean this is how to do it . Thanks
  18. It is supposed to Exit the script . which it does , always , all browsers .
  19. thescientist ; Hello & Thanks , Learning javascript from w3schools , I often the code there as a starting point . But what happens when , I ask a question regarding code , I often paste that code into the question text . But when I use the < code> or < quote> icons , often times it deletes part of the code . For example , here is some code as regular text : // function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine); } // function continueOrCancel(){ var txt; var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript ."); if (r == true) { txt = "You pressed OK!\n let's continue..."; } else { } } // Here is the same code using < code> icon : Well, well , it usually just deletes a few lines here and there . Today it deleted the whole code . The problem is further troublesome , because it looks normal in the Edit and Preview window . It isn't evident til I look at what actually gets posted . Here is the same code as < quote> : Hmm , its working today . Here is the same code plugging in the < code> manually : < code> // function writeTraceLog(oneTraceLine){ document.getElementById("traceMsg").innerHTML += ( "<br> " + oneTraceLine); } // function continueOrCancel(){ var txt; var r = confirm("Press OK to continue... Else... Press Cancel to Abort javascript ."); if (r == true) { txt = "You pressed OK!\n let's continue..."; } else { } } // </ code> Hmm... The code is there , but no colored background . Anyways , just thought I would mention it .
  20. addendum: BTW: The abort code above sometimes doesn't work , so I wrote new code here : http://liesandcowpies.com/javascript/abortJS.html I tried to Post it here , but couldn't get <code> or quote to work .
  21. Ah Thanks ! The += in document.getElementById("traceMsg").innerHTML += (oneTraceLine + "<br>"); is the piece I was missig . The whole code now works great and looks like :
  22. Pls then , will you show me an example of what I should use ? If I remove JUST the canvas element and leave in the <p id="traceLog" > writeTraceLog <br></p> <img id="scream" src="http://www.w3schools..._the_scream.jpg" alt="The Scream" width="220" height="277"> it prints , but overlays itself . Thanks
×
×
  • Create New...