Collisions between Canvas's

Question

Yes, I know there are posts on this, I have read through them and tried everything... I am making a 2 player game where one person draws a track using the arrow keys and the other avoids the edges of the track with the W and S keys. But no matter what I try, I can't get an output when the Player collides with the edge of the track. Thanks in advance, Justin!

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>

I don't see any collision detection in the code, so I'm assuming you are asking how one would go about creating such code. Without modifying your current code much, one way to detect a collision is to look at the color on the x,y point where player two will be moving to and if it's a color different from what player one drew then it's a collision. — alfredo, Apr 10 '17 at 23:55
How would I go about doing this? Is there a way to check if a black pixel has turned to blue? — Justin Luce, Apr 11 '17 at 13:31
I have never done that myself, but there is a Stackoverflow answer that may help you: http://stackoverflow.com/questions/667045/getpixel-from-html-canvas — alfredo, Apr 11 '17 at 13:37

Collisions between Canvas's

0 Answers0