JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Juego Pong</title>
<script type="text/javascript">
var X1 = 0, Y1 = 40, X2 = 110, Y2 = 0;
var CX = 55, CY = 30;
var canvas = null, ctx = null;
var PAUSE = true;
var lastKey = null;
var Top = null, Rt = null;
var pel = null;
window.addEventListener('load',function(){canvas = document.getElementById('canvas');canvas.style.background = "#000";ctx = canvas.getContext('2d');
paint(ctx);centro(ctx);Top = true;Rt = true;ejecutar();},false);
document.addEventListener('keyup',function(evt){lastKey = evt.keyCode;ejecutar();},false);
function paint(ctx){
ctx.fillStyle = "#F00";
ctx.fillRect(0,0,10,60);
ctx.fillStyle = "#0F0";
ctx.fillRect(X1,Y1,10,20);
ctx.fillStyle = "#F00";
ctx.fillRect(110,0,10,60);
ctx.fillStyle = "#0F0";
ctx.fillRect(X2,Y2,10,20);
}
function centro(ctx){
ctx.fillStyle = "#FFF";
ctx.rect(CX,CY,5,5);
ctx.fill();
}
function pelota(){
if(CY == 55 || CY == 0)
Top = !Top;
if(CX == 10 || CX == 105)
Rt = !Rt;
if(Top)
{
CY -= 5;
}
else
{
CY += 5;
}
if(Rt)
{
CX += 5;
}
else
{
CX -= 5;
}
if(CX == 105){
if((Y2+20 >= CY+5 && CY >= Y2))
{
document.getElementById("pause").innerHTML = "";
ctx.clearRect(10,0,100,60);
ctx.fillStyle = "#000";
ctx.fillRect(10,0,100,60);
ctx.fillStyle = "#FFF";
ctx.fillRect(CX,CY,5,5);
}
else
{
document.getElementById("pause").innerHTML = "Game Over";
}
}
else if(CX == 10)
{
if((Y1+20 >= CY+5 && CY >= Y1))
...