phpuserlogin
-
Posts
41 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Everything posted by phpuserlogin
-
<!doctype html> <style> div{width:640px; height:480px; background:url('sea.png');} img{display:none;} </style> <div> <canvas id="gameCanvas" width="640" height="480"></canvas> </div> <Img id='fish' src='fish.png'> <img id='pipes'src='pipes.png'> <script> var ctx=gameCanvas.getContext("2d"); var x=640, y=-160, fishY=220, ySpeed=0, score=0; function mainLoop(){ ctx.clearRect(0, 0, 640, 480); ctx.drawImage(pipes,x,y,80,800); x+=-2; checkHitPipe(); if(x<-80){ x=640; y=Math.random()*-320; score++; } ctx.drawImage(fish,10,fishY,80,80); ctx.font="30px Arial"; ctx.fillText("score: "+score, 10, 30); ySpeed+=0.02; fishY+=ySpeed; } var gameTimer=setInterval(mainLoop, 10); document.onKeydown=function(){ ySpeed=-2; } function checkHitPipe(){ if(x<70){ if((fishY-y<270)||(fishY-y>450)){ clearInterval(gameTimer); ctx.font="80px Arial": ctx.fillText("Game Over!", 100, 250); } } } </script> </html>
-
<html> <audio id='beep' src='https://maxw.com/beep2.mp3'></audio> <div style='background-color:gold; width:640px;'> <canvas id="gameCanvas" widdth="640" height=480"></canvas> </div> <div style='display:block;'> <img id='dog' src='https://maxw.com/smuffy.png'> <img id='donut' src='https://maxw.com/donut.png'> </div> <script> var ctx=gameCanvas.getContext("2d"); var x=[100,300,500]; var y=[0,0,0]; var speed=[2,1,3]; var dogX=300, changeX=0, score=0; var gameTimer=setInterval(mainLoop,20); function mainLoop() { ctx.clearRect(0,0,640,480); ctx.font="30px Arial"; ctx.fillText("Score; "+score,10,30); for(var n=0; n<3; n++){ ctx.drawImage(donut,x[n],y[n],80,80); y[n]+=speed[n]; //checkForHits(); if(y[n]>400){ y[n]=-80; x[n]=Math.random()*600; } } ctx.drawImage(dog,dogX,400,80,80); dogX+=changeX; } document.onKeydown=KeyPressed; function keyPressed(e){ var k=e.keyCode; if(k==37){changeX=-4;} if(k==39){changeX=4;} } function CheckForHits(n) { if((Math.abs(400-y[n])<60)&& (Math.abs(dogX-x[n])<60)){ score+=1; y[n]=-80; x[n]=Math.random()*600; beep.play(); } } SetTimeout(gameOver,60000); function gameOver(){ clearInterval(gameTimer); ctx.font="80px Arial"; ctx.fillText("Game Over!",100,250); } </script> </html> I've got this now.
-
I've done what the book states in the code, I looked at both the final and the tutorial section. According to the tutorial, line 27 which is if(y[n]>480){ 'If it has reached the bottom of the screen then move it back to the top.' So all of that is together. Line 30 is end of the donut loop. y[n]=-80; X[n]=Math.random()*600;
-
Where am I going wrong, i've typed it out correctly, based on the book's code. Made a few errors, but I've corrected it, no? 🤔
-
I did correct that error. This is what is in the console.
-
X[n]=Math.random()*600; This appears to be the error now. <html> <audio id='beep' src='https://maxw.com/beep2.mp3'></audio> <div style='background-color:gold; width:640px;'> <canvas id="gameCanvas" widdth="640" height=480"></canvas> </div> <div style='display:block;'> <img id='dog' src='https://maxw.com/smuffy.png'> <img id='donut' src='https://maxw.com/donut.png'> </div> <script> var ctx=gameCanvas.getContext("2d"); var x=[100,300,500]; var y=[0,0,0]; var speed=[2,1,3]; var dogX=300, changeX=0, score=0; var gameTimer=setInterval(mainLoop,20); function mainLoop() { ctx.clearRect(0,0,640,480); ctx.font="30px Arial"; ctx.fillText("Score; "+score,10,30); for(var n=0; n<3; n++){ ctx.drawImage(donut,x[n],y[n],80,80); y[n]+=speed[n]; //checkForHits(); if(y[n]>400){ y[n]=-80; X[n]=Math.random()*600; } } ctx.drawImage(dog,dogX,400,80,80); dogX+=changeX; } document.onKeydown=KeyPressed; function keyPressed(e){ var k=e.keyCode; if(k==37){changeX=-4;} if(k==39){changeX=4;} } function CheckForHits(n) { if((Math.abs(400-y[n])<60)&& (Math.abs(dogX-x[n])<60)){ score+=1; y[n]=-80; X[n]=Math.random()*600; beep.play(); } } SetTimeout(ganeOver,60000); function gameOver(){ clearInterval(gameTimer); ctx.font="80px Arial"; ctx.fillText("Game Over!",100,250); } </script> </html>
-
I've tried two tutorials, so i don't know where I've gone wrong. var ctx=gameCanvas.getContext(2d); Line eleven? I added speech marks on both, no change.
-
<html> <audio id='beep' src='https://maxw.com/beep2.mp3'></audio> <div style='background-color:gold; width:640px;'> <canvas id="gameCanvas" widdth="640" height=480"></canvas> </div> <div style='display:block;'> <img id='dog' src='https://maxw.com/smuffy.png'> <img id='donut' src='https://maxw.com/donut.png'> </div> <script> var ctx=gameCanvas.getContext(2d); var x=[100,300,500]; var y=[0,0,0]; var speed=[2,1,3]; var dogX=300, changeX=0, score=0; var gameTimer=setInterval(mainLoop,20); function mainLoop() { ctx.clearRect(0,0,640,480); ctx.font="30px Arial"; ctx.fillText("Score; "+score,10,30); for(var n=0; n<3; n++{ ctx.drawImage(donut,x[n],y[n],80,80); y[n]+=speed[n]; //checkForHits(); if(y[n]>400){ y[n]=-80; X[n]=Math.random()*600; } } ctx.drawImage(dog,dogX,400,80,80); dogX+=changeX; } </script> </html> This was the following tutorial, nothing seems to change in scale for the images. I may of made an error in some places, I don't know what is going with either.
-
I don't know, I've made sure to read to see if I've done it correctly. <html> <div style='background-color:dodgerblue; width:640px;'> <canvas id="gameCanvas" widdth="640" height=480"></canvas> </div> <div style='display:none;'> <img id='apple' src='https://maxw.com/apple.png'> <img id='apple' src='https://maxw.com/monster3.png'> </div> <script> var ctx=gameCanvas.getContext("2nd"); var x=300, y=50, monsterX=300, changeX=0, score=0; var gameTimer=setInterval(mainLoop),20); function mainLoop() { ctx.clearRect(0,0,640,480); ctx.font="30px Arial"; ctx.fillText("Score; "+score,10,30); ctx.drawImage(apple,x,y,80,80); y+=3; if(y>480){y=80; x=Math.random()*600;} ctx.drawImage(monster, monsterX,400,80,80); monsterX+=changeX; //checkForHits(); } document.onKeydown=KeyPressed; function keyPressed(e){ var k=e.keyCode; if(k==37){changeX=-2;} if(k==39){changeX=2;} } function CheckForHits() { if((Math.abs(400-y)<60)&& (Math.abs(monsterX-x<60)){ score+=1; y=-80 X=Math.random()*600; } } SetTimeout(ganeOver,30000); function gameOver(){ clearInterval(gameTimer); ctx.font="80px Arial"; ctx.fillText("Game Over!",100,250); } </script> </html>
-
This is what simply loaded, either the above or more I added. It shouldn't matter, as the tutorial states to check that the images to load to a scale resolution.🙄
-
I tried this one out, an image is suppose to be scaled down, but doesn't show it. <html> <div style='background-color:dodgerblue; width:640px;'> <canvas id="gamecanvas" widdth="640" height=480"></canvas> </div> <div style='display:block;'> <img id='apple' src='https://maxw.com/apple.png'> <img id='apple' src='https://maxw.com/monster3.png'> </div> <script> var ctx=gameCanvas.getContext("2nd"); var x=300, y=50, monsterX=300, changeX=0, score=0; var gameTimer=setInterval(mainLoop), 20); function mainLoop() { ctx.clearRect(0,0,640,480); ctx.font="30px Arial"; ctx.fillText("Score; "+score,10,30); ctx.drawImage(apple,x,y,80,80); y+=3; if(y>480){y=80; x=Math.random()*600;} ctx.drawImage(monster, monsterX,400,80,80); monsterX+=changeX; //checkForHits(); } </script> </html> This should display the images as much smaller on a background, no? Because I continued further with the tutorial, and nothing changed, so I must of done something wrong in the first part, I did check the final code, so I don't know where I made an error.
-
I typed that example without really thinking on the accuracy. The second game as I've noticed from the first has the graphics integrated in the code. Using the div tags, so the browser already has the graphics for a shape. That wasn't something I even thought about.😌 The first uses an image. <style> #board{position:absolute; width:550px; height:450px; background-color:lightgreen;} #bat{position:absolute; top:420px; width:80px; height:20px; background-color:blue;} #ball{position:absolute; width:48px; height:48px; border-radius:24px; background-color:yellow;} </style> <body onmousemove="moveBat(event)"> <div id='board'></div> <div id='bat'></div> <div id='ball'></div> After the above body and body within html tags and then after script is next or between html after body. Is this style CSS? kind of.
-
It is a basic a book, it is aimed for beginners or young learners. I never learnt Javascript, but the tutorial does state what each line is, it isn't a experienced book. For somebody with years behind them. The x and y variables will store where the ball is, this is from the next tutorial on basic tennis. Not like a two player game. The code is similar to the one above, just a little different. Use the mouse to click to the move the rectangle bat. It isn't bad at all, but may be there could be more down the road in the book on, perhaps screens. Mouse listeners, variables, random numbers, keyboard listeners, sound, functions are listed in the book. Canvas too and timers most important than one.
-
Thank you, I guess I was going to make a few errors typing it out. I am not sure on Javascript, so I thought this book may assist me in learning something to do with it. Not bad little game, it doesn't have much of a difficulty. From what little I know, it doesn't have a end scene to it. So get many click counts before the time runs out. As for the last code, var balloon = document.getElementsById("balloon"); This can be added at the bottom after var time line? How old is the above then?
-
Hello, I have used this example code, from a book, pretty basic one. By In Easy steps. I think I typed it out correctly, according to the tutorial in the book, it doesn't do anything that the example states it should. Only an image loads, and then a counter of 1 loads after. <html> <h1 id='scoreBox'></h1> <style> #ballon{position:absolute; -webkit-transition:all 0.2s; height:160px;} </style> <img id='balloon' src='https://maxw.com/b1.png'> <script> balloon.addEventListener('click',ClickedIt); var score=0, count=0; function ClickedIt(){ score++; scoreBox.innerHTML='score:'+score; balloon.style.height='1px'; } function moveIt(){ balloon.style.height='160px'; balloon.style.left=Math.random()*800+'px'; balloon.style.top=Math.random()*600+'px'; count++; if(count==20){ alert('game over!'); clearInterval(time); } } var timer=SetInterval(moveIt, 1000); </script> </html> Thank you.
-
Can anybody just use this as a contact page? I need one.
