Game script error

Forum Moderators: open

Message Too Old, No Replies

Game script error

futureautomation

3:51 pm on Apr 19, 2022 (gmt 0)

<html>
<div style='background-color:blue; height:480px; width:640px;'>
  <canvas id="gameCanvas" width="640" height="480"></canvas>
</div>
<script>
var ctx=gameCanvas.getContext("2d");
var x=240, y=180, dir=90, score=0;
drawBackground();
function drawBackground(){
  ctx.strokeStyle='orange';
  ctx.lineWidth=40;
  ctx.strokeRect(0, 0, 640, 480);
}
var gameTimer=setInterval(mainLoop, 50);
function mainloop(){
  ctx.fillstyle='orange';
  ctx.fillRect(x,y,9,9);
  if(dir==90){x+=10;}
  if(dir==180){y+=10;}
  if(dir==-90){x-=10;}
  if(dir==0){y-=10;}
  //checkpixelcolor();
  score++;
  ctx.fillRect(0,0,100,20);
  ctx.fillStyle='black';
  ctx.font="20px Arial";
  ctx.fillText("Score: "+score,2,16);
}
function checkPixelcolor(){
  var col=ctx.getImagedata(x,y,1,1).data;
  if(col[3]!=0){
  clearInterval(gameTimer);
  ctx.font="80px Arial";
  ctx.fillText("Game Over!",100,250);
 }
}
</script>
<html>

Hi, the following code doesn't seem to load any graphics on the canvas, where exactly is the problem?

Thank you.

robzilla

9:07 am on May 6, 2022 (gmt 0)

So score++ shouldn't be in this section of the code, or it is in the wrong place in it?

Well, this version of the game apparently rewards you simply for staying alive (i.e. not colliding). Nothing seems to get placed on the canvas except the snake itself, so there's nothing for the snake to gobble up as is usually the case in a game of Snake (like the apples in Google's version if you search for "snake game"). So in that respect the score++ is probably in the right place.

So The wall game requires score++ in a Check for Hits part?

Nothing is required, you can make it as you like, but that's the function that checks if you're hitting a colored block, which is probably the thing you want to reward with a +1, so yes.

Note that there's a bug preventing the left key from working. See if you can fix that. Another interesting challenge might be preventing Game Over when the snake is moving left and you press the right arrow key (or right and left, up and down, down and up), an action that should probably be ignored by the game. This does require a bit of custom coding, though.

futureautomation

6:57 pm on May 6, 2022 (gmt 0)

Ah, so it is basic, the whole point of the game is just to avoid hitting the perimeter. I'm actually not clued up on this now. I think I'll leave that for the moment. Snake was a game that invoked moving around until the snake was too long and it became much more difficult to avoid contact with itself, I think now.

My other main problem was the wall game, so it works, but none of the blocks are removed once the ball hits them, just the black shadow over them. No score recorded.

Since that seems pretty complete, what is the actual trouble?

<html>
<audio id='ping' src='ping.mp3'></audio>
<div style='background-color:#333333; width:640px;'>
<canvas id="gameCanvas" width="640" height="480"></canvas>
</div>
<script>
var ctx=gameCanvas.getContext("2d");
var x=280, y=400, speedX=0, speedY=-8, batX=280, score=0;
drawBricks();
function drawBricks(){
for(a=0; a<5; a++){
for(b=0; b<8; b++){
ctx.fillStyle='#ff00'+(40+a*40).toString(16);
ctx.fillRect(b*80,100+a*20,79,19);
}
}
}
var gameTimer=setInterval(mainloop, 25);
function mainloop(){
ctx.clearRect(x,y,7,7);
x=x+speedX;
y=y+speedY;
checkForHits();
ctx.fillStyle='#ffffff';
ctx.fillRect(x,y,7,7);
if((x>620)||(x<00))speedX=-speedX;
if(y<28)speedY=8;
if(y>480){gameover();}
ctx.clearRect(0,460,640,20);
ctx.fillStyle='#ccccccc';
ctx.fillRect(batX-60,460,120,20);
}
function checkForHits(){
var col=ctx.getImageData(x,y,1,1).data;
if((y>460&&(Math.abs(batX-x))<60)){
speedY=-8;
speedX=Math.round(0.15*(x-batX));
}else if (col[3]!=0){
var x0=80*Math.floor(x/80);
var y0=20*Math.floor(y/20);
ctx.fillRect(0,0,640,20);
ctx.fillStyle='black';
ctx.font="20px Arial";
ctx.fillText("score: "+score,2,16);
}
}
document.onmousemove=function(){batX=event.clientX;}
function gameover(){
clearInterval(gameTimer);
ctx.font="80px Arial";
ctx.fillText("Game Over!", 100, 250);
}
</script>

futureautomation

11:20 pm on May 6, 2022 (gmt 0)

No errors right? I did check to see if there were. I even tried changing the score from 2 to 4. No change in the score count, it is always 0, the Game over does work, if the ball gets to the player's area.

robzilla

8:45 am on May 7, 2022 (gmt 0)

If by "changing the score from 2 to 4" you mean you changed ctx.fillText("score: "+score,2,16); to ctx.fillText("score: "+score,4,16); hoping the score count would change, then you're not understanding the function properly. See fillText [developer.mozilla.org].

