JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="320px" width="480px"></canvas>
<div id="player"></div>
<div id="powerUp"></div

CSS

#canvas {
    position: absolute;
    border: 2px solid black;
}
#player {
    z-index: 3;
    position: absolute;
    background: black;
    left: 30px;
    top: 76px;
    height: 30px;
    width: 20px;
}
#powerUp {
    position: absolute;
    background: gray;
    height: 20px;
    width: 20px;
    left: 150px;
    top: 82px;
}

JavaScript

// CANVAS
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
loadGame(); // loads function
loadCollision();
function loadCollision() {
    var colArray = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];
    var posiX = 0;
    var posiY = 0;
    
    for (var x = 0; x < colArray.length; x++) {
        for (var y = 0; y < colArray[x].length; y++) {
            if (colArray[i][j] === 0) {                
            }
            if (colArray[i][j] == 1) {
                  $('#player').stop();
            }
            
            posX += 32;
        }
        posiX = 0;
        posiY += 32;
    }
}

function loadGame() {
    var mapArray = [
        [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];
    // Loads the Images
    var red = new Image();
    var blue = new Image();
    red.src = 'http://upload.wikimedia.org/wikipedia/commons/4/43/Red_flag.svg';
    blue.src = 'http://www.ledr.com/colours/blue.jpg';
    var posX = 0;
    var posY =...