Jump to content

vmars316

Members
  • Posts

    435
  • Joined

  • Last visited

Everything posted by vmars316

  1. 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 :
  2. 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
  3. Hello & Thanks , I am trying to show a log from js to html page . document.write(oneTraceLine + " <br>");} But with the canvas element present , I don't seem to be able to do that . The scaled down code exerpt below is an example of what I am trying to do , but actual js code is much much larger . What can I do to get this puppy working ? I am having trouble getting the <code> tags to work . So , I'll try QUOTES next :
  4. Ah , very cool ! Thanks davej
  5. Hello & Thanks , I can't get this game to end: See lines 118 - 122 else { gameOver = true ; and lines 132 - 135 if (gameOver) { alert('clearInterval = ' + gameOver); clearInterval(draw); } Pls, what am I doing wrong ? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gamedev Canvas Workshop - lesson 7: collision detection</title> <style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }</style> </head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var ballRadius = 10; var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; var paddleHeight = 10; var paddleWidth = 75; var paddleX = (canvas.width-paddleWidth)/2; var rightPressed = false; var leftPressed = false; var gameOver = false; var brickRowCount = 5; var brickColumnCount = 3; var brickWidth = 75; var brickHeight = 20; var brickPadding = 10; var brickOffsetTop = 30; var brickOffsetLeft = 30; var bricks = []; for(c=0; c<brickColumnCount; c++) { bricks[c] = []; for(r=0; r<brickRowCount; r++) { bricks[c][r] = { x: 0, y: 0, status: 1 }; } } document.addEventListener("keydown", keyDownHandler, false); document.addEventListener("keyup", keyUpHandler, false); function keyDownHandler(e) { if(e.keyCode == 39) { rightPressed = true; } else if(e.keyCode == 37) { leftPressed = true; } } function keyUpHandler(e) { if(e.keyCode == 39) { rightPressed = false; } else if(e.keyCode == 37) { leftPressed = false; } } function collisionDetection() { for(c=0; c<brickColumnCount; c++) { for(r=0; r<brickRowCount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) { dy = -dy; b.status = 0; } } } } } function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawPaddle() { ctx.beginPath(); ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawBricks() { for(c=0; c<brickColumnCount; c++) { for(r=0; r<brickRowCount; r++) { if(bricks[c][r].status == 1) { var brickX = (r*(brickWidth+brickPadding))+brickOffsetLeft; var brickY = (c*(brickHeight+brickPadding))+brickOffsetTop; bricks[c][r].x = brickX; bricks[c][r].y = brickY; ctx.beginPath(); ctx.rect(brickX, brickY, brickWidth, brickHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } } } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBricks(); drawBall(); drawPaddle(); collisionDetection(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy < ballRadius) { dy = -dy; } else if(y + dy > canvas.height-ballRadius) { if(x > paddleX && x < paddleX + paddleWidth) { dy = -dy; } else { gameOver = true ; alert("GAME OVER = " + gameOver); // document.location.reload(); } } if(rightPressed && paddleX < canvas.width-paddleWidth) { paddleX += 7; } else if(leftPressed && paddleX > 0) { paddleX -= 7; } x += dx; y += dy; if (gameOver) { alert('clearInterval = ' + gameOver); clearInterval(draw); } } setInterval(draw, 10); </script> </body> </html>
  6. Ok , I see , those are just properties , just a more complex version of below: var person = { firstName: "John", lastName : "Doe", id : 5566 }; While I've got ya on the phone , let me ask : window.addEventListener('keydown', function (e) { myGameArea.key = e.keyCode; } is ' e ' a reserved word ? Also myGamePiece = new component(30, 30, "red", 10, 120); is 'component' a reserved word ? Pls , where can I find a list of all js reserved word ? Thanks again..
  7. Hello & Thanks , I am making my way thru game tutorial - http://www.w3schools.com/games/tryit.asp?filename=trygame_controllers_keys and I would like to know , what is the purpose of a 'name :' label ( canvas : , start : , clear : ) ? var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('keydown', function (e) { myGameArea.key = e.keyCode; }) window.addEventListener('keyup', function (e) { myGameArea.key = false; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } Also , for ' ("canvas"), ' , why the comma ' , ' ? Thanks
  8. Ok davej , I was able to do it two ways , 1) via .html , and 2) via .js . 1) .html way: lines 35 and 84 thru 88 . 2) .js way , lines 35 and 89 thru 91. Running game here: http://liesandcowpies.com/quickjs/BenghaziGame.html Thanks <!DOCTYPE html> <!-- // programName: BenghaziGame.html http://pastebin.com/jPaFjcWk Running online: http://liesandcowpies.com/quickjs/BenghaziGame.html --> <html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" type="image/png" href="icon16.png" /> <script type='text/javascript' src="quick.js"></script> <style> #assets { height: 1px; overflow: hidden; visibility: hidden; width: 1px; } 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; } </style> </head> <body> <!-- html way: <body onresize="bodyResize()"> --> <div> <table align="center"> <tr> <td width="10%"> totalScore </td> <td id="totalScore" width="5%"> </td> <td width="8%"></td> <td width="10%"> oops! </td> <td id="oopsScore" width="5%"> </td> <td width="8%"></td> <td width="10%"> goodHits </td> <td id="goodHits" width="5%"> </td> <td width="8%"></td> <td width="10%"> totalShots </td> <td id="totalShots" width="5%"> </td> </tr> </table> </div> <div align="center"> <canvas id="canvas" width="800" height="600"></canvas> </div> <div id="assets"> <img id="bgCompound" src="sprites/bgCompound.png" width="320" height="191" /> <img id="manufacturer" src="sprites/manufacturer.png" width="180" height="100" /> <img id="restartBtn" src="sprites/RestartButton.png" width="100" height="25" /> <img id="pauseBtn" src="sprites/PauseButton.png" width="100" height="25" /> <img id="playBtn" src="sprites/PlayButton.png" width="100" height="25" /> <img id="quitBtn" src="sprites/QuitButton.png" width="100" height="25" /> <img id="truth01Sprite" src="sprites/truth01.png" width="64" height="64" /> <img id="lies01Sprite" src="sprites/lies01.png" width="64" height="64" /> <img id="truth02Sprite" src="sprites/truth02.png" width="64" height="64" /> <img id="lies02Sprite" src="sprites/lies02.png" width="64" height="64" /> <img id="truth03Sprite" src="sprites/truth03.png" width="64" height="64" /> <img id="lies03Sprite" src="sprites/lies03.png" width="64" height="64" /> <img id="truth04Sprite" src="sprites/truth04.png" width="64" height="64" /> <img id="lies04Sprite" src="sprites/lies04.png" width="64" height="64" /> <img id="sparkSprite" src="sprites/transSpark.png" width="28" height="28" /> <img id="pointerSprite" src="sprites/handPointerT.png" width="31" height="36" /> <img id="throwerSprite" src="sprites/thrower.png" width="64" height="64" /> <img id="cowpieSprite" src="sprites/cowpie.png" width="32" height="32" /> <audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio> <audio id="battleFire" src="sounds/BattleFire.ogg"></audio> <audio id="oops" src="sounds/oops.ogg"></audio> <audio id="Hillary-WhatDiff" src="sounds/Splat-Hillary-WhatDiff.ogg"></audio> <audio id="byebye" src="sounds/GoodByeFemale.ogg"></audio> <audio id="cymbals" src="sounds/Cymbals.ogg"></audio> <audio id="pling" src="sounds/Pling.ogg"></audio> <audio id="pingSound" src="sounds/ping.ogg"></audio> <audio id="pongSound" src="sounds/pong.ogg"></audio> </div> <!-- html way: <script type='text/javascript'> function bodyResize() { // alert('.html bodyResize from Html. '); location.reload(); } </script> ELSE .js way: <script type="text/javascript" > window.addEventListener("resize", function(){ location.reload(); } ); </script> --> <script type='text/javascript' src="BenghaziGame.js"></script> </body> </html>
  9. Ok davejI'll give it a shot , & get back to yous , Thanks
  10. Thanks , I moved the code here : </td></tr></table> <script type="text/javascript" src="skel-main-2.js"></script> </body> But it didn't help . Still struggling............
  11. Actually , I Posted it last night , then edited it to empty . Then this morning I checked and there were no answers , so I edited it again , with html code . Guess the Forum keeps the original date Posted , not the last time edited . No probs . I wasn't complaining , just explaining why I was Posting again . Anyways , I do greatly appreciate all the help you folks have given me and others over the years . And I try to give feedback , so yous can see the result . Thanks again ! Here's what I am working on now : www.liesandcowpies.com/testMe/Quickjs/~paddle-index-NOW.html Except that is the older version . I want to move Buttons out of game , into html .....
  12. I'm not sure why I haven't received a reply yet , maybe if I put code here instead of pastebin : Here's the html " <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width"> <link rel="shortcut icon" type="image/png" href="icon16.png" /> <!-- try here: --> <script src="quick.js"></script> <script src="skel-main-2.js"></script> <!-- --> <style> #assets { height: 1px; overflow: hidden; visibility: hidden; width: 1px; } body { background-color: #000000; margin: 0; overflow: hidden; padding: 0; } canvas { cursor: default; } table { color: #;000000; background-color: #C0C0C0; height: 24px; border: none; } </style> </head> <body> <div> <table align="center" style="height:10px"> <tr> <td width="10%"> totalScore = </td> <td id="totalScore" width="5%"> </td> <td width="8%"></td> <td width="10%"> oops! = </td> <td id="oopsScore" width="5%"> </td> <td width="8%"></td> <td width="10%"> goodHits = </td> <td id="goodHits" width="5%"> </td> <td width="8%"></td> <td width="10%"> totalShots = </td> <td id="totalShots" width="5%"> </td> </tr> </table> </div> <!-- try here: <script src="skel-main-2.js"></script> --> <div align="center"> <canvas id="canvas" align="center" width="640" height="300""> </canvas> <!-- width="800" height="600" --> </div> <!-- <script src="skel-main-2.js"></script> --> <div id="assets"> <!-- <img id="frame0" src="frames/frame0.png" width="32" height="32" /> --> <img id="bgCompound" src="sprites/bgCompound.png" width="320" height="191" /> </div> <table align="center" style="background-color:#992d2d "> <tr><td> <button onclick="myFunction()">goodHit</button> <button onclick="myFunction()">oop</button> <!-- <input type="button" id="hello-world2" value="Hello" onClick="alert('Hello World! 1'); alert('Hello World! 2'); alert('var test01 says '); "/> --></td></tr></table> <!-- try here: <script src="skel-main-2.js"></script> --> </body> </html> Note that I moved the code: <script src="skel-main-2.js"></script> to <head> section . When I run .html I get this console error: "Uncaught TypeError: Cannot read property 'width' of undefined" for quick.js That doesn't trouble me . But when I click on one of the Buttons , i get this console error: "Uncaught ReferenceError: myFunction is not defined" . As you can see in .html I have tried positioning <script src="skel-main-2.js"> in several place . But none can find the Function myFunction , unless I put the script ref as inline coding . How can I get a clear path to <script src="skel-main-2.js"> ? Btw: the code for myFunction in <script src="skel-main-2.js"> starts at line 59 . Thanks
  13. Hello & Thanks , I am learning from this example : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onclick I want to put the .js in a separate file , <script src="skel-main-2.js"></script> instead of within the .html . Code is here : quick.js: www.liesandcowpies.com/testMe/Quickjs/quick.js (if needed) html: http://pastebin.com/EQUTDd4y js: pastebin.com/HXbrb86M I want to put the .js in a separate file , <script src="skel-main-2.js"></script> instead of within the .html . But when I run it , up comes this console error : Uncaught ReferenceError: myFunction is not defined ? How can I connect .html with .js ? Thanks
  14. Oops , I see my error : I need a separate document.getElementById('item#').innerHTML = for each item# . Thanks
  15. I couldn't get the crazy thing working so I did this instead: <div> <table style="width:100%"> <tr> <td width="10%"> totalScore = </td> <td id="totalScore" width="5%"> </td> <td width="8%"></td> <td width="10%"> oops! = </td> <td id="oopsScore" width="5%"> </td> <td width="8%"></td> <td width="10%"> totalHits = </td> <td id="totalHits" width="5%"> </td> <td width="8%"></td> <td width="10%"> totalShots = </td> <td id="totalShots" width="5%"> </td> </tr> </table> </div> Thanks
  16. Thanks , this is what i am trying to get to run : document.getElementById('keepScore').innerHTML = ' player2Score = ' + player2Score; but when I get this to work , i will have 4 players , player1 -player4 .
  17. Hello & Thanks , var player1Score = 10; var player2Score = 20; document.getElementById('keepScore').innerHTML = ' player2Score = ' + player2Score; I want to be able to display several items on one line with the above code or preferably something that works . Pls , how can I do this . Thanks
  18. Thank you very much guys ! Both this : <script src="..\..\lib\Phaser.js"></script> And this : <script src=".\..\..\lib\Phaser.js"></script> WORK !
  19. Thanks , I have been all around with google . Some stuff contradicts other stuff . Anyways , of the following 3 ways , only the first one works . <script src="C:\Phaser\phaser-2.4.4\DownloadExamples\phaser-examples-master\examples\lib\Phaser.js" type="text/javascript"></script> <!-- <script src="/examples/lib/Phaser.js" type="text/javascript"></script> --> <!-- <script src="\examples\lib\Phaser.js" type="text/javascript"></script> --> I must be missing something , help me out here . Thanks
×
×
  • Create New...