Jump to content

Counter game pop the balloon

phpuserlogin

By phpuserlogin
in JavaScript

 Share

Recommended Posts

phpuserlogin Newbie

phpuserlogin

Posted
  • Author
Posted 
var gameTimer=setInterval(mainLoop, 10);
document.onKeydown=function(){
ySpeed=-2;
}

Not sure.

Quote

Press any key on the keyboard to make the fish jump. How many pipes can the fish jump through?

Step 15. Which is the last. The code is on the next page in total. The only other info is change some of the code to make it quicker or change the pipe positions.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

The ability to solve problems is essential to being a developer, this is what I am trying to teach.

1. Always have the browser console open. When the page loads, look at the error messages. Each error message will tell you exactly what and where the problem is. If you don't understand what the error message means, I can explain it to you so that you will understand other error messages like that in the future.

2. Interpreting your own code. You should read your own code, line by line, and write down on paper what value every variable has at each point in time. This is called "tracing" and all developers need to know this. Here's an example of a trace for a small block of code. 

1  let sum = 0;
2  for(let i = 0; i < 5; i++) {
3   sum += i;
4  }
5  console.log(sum);

Trace
You have to read through the code and write something like this down on paper. If you can't do this, you cannot write software.

Line number Variables Code
sum i
1 0 undefined let sum = 0
2 0 1 for(let i = 0; i < 5; i++ ) {
3 1 1 sum += i
4 1 2 }
2 1 2  for(let i = 0; i < 5; i++ ) {
3 3 2 sum += i 
4 3 3 }
2 3 3  for(let i = 0; i < 5; i++ ) {
3 6 3 sum += i
4 6 4 }
2 6 4  for(let i = 0; i < 5; i++ ) {
3 10 4 sum += i 
4 10 5 }
5 10 undefined  console.log(sum)
Link to comment
Share on other sites
phpuserlogin Newbie

phpuserlogin

Posted
  • Author
Posted

I didn't know the above. The closest I have tried to programming was some blender bricks, and Visual basic, a very long time ago, and python. I'm not a programmer. I bought this book since it was aimed at a beginner audience, I thought why not. The book doesn't even state this as guide.

So why doesn't the fish image not move with the mouse, I have changed the error, so it should work? I have typed it out with errors or is the book wrong on some of the code, could there be errors in it? I'm guessing I'm the one that has made them. Four games, and only the balloon one has worked so far. The other, tennis, catch and then donuts, and then fish dodging pipes have errors of some sort.

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

If you copy and paste code without understanding how it works then mistakes are inevitable and you won't be able to identify them. You need to first learn the basics of Javascript before trying to build complex things.

I recommend reading the Javascript tutorial [ https://www.w3schools.com/js/default.asp ] and doing all the exercises and try-it examples along the way. Once you have done that you should be able to make these games work without a problem.

Link to comment
Share on other sites
phpuserlogin Newbie

phpuserlogin

Posted
  • Author
Posted

There is no code to paste, I typed it out of the examples in the book.

I even tried this game after the fish one. 

functionmoveMeteors(){

This appears to be the error in the console. 

<!doctype html>
<style>
div{width:640px; height:480px;
    background:url('stars.png');}
img{display:block;}
</style>
<div>
<canvas id="gameCanvas" width="640" height="480"></canvas>
</div>
<Img id='rocket' src='rocket.png'>
<img id='meteor'src='meteor.png'>
<script>
var ctx=gameCanvas.getContext("2d");
var x=[600,600,600,600,600];
var y=[0,100,200,300,400];
var speed=[-1,-2,-0.5,-1.2,-1.8];
var rocketY=200, changeY=0, score=0;

var gameTimer=setInterval(mainLoop, 10);
function mainLoop(){
moveMeteors();
MoveRocket();
}
functionmoveMeteors(){
	ctx.clearRect(0,0,640,480);
	for(var n=0; n<5; n++){
        ctx.drawImage(meteor,x[n],y[n],80,80);
	x[n]+=speed[n];
	checkForHits(n);
	if(x[n]<-80){
	    x[n]=640; y[n]=Math.random()*400;
	}
    }
}
function moveRocket(){
	ctx.drawImage(rocket,10,rocketY,80,80);
	rocketY+=changeY;
	score+=1;
	ctx.fillstyle="yellow";
	ctx.font="30px Arial";
	ctx.fillText("score: "+score, 10, 30);
	if((rocketY<0)||(rocketY>400)){changeY=0;}
}
document.onkeydown=keyPressed;
function keypressed(e){
    var k=e.keyCode;
    if(k==38){changeY=-3;}
    if(k==40){changeY=-3;}
}
function checkForHits(n){
    if(math.abs(x[n]<50)&&
          (math.abs(rocketY-y[n]<50)){
	  clearInterval(gameTimer);
	  ctx.font="80px Arial";
	  ctx.fillText("Game Over!",100,250);
	}
    }
</script>
</html>

 

rocket.png

meteor.png

stars.png

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

You need to learn Javascript. Once you have learned Javascript properly, you will find it very easy to fix the code to make it work.

Link to comment
Share on other sites
phpuserlogin Newbie

phpuserlogin

Posted
  • Author
Posted (edited)

I bought this book as it was aimed at a beginner, the code has worked for you without any errors, you can obviously work out what is wrong with the above, I noticed I didn't put a space with the function moveMeteors

It has errors from the beginning?

Current errors are on

document.onkeydown=keyPressed; this isn't defined.

checkForHits(n);

moveMeteors();

if(math.abs(x[n]<50)&&

Edited by phpuserlogin
Added current errors
Link to comment
Share on other sites

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