0
所以基本上我做出這樣的決定，當屏幕上的兩個字符觸摸，並有人按下按鈕，它會帶走他們的健康。我不知道如何做的唯一的事情是如何檢測他們什麼時候觸摸。如何做像素完美的碰撞檢測兩個部分透明的圖像
$(document).ready(function(){
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
canvas.width = 1000;
canvas.height = 600;
document.body.appendChild(canvas);
var kGroundHeight = 500;
/*var upKey = 38;
var downKey = 40;
var leftKey = 37;
var rightKey = 39;
*/
var render = function() {
gravity();
gravity1();
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(0,kGroundHeight,canvas.width,10);
context.drawImage(kirby, kirbyObject.x, kirbyObject.y);
context.drawImage(link, linkObject.x, linkObject.y);
};
var main = function() {
render();
window.requestAnimationFrame(main);
};
main();
});
var linkReady = false;
var link = new Image();
link.onLoad = function() {
linkReady = true;
};
linkObject = {};
link.src= "https://vignette1.wikia.nocookie.net/zelda/images/1/18/Link_(Sprite)_The_Legend_of_Zelda.png/revision/latest?cb=20130117162823";
linkObject.x = 200;
linkObject.y = 200;
var keys = {};
$(document).keydown(function(e) {
console.log(e);
move1(e.keyCode);
if (keys[87] && keys[65]) {
linkObject.y -=50;
linkObject.x -=50;
}else if(keys[87] && keys[68]){
linkObject.y -=50;
linkObject.x +=50;
}else if(keys[83] && keys[68]){
linkObject.y +=50;
linkObject.x +=50;
}else if(keys[83] && keys[65]){
linkObject.y +=50;
linkObject.x -=50;
}
keys[e.keyCode] = true;
}).keyup(function(e) {
keys[e.keyCode] = false;
});
var upKey1 = 87;
var downKey1 = 83;
var leftKey1 = 65;
var rightKey1 = 68;
var attackKey1 = 75;
var move1 = function(key) {
if (key == upKey1) {
linkObject.y -= 50;
}else if(key == downKey1){
var kGroundHeight = 500;
if(linkObject.y + link.height == kGroundHeight){
linkObject.y +=0;
}else{
linkObject.y +=50;
}
//console.log("down");
console.log(linkObject.y);
}else if(key == leftKey1){
linkObject.x -=50;
}else if(key == rightKey1){
linkObject.x +=50;
}
// MORE DIRECTIONS!!!
};
var gravity1 = function() {
var kGravityScale = 1;
var kGroundHeight = 500;
if (linkObject.y + link.height == kGroundHeight) {
linkObject.y += 0;
}else{
linkObject.y += kGravityScale;
//console.log(link.width);
}
};
var attack = function(a){
};
var kGroundHeight = 500;
var keys = {};
$(document).keydown(function(e) {
console.log(e);
move(e.keyCode);
if (keys[38] && keys[37]) {
kirbyObject.y -=50;
kirbyObject.x -=50;
}else if(keys[38] && keys[39]){
kirbyObject.y -=50;
kirbyObject.x +=50;
}else if(keys[40] && keys[39]){
kirbyObject.y +=50;
kirbyObject.x +=50;
}else if(keys[40] && keys[37]){
kirbyObject.y +=50;
kirbyObject.x -=50;
}
keys[e.keyCode] = true;
}).keyup(function(e) {
keys[e.keyCode] = false;
});
var kirbyReady = false;
var kirby = new Image();
kirby.onLoad = function() {
kirbyReady = true;
};
kirbyObject = {};
kirby.src = "https://vignette3.wikia.nocookie.net/spritechronicles/images/5/5c/Kirby.png/revision/latest?cb=20101010225540";
kirbyObject.x = 300;
kirbyObject.y = 100;
var upKey = 38;
var downKey = 40;
var leftKey = 37;
var rightKey = 39;
var attackKey = 32;
var move = function(key) {
if (key == upKey) {
kirbyObject.y -= 50;
}else if(key == downKey){
var kGroundHeight = 500;
if(kirbyObject.y + kirby.height == kGroundHeight){
kirbyObject.y +=0;
}else{
kirbyObject.y +=50;
}
//console.log("down");
console.log(kirbyObject.y);
}else if(key == leftKey){
kirbyObject.x -=50;
}else if(key == rightKey){
kirbyObject.x +=50;
}
// MORE DIRECTIONS!!!
};
var gravity = function() {
var kGravityScale = 1;
var kGroundHeight = 500;
if (kirbyObject.y + kirby.height == kGroundHeight) {
kirbyObject.y += 0;
}else{
kirbyObject.y += kGravityScale;
}
};
它們是正方形/長方形的字符，還是需要檢查不規則形狀的重疊？ – Archer
[Javascript碰撞檢測]的可能重複（http://stackoverflow.com/questions/7047928/javascript-collision-detection） –
其他人也問過類似的問題[here]（http://stackoverflow.com/questions/4871669/碰撞檢測在JavaScript的遊戲？rq = 1），[這裏]（http://stackoverflow.com/questions/7047928/javascript-collision-detection?rq=1），和[這裏]（http：///stackoverflow.com/questions/2440377/javascript-collision-detection）。這應該讓你開始。 –