Counter game pop the balloon

phpuserlogin · March 21, 2022

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.

Ingolme · March 21, 2022

You have a few mistakes in your code.

Missing an "o" on this line:

#balloon{position:absolute;

Capital S where it should be lowercase on this line:

var timer=setInterval(moveIt, 1000);

Missing an "r" on the line:

clearInterval(timer);

With that the code should work, but there's one mistake which the authors of the book made. They're assuming that the variable "balloon" will automatically point to the image. This currently works because of backwards compatibility, but shouldn't be relied on. You should always use DOM methods to access elements.

var balloon = document.getElementById("balloon");

phpuserlogin · March 22, 2022

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?

Ingolme · March 22, 2022

That line of code has to go at the very beginning before the variable "balloon" is used.

I haven't read the book, but I think the game is just there for teaching purposes so it's not going to be amazing. A decent game would require a whole lot more code.

If you're just copying code from the book without trying to understand what it does, you won't learn anything. You need to read the parts of the book which explain how the code works so that you can write your own code and use your own skill to create more complex things.

phpuserlogin · March 23, 2022

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.

dsonesuk · March 23, 2022

When referring to id reference, it will always refer to a singular element.

document.getElementById("balloon");

Never! Multiple.

document.getElementsById("balloon");

phpuserlogin · March 24, 2022

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>

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.

Edited March 24, 2022 by phpuserlogin
Added some more info

phpuserlogin · March 26, 2022

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.

Edited March 26, 2022 by phpuserlogin

Ingolme · March 26, 2022

If you open the browser developer tools (usually by pressing F12 on Windows systems) and refresh the page an error message will appear in the console telling you exactly what the problem is and on which line of code.

phpuserlogin · March 27, 2022

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.🙄

phpuserlogin · March 27, 2022

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>

Edited March 27, 2022 by phpuserlogin
Tried the next tutorial

phpuserlogin · March 27, 2022

<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.

Ingolme · March 27, 2022

There are still error messages in the console. Please check the Javascript console for errors each time you update the code.

It says this:

Uncaught SyntaxError: identifier starts immediately after numeric literal (Line 11, column 34)

phpuserlogin · March 27, 2022

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.

Edited March 27, 2022 by phpuserlogin
Tried the edit

Ingolme · March 27, 2022

Look at the Javascript console for more error messages.

phpuserlogin · March 28, 2022

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>

dsonesuk · March 28, 2022

SetTimeout(ganeOver,60000); function gameOver(){ clearInterval(gameTimer); ctx.font="80px Arial"; ctx.fillText("Game Over!",100,250); }

phpuserlogin · March 28, 2022

I did correct that error.

This is what is in the console.

dsonesuk · March 28, 2022

You keep adding variables and expecting the code to magically know what it is? it does not work like that! Until you understand that! you are going to end up with continuous errors.

phpuserlogin · March 28, 2022

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? 🤔

Ingolme · March 28, 2022

Typing out the code isn't enough, you need to understand what the code is doing.

Show me what's on line 27 and tell me what you think the problem is.

phpuserlogin · March 29, 2022

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;

Ingolme · March 29, 2022

That's an uppercase 'X'. In Javascript, uppercase and lowercase are not the same.

phpuserlogin · March 29, 2022

<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.

phpuserlogin · March 30, 2022

<!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>

Counter game pop the balloon

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in