javascript - How can I add 2d collision to the bottom of the obstacles in my game? -
the square ball bounce off top of obstacles goes straight through them if comes bottom. can add collision detection code allow check collisions bottom. in advance. code:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>paddle game</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <h1>instructions</h1> <p>hit square paddle @ bottom of screen. have 5 lives. if hit square gain 1 point if miss loose 1 life. if lives fall below 0 loose , game restarts. score 10 points win.</p> <canvas id="mycanvas" width="1000" height="800"></canvas> <script> var canvas; //this variable use reference canvas object var ctx; //a variable hold value of context //square ball var rectx = 100;//rect x pos var recty = 200;//rect y pos var rectwidth = 25;//width var rectheight = 25;//height var rectspeedx = 10; var rectspeedy = 10; //paddle var rectx2 = 400;//rect x pos var recty2 = 790;//rect y pos var rectwidth2 = 100;//width var rectheight2 = 20;//height //obstruction var rectx3 = 500; var recty3 = 600; var rectwidth3 = 300; var rectheight3 = 25; //obstruction var rectx4 = 200; var recty4 = 300; var rectwidth4 = 300; var rectheight4 = 25; var score = 0; var lives = 5; const width = 1000; //width of canvas const height = 800; //height of canvas function mousemove(event){ rectx2 = rectx2 = event.pagex-((document.body.clientwidth-width)/2+ (rectwidth2/2)); } document.addeventlistener("mousemove", mousemove); window.onload = function () { canvas = document.getelementbyid("mycanvas"); ctx = canvas.getcontext('2d'); var framespersecond = 30; //fps setinterval(function(){ draweverything();//calling rect function 30 fps movement(); gamereset(); wincondition(); }, 1000/framespersecond); //calls move , draw function using inline function. 30 fps 1000/30 } function draweverything(){ ctx.fillstyle = 'red' //draws white background every frame covering square ctx.fillrect(0,0,width, height); //background ctx.fillstyle = 'black' ctx.fillrect(rectx, recty, rectwidth, rectheight); //redraws recntangle each frame gives illusion of movement. moving square ctx.fillrect(rectx2, recty2, rectwidth2, rectheight2); //paddle ctx.fillrect(rectx3, recty3, rectwidth3, rectheight3); //obstruction ctx.fillrect(rectx4, recty4, rectwidth4, rectheight4) //obstruction ctx.filltext("score", 100,50); ctx.filltext(score, 100,100); //score count ctx.filltext("lives", 900,50); ctx.filltext(lives, 900,100); //life count } function movement(){ rectx += rectspeedx; recty += rectspeedy; if (rectx > width-12.5|| rectx < 0){ rectspeedx = -rectspeedx; } if (recty > height-12.5 || recty < 0){ rectspeedy = -rectspeedy; } //console.log(rectx2); if(rectx < rectx2 + rectwidth2 && rectx + rectwidth > rectx2 && recty < recty2 + rectheight2 && rectheight + recty > recty2){ //console.log("hi") score += 1 //rectspeedx++ //rectspeedy++ var deltay = recty -(recty+rectheight2/2); rectspeedy = deltay * 2; } else if(recty > height-12.5){ //console.log('bye'); lives -=1 } if(rectx < rectx3 + rectwidth3 && rectx + rectwidth > rectx3 && recty < recty3 + rectheight3 && rectheight + recty > recty3){ var deltay = recty -(recty+rectheight3/2); rectspeedy = deltay * 2; } if(rectx < rectx4 + rectwidth4 && rectx + rectwidth > rectx4 && recty < recty4 + rectheight4 && rectheight + recty > recty4){ var deltay = recty -(recty+rectheight4/2); rectspeedy = deltay * 2; } } function gamereset(){ if(lives < 0){ alert("game over. click ok restart. remember not let lives fall below 0"); location.reload(); } } function wincondition(){ if(score >= 10){ alert("congratulations won! hit 'ok' restart game."); location.reload(); } } //if(rectx < rectx2 + rectwidth2 && rectx + rectwidth > rectx2 && recty < recty2 + rectheight2 && rectheight + recty > recty2) </script> </body> </html> also if tell me think program appreciate more of beginner.
i have taken @ code...
you have made start on game here, there couple of things think should improve before taking further. main being need go through work , try rewrite using objects...
if take @ similar html canvas bouncing ball thing made here, think learn lot code. can see source project on github http://github.com/roadkillcat/ultibouncingball.
if pm me, can write have far more succinctly , make easier read. however, atm code messy make sense of , needs cleaning up. happy if want.
here ideas take game further:
- make ball circle
arcmethod - stop paddle being able move off screen
- random positioning of obstacles (rect3 + rect4) , of ball
Comments
Post a Comment