The Breakout clone is also simplified (incomplete really), in that you're just punching holes into the blocks, not actually removing the whole block once you hit it. There's a function that draws the bricks onto the canvas, but none that removes them when they're hit.

So these are very basic "games", good examples perhaps of simple animation and interaction but not fully fleshed out. Perhaps they'll get to that in proceeding chapters.

You could put score++; before ctx.fillText("score: "+score,2,16); to give points whenever a block is hit, but it's a very rough kind of scoring (basically +1 for every single move the "ball" makes over a colored block).

futureautomation

5:21 pm on May 7, 2022 (gmt 0)

So they've made these basic tutorials and they aren't even functioning mini games? One of them does sort of work, there is a donut one, but that doesn't give a score count either.

Honestly. This book is turned out to be very poor. I'll recycle it at some point. It should do as it says on the book, make some games how ever small, and they should function as a mini game with a working score system and game over. Rubbish book.

There are only two chapters are that, and just about changing graphics of an existing game like Meteors. So a rocket ship has to dodge them, with a score, but it has never worked for me.

You're suggestion of placing the score above the ctx.FillText does give it some actual function, a random score of 12, then goes up another

Well I will try the last remaining tutorials, and see what happens with that one. Thank you.

futureautomation

5:53 pm on May 7, 2022 (gmt 0)

On the last chapter there is a Game mods, so to add a high score. It gives the example of the meteor game, in this case, I will use the Break game, since it works out well.

var highScore=0 loc=localStorage.getItem('highScore');
if(loc>0)highScore=loc;

ctx.fillText is where it needs to be added this bit of code.

<html>
<audio id='ping' src='ping.mp3'></audio>
<div style='background-color:#333333; width:640px;'>
<canvas id="gameCanvas" width="640" height="480"></canvas>
</div>
<script>
var ctx=gameCanvas.getContext("2d");
var x=280, y=400, speedX=0, speedY=-8, batX=280, score=0;
var highscore=0 loc=localStorage.getItem('highscore');
if(loc>0)highscore=loc;
drawBricks();
function drawBricks(){
for(a=0; a<5; a++){
for(b=0; b<8; b++){
ctx.fillStyle='#ff00'+(40+a*40).toString(16);
ctx.fillRect(b*80,100+a*20,79,19);
}
}
}
var gameTimer=setInterval(mainloop, 25);
function mainloop(){
ctx.clearRect(x,y,7,7);
x=x+speedX;
y=y+speedY;
checkForHits();
ctx.fillStyle='#ffffff';
ctx.fillRect(x,y,7,7);
if((x>620)||(x<00))speedX=-speedX;
if(y<28)speedY=8;
if(y>480){gameover();}
ctx.clearRect(0,460,640,20);
ctx.fillStyle='#ccccccc';
ctx.fillRect(batX-60,460,120,20);
}
function checkForHits(){
var col=ctx.getImageData(x,y,1,1).data;
if((y>460&&(Math.abs(batX-x))<60)){
speedY=-8;
speedX=Math.round(0.15*(x-batX));
}else if (col[3]!=0){
var x0=80*Math.floor(x/80);
var y0=20*Math.floor(y/20);
score++;
ctx.fillRect(0,0,640,20);
ctx.fillStyle='black';
ctx.font="20px Arial";
ctx.fillText("score: "+score,2,16);
ctx.fillText("High score: "+Highscore,100,20);
}
}
document.onmousemove=function(){batX=event.clientX;}
function gameover(){
clearInterval(gameTimer);
ctx.font="80px Arial";
ctx.fillText("Game Over!", 100, 250);
if(score>highscore){
localStorage,setItem('highscore',score);
}
</script>

This should work, but it doesn't. I guess this example code will have to do, for a working example, when it does. I checked the console, so the last error was.var highscore=0 loc=localStorage.getItem('highscore');

capital S is used in this, I tried it, but it didn't work.

robzilla

9:27 pm on May 7, 2022 (gmt 0)

a random score of 12

It's not random, 12 will be the number of movements the "ball" has made over a colored block (which will depend on the direction the ball takes). Not a great scoring system, of course, but certainly not random.

This should work, but it doesn't

It shouldn't because I count at least three errors in the code. Use the console to troubleshoot these issues one by one. Try different things, Google the error message and/or take a course of the Javascript basics. You're not going to learn to make games without these troubleshooting skills and at least a rudimentary understanding of the programming language. There are a great number of tutorials and videos that can help you get started.

futureautomation

5:36 pm on May 9, 2022 (gmt 0)

Right, as I stated, the book was aimed at beginners, it clearly isn't written for a beginner. The console is useful, but it isn't a solution to all the problems.

I tried the other game, that still has a problem, the console gives an error of,

var gameTimer=setInterval(mainloop,20);
function mainloop(){
moveMeteors();
MoveRocket();
}

MoveRocket is not defined, the objects move across, but the player's object doesn't display. I don't know, why some of the examples have worked a little or complete, but others haven't. So far, four are with errors, another three work complete.

As I noted, there have been errors, the reason I am sceptical of what you stated, they may of been there intentional, is I had another book from the company, and it was assessed by some few years back as not being correct, and that if code is going to be published, for the least regardless of the reader's understanding it should work.

There isn't much more to state.

This 38 message thread spans 2 pages: 38