Jump to content

vmars316

Members
  • Posts

    431
  • Joined

  • Last visited

Everything posted by vmars316

  1. 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 :
  2. Ah , very cool ! Thanks davej
  3. 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>
  4. 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..
  5. 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
  6. 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>
  7. Ok davejI'll give it a shot , & get back to yous , Thanks
  8. 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............
  9. 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 .....
  10. 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
  11. 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
  12. Oops , I see my error : I need a separate document.getElementById('item#').innerHTML = for each item# . Thanks
  13. 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
  14. 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 .
  15. 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
  16. Thank you very much guys ! Both this : <script src="..\..\lib\Phaser.js"></script> And this : <script src=".\..\..\lib\Phaser.js"></script> WORK !
  17. 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
  18. Hello & Thanks , I have an .html file here : C:\Phaser\phaser-2.4.4\DownloadExamples\phaser-examples-master\examples\arcade-physics\asteroid-movement\asteroids-movement.html that points to a .js file here : <script src="C:\Phaser\phaser-2.4.4\DownloadExamples\phaser-examples-master\examples\lib\Phaser.js" type="text\javascript"><\script> The prob for me is that the \lib Folder which contains the .js is not in the Path of .html . Other than moving the \lib Folder , How can I shorten the Path reference to \lib\ Phaser.js ? I suspect its some combination of ../examples/lib . I have tried all kinds of combinations but I can't figure it out . I need help . Thanks...vmars
  19. Thanks : Yes , I am beginning to understand that I wonder how Enchant.js does it then . It works great ! Trouble is , they stopped updating it . Oh , here is a working example : http://liesandcowpies.com/testMe/~cat-source-WIP-experiment.html That means that no one can do a "save as" for the page above and have it run on their computer , Unless they specify saveAs "html only" option , and then to run it they must be connected to internet . justsomeguy , Thanks for sticking with me . ..Vern
  20. Hello & Thanks , No probs getting an image file off internet or server with javascript, BUT Getting a LOCAL image file with javascript causes an "File access violation" . No problem with html5 getting a LOCAL file : <div id="images"> <br><img id="truth02id" name="truth02png" src="truth02.png"> </div> But If I use either of the two javascript code below , the browser considers it an "File access violation" : // Add our image as a sprite // OR loader .add("images/truth02.png") .load(setup); I have seen examples of using something like this (I don't know how to put it all together -need HELP) : var truth02 = new PIXI.Sprite.fromImage(document.getElementById("truth02id").src = "truth02.png"); Here is my working code (except for the "access violation") : <!doctype html> <html> <head> <meta charset="utf-8"> <title>Pixi.js goose.png</title> <style> body { margin: 0; padding: 0; background-color: #000; } </style> </head> <body> <script src="C:\pixi.js\bin\pixi.min.js"></script> <script> //////////////// var renderer = PIXI.autoDetectRenderer(160, 144); // Set the background color of the renderer to a baby-blue'ish color renderer.backgroundColor = 0x3498db; // Append the renderer to the body of the page document.body.appendChild(renderer.view); // Create the main stage for your display objects var stage = new PIXI.Container(); //////////////// // Add our image as a sprite // Set the anchor in the center of our sprite goose.anchor.x = 0.5; goose.anchor.y = 0.5; // Position our goose in the center of the renderer goose.position.x = renderer.width / 2; goose.position.y = renderer.height / 2; // Add the goose to the stage stage.addChild(goose); //////////////// // Start animating animate(); function animate() { requestAnimationFrame(animate); //////////////// // Rotate our goose clockwise goose.rotation += 0.1; // Rotate our goose counter-clockwise // goose.rotation -= 0.1; //////////////// // Render our container renderer.render(stage); } //////////////// </script> </body> </html>
  21. I am running pixi.js To get html to run i user would have to : In chrome , I have to add command line switchw=es , "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files In IE , i have to click on the BLOCKED button So i was thinking , i could load image fine with html *.png and then grab it in js from html , maybe something like document.GetElementById . But I don't know how exactly to write that code . Possible ? Thanks..vm
×
×
  • Create New...