html - creating game with javascript error in a nested array -
i trying create game javascript doesn't works. in developers tools error following: "uncaught typeerror: cannot read property 'x' of undefined". suppose error involve nested array "circles".
this code:
<!doctype html> <html> <head> <title>canvas tutorial</title> <script type="text/javascript"> window.onload = draw; var circles = [{x:200,y:150,r:40,direction:1,speedx:1,speedy:2},{x:200,y:150,r:70,direction:1,speedx:2,speedy:1}]; (var i=0; i<circles.length; i++) { function bottomright() { circles[i].x += circles[i].speedx; circles[i].y += circles[i].speedy; } function upleft() { circles[i].x -= circles[i].speedx; circles[i].y -= circles[i].speedy; } function upright() { circles[i].x += circles[i].speedx; circles[i].y -= circles[i].speedy; } function bottomleft() { circles[i].x -= circles[i].speedx; circles[i].y += circles[i].speedy; } function draw() { var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ctx.fillstyle = "black"; ctx.fillrect(0,0,400,300); ctx.fillstyle = "yellow"; ctx.beginpath(); ctx.arc(circles[i].x,circles[i].y,circles[i].r,0,math.pi*2,false); ctx.fill(); if((circles[i].y > 300 - circles[i].r) && circles[i].direction ===1){ circles[i].direction = 2; } else if((circles[i].x > 400 - circles[i].r) && (circles[i].direction===2)) { circles[i].direction = 3; } else if ((circles[i].y > 300 - circles[i].r) && (circles[i].direction===4)) { circles[i].direction = 3; } else if ((circles[i].y <= circles[i].r) && circles[i].direction === 3) { circles[i].direction = 4; } else if ((circles[i].x < circles[i].r) && circles[i].direction === 4){ circles[i].direction = 1; } else if ((circles[i].y < circles[i].r) && circles[i].direction === 2) { circles[i].direction = 1; } if (circles[i].direction === 1) { bottomright(); } else if (circles[i].direction === 2) { upright(); } else if (circles[i].direction === 3) { upleft(); } else { bottomleft(); } } settimeout(draw, 10); } </script> </head> <body> <canvas id="canvas" width="400" height="300"></canvas> </body> </html> how can fix code?
this kind of attempt of working version without optimizing.
i moved function outside of loop , direction function inside of draw.
function draw() { function bottomright() { circles[i].x += circles[i].speedx; circles[i].y += circles[i].speedy; } function upleft() { circles[i].x -= circles[i].speedx; circles[i].y -= circles[i].speedy; } function upright() { circles[i].x += circles[i].speedx; circles[i].y -= circles[i].speedy; } function bottomleft() { circles[i].x -= circles[i].speedx; circles[i].y += circles[i].speedy; } var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ctx.fillstyle = "black"; ctx.fillrect(0, 0, 400, 300); ctx.fillstyle = "yellow"; ctx.beginpath(); (var = 0; < circles.length; i++) { ctx.arc(circles[i].x, circles[i].y, circles[i].r, 0, math.pi * 2, false); ctx.fill(); if ((circles[i].y > 300 - circles[i].r) && circles[i].direction === 1) { circles[i].direction = 2; } else if ((circles[i].x > 400 - circles[i].r) && (circles[i].direction === 2)) { circles[i].direction = 3; } else if ((circles[i].y > 300 - circles[i].r) && (circles[i].direction === 4)) { circles[i].direction = 3; } else if ((circles[i].y <= circles[i].r) && circles[i].direction === 3) { circles[i].direction = 4; } else if ((circles[i].x < circles[i].r) && circles[i].direction === 4) { circles[i].direction = 1; } else if ((circles[i].y < circles[i].r) && circles[i].direction === 2) { circles[i].direction = 1; } if (circles[i].direction === 1) { bottomright(); } else if (circles[i].direction === 2) { upright(); } else if (circles[i].direction === 3) { upleft(); } else { bottomleft(); } } } var circles = [{ x: 200, y: 150, r: 40, direction: 1, speedx: 1, speedy: 2 }, { x: 200, y: 150, r: 70, direction: 1, speedx: 2, speedy: 1 }]; settimeout(draw, 10);<canvas id="canvas" width="400" height="300"></canvas>
Comments
Post a Comment