i making pong-like game, control both paddels keep ball bouncing of walls.
went pretty until got point of collision detection.
i got working when paddles have no space wall, better want keep distance of 20px between them , canvas border.
here code:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title> pong game </title> <style> * { padding: 0; margin: 10; } canvas { background:#94adee ; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="maincanvas" width="800" height="600" /> <script> var canvas = document.getelementbyid("maincanvas"); var ctx = canvas.getcontext("2d"); /* paddle */ var paddleheight = 100; var paddlewidth = 10; var paddley = (canvas.height-paddleheight)/2; /* paddle movement */ var uppressed = false; var downpressed = false; /* ball */ var ballradius = 15; var xball = canvas.width/2; var yball = canvas.height/2; /* ball movement */ var dxball = 3.5; var dyball = 3.5; var score = 0; function drawball (){ ctx.beginpath(); ctx.arc(xball,yball, ballradius, 0,math.pi*2); ctx.fillstyle = "#2c3347"; ctx.fill(); ctx.closepath(); } function drawpaddleone(){ ctx.beginpath(); ctx.rect(0, paddley,paddlewidth,paddleheight); ctx.fillstyle = "#2c3347" ctx.fill(); ctx.closepath(); } function drawpaddletwo(){ ctx.beginpath(); ctx.rect(canvas.width-10,paddley,paddlewidth,paddleheight); ctx.fillstyle = "#2c3347"; ctx.fill(); ctx.closepath(); } function draw(){ ctx.clearrect(0,0, canvas.width, canvas.height); drawpaddleone(); drawpaddletwo(); drawball(); xball += dxball; yball += dyball; ctx.font = "20px cursive"; ctx.textalign = "center"; ctx.filltext("score: " + score, canvas.width/2,canvas.height-550); if(xball + dxball > canvas.width || xball + dxball < ballradius){ if(yball > paddley && yball < paddley + paddleheight){ dxball = -dxball; score++; if(dxball < 0 ){ dxball = dxball - 0.5; } else { dxball = dxball + 0.5; } if(dyball < 0 ){ dyball = dyball - 0.5; } else { dyball = dyball + 0.5; } } else{ alert("game over! "); document.location.reload(); } } if(yball + dyball > canvas.height || yball + dyball < ballradius){ dyball = -dyball; } if(uppressed && paddley > 0){ paddley = paddley - 5; } if(downpressed && paddley < canvas.height-paddleheight){ paddley = paddley + 5; } } document.addeventlistener("keydown", keydownhandlerone, false); document.addeventlistener("keyup", keyuphandlerone, false); function keydownhandlerone (x){ if(x.keycode == 38){ uppressed = true; } else if(x.keycode == 40){ downpressed = true; } } function keyuphandlerone (x){ if(x.keycode == 38){ uppressed = false; } else if(x.keycode == 40){ downpressed = false; } } setinterval(draw, 10); </script> </body> </html> because paddles on fixed x-axis positions, tried check collison of canvas.width. xball < canvas.width-10 && xball > canvas.width-30 (example right paddle). viable approach?
jsfiddle : https://jsfiddle.net/14cbyr5n/
i have created simple mathematics class can used check if point or rect collides rect (rectangle).
here mathematics class
// maths function mathematics() { } mathematics.prototype.pointinrect = function(pnt_x, pnt_y, rect_x, rect_y, rect_w, rect_h) { if ( (pnt_x >= rect_x) && (pnt_x <= rect_x + rect_w - 1) ) { if ( (pnt_y >= rect_y) && (pnt_y <= rect_y + rect_h - 1) ) {return true;} } return false; } mathematics.prototype.recttorectcollision = function(rect1_x, rect1_y, rect1_w, rect1_h, rect2_x, rect2_y, rect2_w, rect2_h) { // top-left corner if ( this.pointinrect(rect1_x, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;} // top-right corner if ( this.pointinrect(rect1_x + rect1_w - 1, rect1_y, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;} // bottom-right corner if ( this.pointinrect(rect1_x + rect1_w - 1, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;} // bottom-left corner if ( this.pointinrect(rect1_x, rect1_y + rect1_h - 1, rect2_x, rect2_y, rect2_w, rect2_h) ){return true;} // check see if rectangle 2 hit part of rectanlge 1 // top-left corner if ( this.pointinrect(rect2_x, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;} // top-right corner if ( this.pointinrect(rect2_x + rect2_w - 1, rect2_y, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;} // bottom-right corner if ( this.pointinrect(rect2_x + rect2_w - 1, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;} // bottom-left corner if ( this.pointinrect(rect2_x, rect2_y + rect2_h - 1, rect1_x, rect1_y, rect1_w, rect1_h) ){return true;} // if there no collision return false; } var mathematics = new mathematics(); and here code used in draw function @ end
// check if ball has hit paddle if(mathematics.recttorectcollision( paddlex, paddley, paddlewidth,paddleheight, xball, yball, ballradius, ballradius)) { dxball = dxball * -1; } also honest should create new function called collisionchecking should called before moves. code have provided should out
Comments
Post a Comment