Canvas之间的碰撞

时间:2017-04-10 23:27:35

标签: javascript html canvas html5-canvas collision-detection

是的,我知道有关于此的帖子,我已经阅读了它们并尝试了所有内容......我正在制作一个2人游戏,其中一个人使用箭头键绘制轨道,另一个人避开轨道的边缘使用W和S键。但无论我尝试什么,当播放器与轨道边缘发生碰撞时,我都无法获得输出。在此先感谢,贾斯汀!

alert('Player One Ready? Press i for instructions!')
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
window.setInterval(function() {
    window.TempX = window.TempX - 1
    window.TempBottomY = window.PlayerTwoYBottomLength
    window.TempTopY = window.PlayerTwoYTopLength
}, 15);
//P2 Bottom and Top Varriables
window.PlayerTwoX = 1277
window.PlayerTwoYTopLength = 310
window.PlayerTwoYBottomLength = 310
window.TempX = 1277
window.TempTopY = 310
window.TempBottomY = 310
window.fourten = 410
window.PlayerOneX = 1240
window.PlayerOneY = 360
//CANVAS DECLARED
ctx.fillStyle = "#c2c4c2"; //Background Rectangle
ctx.fillRect(20, 20, 1280, 720);
window.setInterval(function() {
    ctx.fillStyle = "#000000"; //Player 2 Bottom
    ctx.fillRect(1277, 410, 3, window.PlayerTwoYBottomLength);
    ctx.fillStyle = "#000000"; //Player 2 Top
    ctx.fillRect(1277, 20, 3, window.PlayerTwoYTopLength);
    ctx.fillStyle = "White"; //Player 2 Bottom
    ctx.fillRect(1277, 410, 3, window.PlayerTwoYBottomLength);
    ctx.fillStyle = "White"; //Player 2 Top
    ctx.fillRect(1277, 20, 3, window.PlayerTwoYTopLength);
    ctx.fillStyle = "Black"; //Player 2 Bottom
    ctx.fillRect(window.TempX, window.fourten, 3, window.TempBottomY);
    ctx.fillStyle = "Black"; //Player 2 Top
    ctx.fillRect(window.TempX, 20, 3, window.TempTopY);
}, 15);
setTimeout(function Test() {
    window.setInterval(function Joe() {
        window.PlayerOneX = window.PlayerOneX - 0.8
    }, 15);
    alert('Player Two Ready?')
}, (20000));
setTimeout(function Testz() {
    window.setInterval(function Jeff() {
        ctx.fillStyle = "#42f4f4"; //Player 1
        ctx.fillRect(window.PlayerOneX, window.PlayerOneY, 20, 20);
    }, 3);
}, (20000));
//Y Axis Player 2
function DownPressed() {
    window.PlayerTwoYBottomLength = window.PlayerTwoYBottomLength - 2
    window.PlayerTwoYTopLength = window.PlayerTwoYTopLength + 2
    window.fourten = window.fourten + 2
}

function UpPressed() {
    window.PlayerTwoYBottomLength = window.PlayerTwoYBottomLength + 2
    window.PlayerTwoYTopLength = window.PlayerTwoYTopLength - 2
    window.fourten = window.fourten - 2
}

function WPressed() {
    window.PlayerOneY = window.PlayerOneY - 3
}

function SPressed() {
    window.PlayerOneY = window.PlayerOneY + 3
}

function iPressed() {
    window.open("instructions.html");
    location.reload();
}
//Check Keys
document.onkeydown = checkKey;

function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '38') {
        // up arrow
        console.log('Up')
        UpPressed()
    } else if (e.keyCode == '40') {
        // down arrow
        console.log('Down')
        DownPressed()
    } else if (e.keyCode == '37') {
        // left arrow
        console.log('Left')
    } else if (e.keyCode == '39') {
        // right arrow
        console.log('Right')
    }
    if (e.keyCode == '87') {
        // W Key
        console.log('W')
        WPressed()
    }
    if (e.keyCode == '83') {
        // S
        console.log('S')
        SPressed()
    }
    if (e.keyCode == '73') {
        // i
        console.log('i')
        iPressed()
    }
}
<canvas id="myCanvas" width="1280" height="720"> </canvas>

0 个答案:

没有答案