JSFiddle - React, Tailwind, and code Playground

by unsign3d

HTML

<canvas id="board" width="420" height="300"></canvas>

JavaScript

var board = document.getElementById("board");
document.body.onkeydown = pressedKey;
var ctx = board.getContext("2d");
var score = 0;
var ball_x = 13;
var ball_y = 9;
var dir_h = Math.random() < 0.5 ? -1 : 1;
var dir_v = Math.random() < 0.5 ? -1 : 1;
var player_y = 9;
var key_up = false;
var key_down = false;
var blocks = new Array(28);
for (var x = 0; x < 28; x++)
blocks[x] = new Array(20);
blocks[ball_x][ball_y] = true;
blocks[0][player_y - 1] = true;
blocks[0][player_y] = true;
blocks[0][player_y + 1] = true;

updateScreen();
loopGame();


function loopGame() {
    moveBall();
    movePlayer();
    setTimeout(loopGame, 150);
}

function updateScreen() {
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, 420, 300);
    drawblocks();
    setTimeout(updateScreen, 20);
}

function drawblocks() {
    ctx.fillStyle = "#FFFFFF";
    for (var x = 0; x < 28; x++)
    for (var y = 0; y < 20; y++)
    if (blocks[x][y]) ctx.fillRect((x * 15), (y * 15), 15, 15);
}

function moveBall() {
    if (ball_x === 1 && blocks[ball_x - 1][ball_y]) {
        dir_h = 1;
        score++;
    } else if (ball_x <= 0) {
        alert("Game Over!!!! Score: " + score);
        location.reload();
    } else if (ball_x >= 27) dir_h = -1;
    if (ball_y <= 0) dir_v = 1;
    else if (ball_y >= 19) dir_v = -1;
    blocks[ball_x][ball_y] = false;
    ball_x += (1 * dir_h);
    ball_y += (1 * dir_v);
    blocks[ball_x][ball_y] = true;
}

function movePlayer() {
    if (key_up && player_y > 1) {
        blocks[0][player_y - 2] = true;
        blocks[0][player_y + 1] = false;
        player_y--;
    } else if (key_down && player_y < 18) {
        blocks[0][player_y + 2] = true;
        blocks[0][player_y - 1] = false;
        player_y++;
    }
    key_down = false;
    key_up = false;
}

function pressedKey(e) {
    if (e.keyCode === 38) key_up = true;
    else if (e.keyCode === 40) key_down = true;
}

window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38,...