我正在做一个类似Pong的游戏，你可以控制两个paddels以保持球的弹跳。
在我到达碰撞点之前，一切都很顺利。
当桨叶没有距离墙壁的空间时，我才能使它工作，但为了更好看，我希望它们和画布边界保持20px的距离。
这是我的代码：
CREATE TABLE foo ( userID INT PRIMARY KEY, trasaction_history BLOB);由于拨片处于固定的x轴位置，我试图在<!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>
的帮助下检查碰撞。
像canvas.width这样的东西（右边桨的例子）。
这是一种可行的方法吗？
答案 0 :(得分：0)
jsFiddle：https://jsfiddle.net/14cbyr5n/
我创建了一个简单的数学类，可以用来检查一个点或一个矩形是否与一个矩形（Rectangle）碰撞。
这是数学课
// 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 to see if rectangle 2 is hit any 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 is no collision
return false;
}
var mathematics = new Mathematics();
以下是最后的绘图功能中使用的代码
// Check if ball has hit a paddle
if(mathematics.RectToRectCollision(
paddleX, paddleY, paddleWidth,paddleHeight,
xBall, yBall, ballRadius, ballRadius))
{
dxBall = dxBall * -1;
}
另外说实话，你应该创建一个名为collisionChecking之类的新函数，应该在任何移动之前调用它。但是我提供的代码应该可以帮助你