JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<body>
    <canvas id='pong' height=400 width=500 style='border: 1px solid black'>
    </canvas>
    
    
</body>

JavaScript

var width = 500;
var height = 400;

var FPS = 60;

var canvas = document.getElementById('pong');
var g = canvas.getContext('2d');
var x = 50;
var y = 105;

var player = {
    x: 30,
    y: height/2 - 75,
    speed: 5,
    tick: function () {},
    render: function () {
    g.fillRect(this.x, this.y, 15, 75)
}

}

var player2 = {
    x: width - 15 * 2,
    y: height/2 - 75,
    speed: 5,
    tick: function () {},
    render: function () {
        g.fillRect(this.x, this.y, 15, 75);
    }
}



var Key = {
    up: false,
    down: false
};

function render () {
player.render();
    player2.render();
}

function tick () {
player.tick();
    player2.tick()
}

setInterval(function () {
render();
tick();

}, 1000/FPS)