Jump to content

catch game code

phpuserlogin

By phpuserlogin
in JavaScript

 Share

Recommended Posts

phpuserlogin Newbie

phpuserlogin

Posted
Posted 
<!DOCTYPE html>
<div style='background-color:gold; width:640px;'>
<canvas id="gameCanvas" width="640" height="480"></canvas>
</div>
<div style='display:none;'>
<img id='dog' src='smuffy.png'>
<img id='donut' src='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],50,50);
	y[n]+=speed[n];
	checkForHits();
	if(y[n]>400){
	y[n]=-80; x[n]=Math.random()*600;
 }

}
ctx.drawImage(dog,dogX,400,60,60);
dogX+=changeX;
}
    document.onkeydown=keyPressed;
    function keyPressed(e){
    var k=e.keyCode;
    if(k==37){changeX=-4;}
    if(k==39){changeX=4;}
}

Does this code work? 

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;
   }
}
</script>
</html>

 

Thanks

donut.png

smuffy.png

Link to comment
Share on other sites
  • 2 weeks later...
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Your code refers to variables that are not defined, your html code is incomplete. IF your tutorial suggests this is correct! I suggest you throw it away and look else where, as to pinpoint a solution to this is impossible, as currently everything is wrong! JavaScript html which adds to the problems. 

Validate html, then press F12 and view and correct, any console error message regarding JavaScript code.

Link to comment
Share on other sites
phpuserlogin Newbie

phpuserlogin

Posted
  • Author
Posted

The tutorial starts out by displaying this code. 

<!DOCTYPE html>
<html>
<div style='background-color:gold; width:640px;'>
<canvas id="gameCanvas" width="640" height="480"></canvas>
</div>
<div style='display:none;'>
<img id='dog' src='smuffy.png'>
<img id='donut' src='donut.png'>
</div>
<script>
</script>
</html>

I forgot html at the top there, but that doesn't change the result.

Then the next code part is this. 

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],50,50);
	y[n]+=speed[n];
	checkForHits();
	if(y[n]>400){
	y[n]=-80; x[n]=Math.random()*600;
 }

}

ctx.drawImage(dog,dogX,400,60,60);
dogX+=changeX;
}
</script>
</htm>

Exactly as shown in the book, so you just remove or add the exact code and don't include the two tags below

 a section on arrays to do with the objects, essentially what the code does.

Then it says to check F12 for any bugs. Gives an example of the word snuffy as smffy, but obviously there is no error of that sort.

Then the next page,

move the player code, 

document.onkeydown=keyPressed;
    function keyPressed(e){
    var k=e.keyCode;
    if(k==37){changeX=-4;}
    if(k==39){changeX=4;}
}

Then the next part below is check for Hits. 

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;
   }
}

I didn't include the sound file, I don't think that would matter. bleep.play above the first curly

 

The the last is Gameover 

 setTimeout(gameover,30000);
   function gameover(){
   clearInterval(gameTimer);
   ctx.font="80px Arial";
   ctx.fillText("Game Over!",100,250);

}

You know better than I do, the game sort of works, but the check hits section doesn't register a touch with the object and player.

Link to comment
Share on other sites
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...