JSFiddle - React, Tailwind, and code Playground

by jho689

HTML

<body><canvas id="myCanvas" width="400" height="400" style="border:1px solid black;">
    Sorry, your browser does not support the HTML5 canvas tag.
  </canvas>
  <h1>
    Extra:
  </h1>
  <p>Press for 1 classic look <br>
  Press for 2 rainbow look <br>
  Press E to toggle sound effects when ball hits paddle
  </p>
</body>
<audio id="audio" src="https://www.soundjay.com/buttons/sounds/button-10.mp3"></audio>

CSS

p {
    font-weight: bold;
     font-size: large;
    
}

JavaScript

// "Crappy PONG" -- step by step
//
// Step 9: Homework
/*

* Make the ball bounce off the left and right 
  edges of the playfield, instead of "resetting".
  
* Add a scoring system! When the ball hits the
  left edge, the right paddle earns a point, and
  vice versa. Display each paddle's score, in
  "bold 40px Arial", at the top of the playfield 

* Prevent the paddles from moving out of the
  playfield, by having them "collide" with it.
  
* Let the user also move the paddles horiz
ontally
  i.e. left and right within 100 pixels of the edges,
  using the 'A' and 'D' keys for the left paddle,
  and   the 'J' and 'L' keys for the right paddle
  
* Add a second ball, with half the velocity 
  of the first one.

*/

"use strict";

/* jshint browser: true, devel: true, globalstrict: true */

var g_canvas = document.getElementById("myCanvas");
var g_ctx = g_canvas.getContext("2d");
var audioElement = document.getElementById("audio");

/*
0        1         2         3         4         5         6         7         8         9
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
*/

// =================
// KEYBOARD HANDLING
// =================

var g_keys = [];

function handleKeydown(evt) {
  g_keys[evt.keyCode] = true;
}

function handleKeyup(evt) {
  g_keys[evt.keyCode] = false;
}

// Inspects, and then clears, a key's state
//
// This allows a keypress to be "one-shot" e.g. for toggles
// ..until the auto-repeat kicks in, that is.
//
function eatKey(keyCode) {
  var isDown = g_keys[keyCode];
  g_keys[keyCode] = false;
  return isDown;
}

window.addEventListener("keydown", handleKeydown);
window.addEventListener("keyup", handleKeyup);

// ============
// PADDLE STUFF
// ============

// COMMON PADDLE STUFF

// A generic contructor which accepts an arbitrary descriptor object
function Paddle(descr) {
  for (var property in descr) {
    this[property] = descr[property];
  }
}

// Add these properties to the prototype, where...