Html5 canvas 无法在球到地板阵列上获取碰撞检测？
我似乎无法让碰撞检测与地板阵列一起工作？我似乎在Html5 canvas 无法在球到地板阵列上获取碰撞检测？,html5-canvas,Html5 Canvas,我似乎无法让碰撞检测与地板阵列一起工作？我似乎在ballMovement功能中遇到了问题。 球直接从阵列形成的矩形中落下 地面阵列（问题） 碰撞检测 重力 var帆布、ctx、集装箱； canvas=document.createElement（'canvas'）； ctx=canvas.getContext（“2d”）； var球； var message=“Helloworld”； //速度x var vx=2.0； //速度y-随机集 变量vy； var重力=0.5； var反弹=0.
ballMovement球直接从阵列形成的矩形中落下
重力
var帆布、ctx、集装箱；
canvas=document.createElement（'canvas'）；
ctx=canvas.getContext（“2d”）；
var球；
var message=“Helloworld”；
//速度x
var vx=2.0；
//速度y-随机集
变量vy；
var重力=0.5；
var反弹=0.7；
var xFriction=0.1；
//地板阵列
var floor=新数组（）；
//直肠
矩形=函数（x、y、w、h、颜色）{
如果（x==null | | y==null | | w==null | | h==null）{
警报（“您必须传入一个矩形范围的所有变量：（x，y，width，height）”；
var errorMsg=“未提供以下内容：”；
如果（x==null）
errorMsg+=“'x'”；
如果（y==null）
errorMsg+=“'y'”；
如果（w==null）
errorMsg+=“‘宽度’”；
if（h==null）
errorMsg+=“‘高度’”；
警报（errorMsg）；
抛出新错误（errorMsg）；
}
这个.x=x；
这个。y=y；
这个宽度=w；
这个高度=h；
this.color=新颜色（）；
this.Contains=函数（x，y）{
如果（x>=this.x&&x=this.y&&y canvas.width | | ball.x-ball.radius<0）{
vx*=-1；
}
//球打在帆布地板上
如果（ball.y+ball.radius>canvas.height）{//||
//在基地上重新定位
ball.y=canvas.height-ball.radius；
//弹起球
vy*=-反弹；
//否则，球永远不会停止反弹
如果（vy-2.1）
vy=0；
//否则，球永远不会停在xaxis上
if（数学abs（vx）地板宽度）{//||
//在基地上重新定位
ball.y=地板高度-ball.radius；
//弹起球
vy*=-反弹；
//否则，球永远不会停止反弹
如果（vy-2.1）
vy=0；
//否则，球永远不会停在xaxis上
if（数学abs（vx）0）
vx=vx-摩擦；
如果（vx有几个错误：
将Y轴上的球位置ball.Y
与条形宽度floor.width
进行比较，可能是打字/编辑错误
您应该将floor.width
替换为floor.y
，以检查球落下时是否击中杆
但是地板
是一个由矩形
组成的数组，如果我猜对的话，它包括了横杆和可能要打碎的砖块。因此，在检查之前，您需要在地板
中循环，否则地板。高度
等于未定义的
for（设i=0；i矩形y）{
// ...
}
}
那么，floor
不是一个不包含任何“floor”的数组的合适名称
最后，添加一个条件来处理球的X位置（与杆、砖等的碰撞）
工作示例：
祝您愉快您可以使用stackoverflow的代码片段功能发布您的问题，这对每个人来说都会容易得多。
<html lang=en>
<head>
<meta charset=utf-8>
<title>Javascript gravity</title>
<link rel="stylesheet" href="game.css">
</head>
<body onload="init()">
<script>
var canvas, ctx, container;
canvas = document.createElement( 'canvas' );
ctx = canvas.getContext("2d");
var ball;
var message = "Helloworld";
// Velocity x
var vx = 2.0;
// Velocity y - randomly set
var vy;
var gravity = 0.5;
var bounce = 0.7;
var xFriction = 0.1;
// Floor Array
var floor = new Array();
//Rectagles
Rectangle = function(x, y, w, h, color){
if (x == null || y == null || w == null || h == null){
alert("You must pass in all the veriables for a rectange: (x, y, width, height)");
var errorMsg = "The following are not provided:";
if (x == null)
errorMsg += " 'x' ";
if (y == null)
errorMsg += " 'y' ";
if (w == null)
errorMsg += " 'width' ";
if (h == null)
errorMsg += " 'height'";
alert(errorMsg);
throw new Error(errorMsg);
}
this.x = x;
this.y = y;
this.width = w;
this.height = h;
this.color = new Color();
this.Contains = function(x, y){
if (x >= this.x && x <= this.x + this.width &&
y >= this.y && y <= this.y + this.height)
return true;
else
return false;
};
this.Draw = function(ctx){
ctx.fillStyle = this.color.ToStandard();
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
//Rectangle Colors
Color = function(r, g, b, a){
this.r = 255;
this.g = 255;
this.b = 255;
this.a = 1;
if (r != null)
this.r = r;
if (g != null)
this.g = g;
if (b != null)
this.b = b;
if (a != null)
this.a = a;
this.ToStandard = function(noAlpha){
if (noAlpha == null || !noAlpha)
return "rgba(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")";
else
return "rgb(" + this.r + "," + this.g + "," + this.b + ")";
};
};
function init(){
setupCanvas();
vy = (Math.random() * -5) + -5;
ball = {x:canvas.width / 2, y:100, radius:10, status: 0, color:"red"};
floor.push(new Rectangle(0, 480, 500, 20));
floor.push(new Rectangle(250, 350, 200, 20));
//floor.push(new Rectangle(150, 300, 20, 20));
//floor.push(new Rectangle(200, 250, 20, 20));
//floor.push(new Rectangle(250, 200, 20, 20));
//floor.push(new Rectangle(300, 150, 20, 20));
//floor.push(new Rectangle(350, 100, 20, 20));
//floor.push(new Rectangle(400, 50, 20, 20));
for (var i = 0; i < floor.length; i++)floor[i].color = new Color(0, 0, 0, 1);
}//end init method
function draw() {
ctx.clearRect(0,0,canvas.width, canvas.height);
for (var i = 0; i < floor.length; i++)
floor[i].Draw(ctx);
//display some text
ctx.fillStyle = "red";
ctx.font = "20px Arial";
ctx.fillText(message, 20,20);
//draw cirlce
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, false);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath();
ballMovement();
}
setInterval(draw, 1000/35);
function ballMovement(){
ball.x += vx;
ball.y += vy;
vy += gravity;
//If either wall is hit, change direction on x axis
if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0){
vx *= -1;
}
// Ball hits the canvas floor
if (ball.y + ball.radius > canvas.height){// ||
// Re-positioning on the base
ball.y = canvas.height - ball.radius;
//bounce the ball
vy *= -bounce;
//do this otherwise, ball never stops bouncing
if(vy<0 && vy>-2.1)
vy=0;
//do this otherwise ball never stops on xaxis
if(Math.abs(vx)<1.1)
vx=0;
xF();
}
// Ball hits the rectangles
if (ball.y + ball.radius > floor.width){// ||
// Re-positioning on the base
ball.y = floor.height - ball.radius;
//bounce the ball
vy *= -bounce;
//do this otherwise, ball never stops bouncing
if(vy<0 && vy>-2.1)
vy=0;
//do this otherwise ball never stops on xaxis
if(Math.abs(vx)<1.1)
vx=0;
xF();
}
}
function xF(){
if(vx>0)
vx = vx - xFriction;
if(vx<0)
vx = vx + xFriction;
}
function setupCanvas() {//setup canvas
container = document.createElement( 'div' );
container.className = "container";
canvas.width = 500;
canvas.height = 500;
document.body.appendChild( container );
container.appendChild(canvas);
ctx.strokeStyle = "red";
ctx.lineWidth =1;
}
</script>
</body>
</html>
for (let i = 0; i < floor.length; i += 1) {
const rect = floor[i];
// Ball hits the rectangle
if (ball.y + ball.radius > rect.y) {
// ...
}
}