JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas"></canvas>

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var backgroundImage = new Image();
canvas.width = document.body.clientWidth; //document.width is obsolete
canvas.height = document.body.clientHeight; //document.height is obsolete

// Fish
function FishObject(xSet, ySet, xSpeed, ySpeed, spriteUrlRight, spriteUrlLeft) {
  this.XPos = xSet;
  this.YPos = ySet;
  this.XDefaultSpeed = xSpeed;
  this.YDefaultSpeed = ySpeed;
  this.xSpeed = this.XDefaultSpeed;
  this.ySpeed = this.YDefaultSpeed;
  this.RightSprite = new Image();
  this.RightSprite.src = spriteUrlRight;
  this.LeftSprite = new Image();
  this.LeftSprite.src = spriteUrlLeft;
}

FishObject.prototype.Draw = function(ctx) {
  if (this.xSpeed > 0) {
    ctx.drawImage(this.RightSprite, this.XPos, this.YPos);
  } else {
    ctx.drawImage(this.LeftSprite, this.XPos, this.YPos);
  }
}

FishObject.prototype.Update = function(ctx) {
  this.XPos += this.xSpeed;
  this.YPos += this.ySpeed;

  if (this.XPos <= 0) {
    this.xSpeed = this.XDefaultSpeed;
  } else if ((this.XPos + this.RightSprite.width) >= canvas.width) {
    this.xSpeed = -this.XDefaultSpeed;
  }

  if (this.YPos <= 0) {
    this.ySpeed = this.YDefaultSpeed;
  } else if ((this.YPos + this.RightSprite.height) >= canvas.height) {
    this.ySpeed = -this.YDefaultSpeed;
  }
}

backgroundImage.src = 'https://s24.postimg.org/rakxoa7sl/sfondo.jpg';

var Fishs = [];
Fishs.push(new FishObject(0, 0, 1, 1, "https://s18.postimg.org/n8sqmtjkp/pesce1_sx.png",
  "https://s30.postimg.org/6w8xyqwep/pesce1_dx.png"));
Fishs.push(new FishObject(0, 0, 2, 1.2, "https://s28.postimg.org/6aalv0pst/pesce2_sx.png",
  "https://s29.postimg.org/dxbi0vypz/pesce2_dx.png"));
Fishs.push(new FishObject(0, 0, 1.7, 2.8, "https://s24.postimg.org/sbgt8zn6t/pesce3_sx.png",
  "https://s29.postimg.org/v65opob7r/pesce3_dx.png"));
Fishs.push(new FishObject(0, 0, 0.2, 0.5, "https://s30.postimg.org/62lb9bfwx/pesce4_sx.png",
 ...