JSFiddle - React, Tailwind, and code Playground

by jmancodes521

HTML

<head>
  <title>Pong!</title>
  <audio id="hit"></audio>
  <audio id="win"></audio>
  <audio id="lose"></audio>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>

JavaScript

function rect(color, x, y, width, height) {
    this.color = color; 
    this.x = x; 
    this.y = y; 
    this.width = width; 
    this.height = height; 
    this.draw = function() {
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.width, this.height);
    };
}
function collision(objA, objB) {
    if (objA.x + objA.width > objB.x && objA.x < objB.x + objB.width && objA.y + objA.height > objB.y && objA.y < objB.y + objB.height) {
        return true;
    }
    else {
        return false;
    }
}
function aiMove() {
    var y;
    switch (ball.vY) {
    case 2:
        vY = 2;
        break;
    case 3:
        vY = 3;
        break;
    case 4:
        vY = 4;
        break;
    case 5:
        vY = 5;
        break;
    case 6:
        vY = 5;
        break;
    case 7:
        vY = 6;
        break;
    case 8:
        vY = 6;
        break;
    case 9:
        vY = 6;
        break;
    case 0:
        vY = 0;
        break;
    }
    if (ball.y < ai.y + ai.height / 2) {
        y = ai.y - vY;
    }
    if (ball.y > ai.y + ai.height / 2) {
        y = ai.y + vY;
    }
    if (10 < y && y < game.height - ai.height - 10) {
        ai.y = y;
    }
}
function playerMove(e) {
    if (start) {
        var y = e.pageY;
        if (player.height / 2 + 10 < y && y < game.height - player.height / 2 - 10) {
            player.y = y - player.height / 2;
        }
    }
}
function startGame() {
    if (!start) {
        ball.vX = -2;
        ball.vY = 2;
        start = true;
    }
}
function draw() {
    game.draw(); 
    for (var i = 10; i < game.height; i += 45) {
        context.fillStyle = "#ccc";
        context.fillRect(game.width / 2 - 10, i, 20, 30);
    }
    context.font = 'bold 128px courier';
    context.textAlign = 'center';
    context.textBaseline = 'top';
    context.fillStyle = '#ccc';
    context.fillText(ai.scores, 100, 0);
    context.fillText(player.scores, game.width - 100, 0);
    ai.draw(); 
    player.draw();...