JSFiddle - React, Tailwind, and code Playground

by happysmiles

HTML

<canvas id="gameCanvas" width="320" height="640"></canvas>
<div>
    <button id="down">Down</button>
    <button id="up">Up</button>
    <button id="left">Left</button>
    <button id="right">Right</button>
    <button id="reset">RESET</button>
</div>

JavaScript

var rows = 20;
    var cols = 10;
    var index = [0, 0];
    //size of the blocks in image
    var size = 32;

    var canvas = document.getElementById('gameCanvas');
    var ctx = canvas.getContext('2d');
    var canvas_width = canvas.width;
    var canvas_height = canvas.height;

    function drawBoard() {
        var colors = ['#FFFFFF', '#000000'];
        var squares = colors;
        var square = 0;

        for (var row = 0; row < rows; row++) {
            for (var col = 0; col < cols; col++) {
                var x = col * size;
                var y = row * size;

                ctx.fillStyle = squares[square++ % colors.length];
                ctx.fillRect(x, y, size, size);
            }
            square += colors.length - 1;
        }
        //ctx.save();
    }
    var logo2 = new Image();
    logo2.src = 'http://hdwallphotos.com/wp-content/uploads/2014/02/Green-Background-Image-CSS-Wallpaper.png'

    function blocks() {
        logo2.onload = function () {
            ctx.drawImage(logo2, 0, 0, 32, 32);
            /*
            for (var row = 0; row < rows; row++) {
                for (var col = 0; col < 10; col++) {
                    var x = col;
                    var y = row;

                    ctx.drawImage(logo2, x, y, 23, 13);
                }

            }
            */
        };
    }

    function main() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.style.border = "1px solid #000";

        width = 320;
        height = 480;
        canvas.width = width;
        canvas.height = height;
        document.body.appendChild(canvas);
    }

    function moveBlockDown() {
        console.log('move down!');
        index[0];
        index[1]++;

        drawBlock();
    }

    function moveBlockUp() {
        console.log('move up!');
        index[0];
        index[1]--;

        drawBlock();

    }

    function moveBlockLeft() {
        console.log('move left!');
        index[0]--;
   ...