Forum Moderators: open
Message Too Old, No Replies
Game script error
<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.
var ctx=gameCanvas.getContext("2d");
gameCanvas is not defined. Instead, you need to first get it from the DOM:
var ctx=document.querySelector('#gameCanvas').getContext("2d");
Dom?
I used this code from a recent published book. There is no mention of queryselector or dom or anything else, just as you see above.
gameCanvas is not defined
It's automatically defined by the use of id="gameCanvas". Not as foolproof as getElementById() or querySelector(), but it works.
The problem here is that the function is named mainloop() but you're calling upon mainLoop(). Javascript is case-sensitive :-)
The console of your browser will show you any issues it runs into while rendering the page: [balsamiq.com...]
In this case*: Uncaught ReferenceError: mainLoop is not defined
* Pun not intended.
It's automatically defined by the use of id="gameCanvas". Not as foolproof as getElementById() or querySelector(), but it works.
I would not recommend this (attempting to access an element in the page without using one of the methods for explicitly getting that element).
But you're right, the problem was a case sensitivity one. I should have actually tried the code before commenting. :)
<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';
ctxfillRect(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){
pingMp3.currentTime=0;
pingMp3.play();
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);
}
}
</script>
No idea on what is up with this one, another code example from the book.
was there a question?
No idea on what is up with this one...
neither do we.
No idea on what is up with this one
Again, your browser console will tell you. There are two syntax errors you need to fix to get the code working.
What I meant, is I typed it out of the book I have, and this was the result, just a blank screen, obviously the black colour was the only part displaying.
I removed the sound files, that has solved that problem, a missing bracket caused another error, and a missing full stop for ctx.fillRect
I think it works now. There were a few errors, I did type it as the tutorial stated, there are errors in the code of the book, almost beginner mistakes. That isn't good editing.
This works, but no score count recorded.
<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>
That's not uncommon in programming books, unfortunately. But you can learn a lot from debugging code yourself, just typing it out of the book is obviously not very educational.
If you go through the code logic, you'll find that the variable score is being set (score=0), it's being output (ctx.fillText("score: "+score,2,16);), but nowhere is it updated.
A few mistakes may of been myself, like the missing full stop. But for example, L used when it should've been lower case that is an obvious error in the previous tutorials.
I'm a beginner myself, so this book should help me understand some javascript, having errors in certain places is no good to a beginner.
The gam0ver is like this in the tutorial, it must gameOver()
What is the solution to the score code part? The unfortunate position about the company that sells the book, is they offer no support for any of the tutorials. So a book is published with some errors, and no support is offered. Cheap rip off.
There are free tutorials online if you wish to learn javascript.
The score is set to 0 at the start. Then for some basic scoring, I suppose you'd just increase it by 1 every time you hit a block. The function responsible for checking for hits is, you guessed it, checkForHits(), so that's where I'd increase the score (before it's output, of course). Hopefully you can take it from there?
On page 57, 9, Check for Hits, the score section of the code is stated as 'show the score', so ctx.fillText("score: "+score,2,16);
Once the score code has been added, check for errors it reads on the following page, which is the last, 'Check all code from line 34 onwards. Use the developer console to help.
Line thirty four is from here,
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);
}
Looking back at the snake game, this works, but as soon as the document.onkeydown=handlekey is added, it doesn't display what is there, only a blue background.
<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);
}
}
document.onkeydown=handlekey;
function handlekey(e){
var k=e.keyCode:
if(k==38){dir=0;}
if(k==39){dir=90;}
if(k==40){dir=180;}
if(k==37){dir-90;}
}
[edited by: futureautomation at 10:28 am (utc) on May 4, 2022]
Right, so they're teaching you to use the developer console to debug code. That's good.
The score is being shown, as described. It's just not being updated. Perhaps that's part of a next section?
Looking back at the snake game, this works, but as soon as the document.onkeydown=handlekey is added, it doesn't display what is there, only a blue background.
I'm guessing you didn't check the console for errors? You would've found the problem otherwise.
Sure, but the code in the book should work as is, why would there be errors, MainLoop is a consistent error in the book, and this is aimed at a beginner audience, of those under sixteen, anybody within that age range. It shouldn't have these errors, if you are new, a beginners book with basic examples should be accurate.
I tried learning some javascript when I was that age, but I never caught on, I tried python in late 2013, and some old Visual basic for the pocket pc, but I never really caught on with programming languages.
I've made an error with this part of it, a : when it should be;
var k=e.keyCode:
It partly works now, the second game, only two keys work, arrows up and down
This is the latest error.
Uncaught ReferenceError: checkPixelcolor is not defined
mainloop
checkPixelcolor();
"Check all code from line 34 onwards. Use the developer console to help." This to me suggests the author has consciously put some errors in so that you need to debug the code. Beginners especially need to be taught how to find problems in the code, because they don't know what to do if the code doesn't work because of a typo (unfortunately a very common mistake in programming). So while printing errors in books are also a reality, I think they're just trying to teach you a valuable lesson.
By now the cause of the error "checkPixelcolor is not defined" (or at least where to look for it) should be obvious to you.
I think from a beginner's view that type of example isn't good, it may as a tutorial which gives the example of poor code or broken code, but sort of blindly, I think a few would be scratching their head, wondering what is going on here. In another one of those books, poor code was used for an image upload. I got a view from another forum a few years back, and the poster stated the code was rubbish, and the author should've made sure to check what they produce so that it works.
The game book probably needs updating on errors, and so on, to give a pointer.
By removing the checkPixelcolor(); it display the score just going up rapidly, so with it, no score. I don't quite know where it goes or it missing from somewhere within this code? There is a function as displayed checkPixelcolor the difference the function has capitals P and C.
I don't have the book in front of me, of course, I'm just going by what you're posting. Maybe the book is full of errors, it's possible, it happens. Even so, if you're serious about learning to code, you might want to view it as a challenge rather than a nuisance.
The score goes up rapidly because you have score++; in the main loop, which is called a loop for a reason. You want to reward the player for doing something right, so you need to put it in a place where a rewardable action is being checked. In your previous example, checkForHits() would be the most logical place.
I used this code from a recent published book.
No idea on what is up with this one, another code example from the book.
What I meant, is I typed it out of the book I have, ...
There were a few errors, I did type it as the tutorial stated, there are errors in the code of the book, almost beginner mistakes. That isn't good editing.
...this book should help me understand some javascript, having errors in certain places is no good to a beginner.
The unfortunate position about the company that sells the book, is they offer no support for any of the tutorials. So a book is published with some errors, and no support is offered. Cheap rip off.
Sure, but the code in the book should work as is, why would there be errors, MainLoop is a consistent error in the book, and this is aimed at a beginner audience, of those under sixteen, anybody within that age range. It shouldn't have these errors, if you are new, a beginners book with basic examples should be accurate.
I think from a beginner's view that type of example isn't good, it may as a tutorial which gives the example of poor code or broken code, but sort of blindly, I think a few would be scratching their head, wondering what is going on here. In another one of those books, poor code was used for an image upload. I got a view from another forum a few years back, and the poster stated the code was rubbish, and the author should've made sure to check what they produce so that it works.
The game book probably needs updating on errors, and so on, to give a pointer.
why are you filing your complaints here about a book that was published and sold elsewhere?
have you posted a review where you bought the book?
The official site doesn't take any support. So it is pointless, so since there is a javascript section on this forum, I thought I'd get some pointers on where I am going wrong or have, or the tutorial code has.
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);
}
So score++ shouldn't be in this section of the code, or it is in the wrong place in it?
This is the snake game, it doesn't have a check for hits part.
So The wall game requires score++ in a Check for Hits part?
This 38 message thread spans 2 pages: 38
Join The Conversation
- Register For Free! - Become a Pro Member!
- See forum categories - Enter the Forum
Moderators and Top Contributors
- Moderator List | Top Contributors:This Week, This Month, Aug, Jul, Archive, Top 100 All Time, Top Voted Members
Hot Threads This Week
