Question: Im trying to run this game in html using javascript. the image loads using gamecanvas. but doesn't play. Can you see what might be the
Im trying to run this game in html using javascript. the image loads using gamecanvas. but doesn't play. Can you see what might be the issue? const canvas document.getElementByIdgameCanvas;
const ctx canvas.getContextd;
Define image URLs
const SPACE new Image;
SPACE.src "imgsspacejpg;
SPACE.onload
canvas.width SPACE.width;
canvas.height SPACE.height;
draw;
;
const TRACK new Image;
TRACK.src "imgstrackpng;
const FINISH new Image;
FINISH.src "imgsfinishpng;
const GREENROCKET new Image;
GREENROCKET.src "imgsgreenrocket.png;
const ORANGEROCKET new Image;
ORANGEROCKET.src "imgsorangerocket.png;
const MAINFONT px sansserif";
Game logic variables
const gameInfo
level:
getLevelTime
Your logic to get the level time
return ; Example time
;
const playerCar
x:
y:
angle:
vel:
image: GREENROCKET,
drawctx
ctxsave;
ctxtranslatethisx this.y;
ctxrotatethisangle;
ctxdrawImagethisimage, this.image.width this.image.height ;
ctxrestore;
;
const computerCar
x:
y:
angle:
vel:
image: ORANGEROCKET,
drawctx
ctxsave;
ctxtranslatethisx this.y;
ctxrotatethisangle;
ctxdrawImagethisimage, this.image.width this.image.height ;
ctxrestore;
;
Define utility functions
function draw
ctxdrawImageSPACE;
ctxdrawImageTRACK;
ctxdrawImageFINISH;
const levelText Level $gameInfolevel;
ctxfont MAINFONT;
ctxfillStyle "white";
ctxtextAlign 'center';
ctxfillTextlevelText canvas.height ;
const timeText Time: $gameInfogetLevelTimes;
ctxfillTexttimeText canvas.height ;
const velText Vel: $playerCarvel.toFixedpxs;
ctxfillTextvelText canvas.height ;
Draw player car with rotation
playerCar.drawctx;
Draw computer car with rotation
computerCar.drawctx;
requestAnimationFramedraw;
Start the game loop
draw;
Step by Step Solution
There are 3 Steps involved in it
1 Expert Approved Answer
Step: 1 Unlock
Question Has Been Solved by an Expert!
Get step-by-step solutions from verified subject matter experts
Step: 2 Unlock
Step: 3 Unlock
