所以我一直在玩HTML canvas元素，我遇到了一个小问题。当玩家（1）落在玩家2上时，玩家2缩小然后降落在玩家（1）之上。我不确定这是怎么回事，并且四处寻求帮助，但似乎无法让它发挥作用。任何帮助表示赞赏：）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Battle</title>
<style>
#mycanvas {
outline: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="1280" height="750"></canvas>
<script type="text/javascript">
window.cancelRequestAnimFrame = ( function() { return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout })();
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
var gameLive = false;
var init;
var friction = 0.85;
var gravity = 2;
var Blue = 0;
var Orange = 0;
var keys = [];
var player = {
color: "#CBE86B",
x: 50,
y: 100,
width: 50,
height: 50,
velX: 0,
velY: 0,
speed: 12,
jumping: false,
grounded: false,
draw: function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var player2 = {
color: "#F2E9E1",
x: 1150,
y: 100,
width: 50,
height: 50,
velX: 0,
velY: 0,
speed: 12,
jumping: false,
grounded: false,
draw: function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
var background = {
color: "#1C140D",
width: canvas.width,
height: canvas.height,
draw: function() {
ctx.fillStyle = this.color;
ctx.fillRect(0,0,this.width, this.height);
}
}
function update() {
init = requestAnimationFrame(update);
if (keys[68]) { // right
if (player.velX < player.speed) {
player.velX+=10;
}
}
if (keys[65]) { // left
if (player.velX > -player.speed) {
player.velX-= 10;
}
}
if (keys[87]) { // jump
if (!player.jumping && player.grounded) {
player.jumping = true;
player.grounded = false;
player.velY = -player.speed*4;
}
}
if (keys[37]) { // left arrow
if (player2.velX > -player2.speed) {
player2.velX -= 10;
}
}
if (keys[39]) {
if (player2.velX < player2.speed) {
player2.velX += 10;
}
}
if (keys[38]) {
if (!player2.jumping && player2.grounded) {
player2.jumping = true;
player2.grounded = false;
player2.velY = -player2.speed * 4;
}
}
if (keys[32]) {
}
// Can you handle the gravity of this code bit
player.velX *= friction;
player.velY += gravity;
player.x += player.velX;
player.y += player.velY;
player.grounded = false; // fix bounce off sides of platforms
player2.velX *= friction;
player2.velY += gravity;
player2.x += player2.velX;
player2.y += player2.velY;
player2.grounded = false; // fix bounce off sides of platforms
if(player.y > canvas.height -player.height){
player.y = canvas.height - player.height;
player.jumping = false;
player.grounded = true;
} else if (player.y <= 0 || player2.y <= 0) {
player.y = 0;
player.jumping = false;
player.grounded = true;
}
if (player2.y > canvas.height -player2.height){
player2.y = canvas.height - player2.height;
player2.jumping = false;
player2.grounded = true;
} else if (player2.y <= 0) {
player2.y = 0;
player2.jumping = false;
player2.grounded = true;
}
if (player.x >= canvas.width-player.width) {
player.x = canvas.width-player.width;
player.jumping = false;
player.grounded = false;
} else if (player.x <= 0) {
player.x = 0;
player.jumping = false;
player.grounded = false;
}
if (player2.x >= canvas.width - player2.width) {
player2.x = canvas.width-player.width;
player2.jumping = false;
player2.grounded = false;
} else if (player2.x <= 0) {
player2.x = 0;
player2.jumping = false;
player2.grounded = false;
}
var dur = colCheck(player2, player);
if (dur === "l") { //actually right
player.velX = 0;
player2.velX = 0;
} else if (dur === "r") { // actually left
player.velX = 0;
player2.velX = 0;
} else if (dur === "b") { // top
player.velY = 0;
player2.velY = 0;
} else if (dur === "t") { // bottom
player.velY = 0;
player2.velY = 0;
}
// Collision
function colCheck(shapeA, shapeB) {
// get the vectors to check against
var vX = (shapeA.x + (shapeA.width / 2)) - (shapeB.x + (shapeB.width / 2)),
vY = (shapeA.y + (shapeA.height / 2)) - (shapeB.y + (shapeB.height / 2)),
// add the half widths and half heights of the objects
hWidths = (shapeA.width / 2) + (shapeB.width / 2),
hHeights = (shapeA.height / 2) + (shapeB.height / 2),
colDir = null;
// if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision
if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) {
// figures out on which side we are colliding (top, bottom, left, or right)
var oX = hWidths - Math.abs(vX),
oY = hHeights - Math.abs(vY);
if (oX >= oY) {
if (vY > 0) {
colDir = "t";
shapeA.y += oY;
} else {
colDir = "b";
shapeA.y -= oY;
}
} else {
if (vX > 0) {
colDir = "l";
shapeA.x += oX;
} else {
colDir = "r";
shapeA.x -= oX;
}
}
}
return colDir;
}
// End Collision
//if (Blue === 10 || Orange === 10) {
// gameOver();
//}
canvas.width = canvas.width;
background.draw();
player2.draw();
player.draw();
function gameOver() {
cancelRequestAnimFrame(init);
}
}
update();
document.body.addEventListener("keydown", function (e) {
keys[e.keyCode] = true;
e.preventDefault();
});
document.body.addEventListener("keyup", function (e) {
keys[e.keyCode] = false;
e.preventDefault();
});
</script>
</body>
</html>