JSFiddle - React, Tailwind, and code Playground

by Ilya Karpuk

HTML

<script src="http://jeremyckahn.github.io/keydrown/dist/keydrown.js"></script>
<canvas id='canvas'></canvas>

JavaScript

canvas=document.getElementById('canvas');
    canvas.width=400;
    canvas.height=500;
    ctx=canvas.getContext('2d');

    playerOne=new rect('#000', 150, 0, 100, 20);
    playerTwo=new rect('#000', 150, 480, 100, 20);
    plane= new rect('#fff', 0, 0, canvas.width, canvas.height);
    line= new rect('#aaaaaa', 0, canvas.height/2-2, canvas.width, 4);
    ball=new circle('#000', plane.width/2, plane.height/2, 10);  

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() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    };
}

function circle(color, x, y, width) {
    this.color = color;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = width;
    this.draw = function() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.width, 0, 2 * Math.PI, false);
        ctx.fill();
    };
}

function collision(obj1, obj2) {
    if (obj1.x + obj1.width > obj2.x && obj1.x < obj2.x + obj2.width && obj1.y + obj1.height > obj2.y && obj1.y < obj2.y + obj2.height) {
        return true;
    }
    else {
        return false;
    }
}

var OneX=150;
var TwoX=150;
var startGame=false;
var dX=3;
var dY=3;
var oneScore=0;
var twoScore=0;
function game(){ 
    plane.draw();
    playerOne.draw();
    playerTwo.draw();
    line.draw();
    ctx.font = 'bold 50px courier';
    ctx.textBaseline = 'top';
    ctx.fillStyle = '#AAAAAA';
    ctx.fillText(twoScore, 5, plane.height / 2 - 60);
    ctx.fillText(oneScore, 5, plane.height / 2 + 10);
    if (!startGame){
    ctx.font = 'bold 20px courier';
    ctx.textBaseline = 'top';
    ctx.fillStyle = '#000';
    ctx.fillText("Нажми пробел для старта", plane.width / 6, plane.height / 2 - 30);
    } 
    if(startGame){
        ball.draw();
        ball.x=ball.x+dX;
        ball.y=ball.y+dY;
    }
   ...