【发布时间】：2016-05-30 14:42:41
【问题描述】：
我正在为我的学校数字评估创建一个网站，并且需要帮助我的 JavaScript 游戏，该游戏被编码在 <canvas> 元素中。所以几乎我已经让这个小无人机被“前进”、“左”、“右”和“后退”按钮控制来移动无人机，因为我的背景是一个平面的 2d 图像，上面有墙壁我'我们制作了 100% 透明的盒子，并将它们放置在墙壁区域以模仿那里的墙壁。
我只是在 IF 语句中找不到任何帮助，其中无人机触摸了隐形框，它把它放回 43X 110Y...如果您认为可以提供帮助，代码如下！ :)
（MyGamePiece 是无人机，myHitBox 是隐形图像。）
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myBackground;
var myHitBox;
var myHitBox1;
var myHitBox2;
var myHitBox3;
var myHitBox4;
var myHitBox5;
function startGame() {
myGamePiece = new component(50, 50, "img/forward.gif", 43, 110, "image");
myHitBox = new component(275, 20, "img/hitbox.png", 250, 169, "image");
myHitBox1 = new component(30, 100, "img/hitbox.png", 250, 170, "image");
myHitBox2 = new component(280, 25, "img/hitbox.png", 0, 80, "image");
myHitBox3 = new component(30, 100, "img/hitbox.png", 120, 80, "image");
myHitBox4 = new component(145, 25, "img/hitbox.png", 375, 80, "image");
myHitBox5 = new component(30, 100, "img/hitbox.png", 375, 0, "image");
myBackground = new component(650, 270, "img/MAP.jpg", 0, 0, "image");
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 650;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
myHitBox.newPos();
myHitBox.update();
myHitBox1.newPos();
myHitBox1.update();
myHitBox2.newPos();
myHitBox2.update();
myHitBox3.newPos();
myHitBox3.update();
myHitBox4.newPos();
myHitBox4.update();
myHitBox5.newPos();
myHitBox5.update();
}
function move(dir1) {
if (dir1 == "down") {myGamePiece.speedY = 5; myGamePiece.image.src = "img/forward.gif";}
else if (dir1 == "up") {myGamePiece.speedY = -5; myGamePiece.image.src = "img/back.gif";}
else if (dir1 == "right") {myGamePiece.speedX = 5; myGamePiece.image.src = "img/right.gif";}
else if (dir1 == "left") {myGamePiece.speedX = -5; myGamePiece.image.src = "img/left.gif";}
}
function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
<button onmousedown="move('up')" onmouseup="clearmove()" ontouchstart="move('up')">UP</button><br><br>
<button onmousedown="move('left')" onmouseup="clearmove()" ontouchstart="move('left')">LEFT</button>
<button onmousedown="move('right')" onmouseup="clearmove()" ontouchstart="move('right')">RIGHT</button><br><br>
<button onmousedown="move('down')" onmouseup="clearmove()" ontouchstart="move('down')">DOWN</button>
</div>
【问题讨论】：
-
你能发布你的碰撞检测代码吗？
-
@Taylor : 你能为此提供小提琴吗？
-
另一种解决方案（因为手动放置碰撞箱肯定很痛苦）：根据游戏的外观，您可以检查背景像素颜色并检查它是否以这种方式碰撞。这样，您只需更改背景图像即可更改地图。
-
图像不喜欢 JS 小提琴...但我喜欢 @DBS 的想法你知道如何为 JS 进行检测以了解无人机图像是否接触到
GREEN灌木? -
请给我们至少图片的链接。
标签： javascript canvas positioning