JSFiddle - React, Tailwind, and code Playground

by Ruger

HTML

<canvas id='cv' width=600 height=300></canvas>
<br/>Wave shape :
<select id="waveShape">
  <option value="01">ttt</option>
  <option value="02">circles</option>
  <option value="03">curly</option>
  <option value="03">spiky</option>
  <option value="04">circle2</option>
</select>

JavaScript

//water effects from:
//https://jsfiddle.net/gamealchemist/Z7fs5/
//
//read Dropbox file from:
//https://stackoverflow.com/questions/24911126/how-to-add-local-json-file-in-jsfiddle

// setup :
polyFillPerfNow();
injectMeasure();
polyFillRAFNow();
setupLoader();
detectBrowser();

// at this point, we have : 
//   now() with sub-ms accuracy, 
//   requestAnimationFrame(),
//   a stop-watch : startCW(), stopCW(), lastCW().
//   a basic rsc handling : var myImg = addRsc(Image, 'http://...') ;
//         AnyFile can stand for XMLHttpRequest
//   cl is console.log
//   isSafari, isiOS, isOpera, isChrome

// Canvas setup
var cv = document.getElementById('cv');
var ctx = context = cv.getContext('2d');
var canvasWidth = cv.width,
  canvasHeight = cv.height;
var waterLevel = 150;
// event
document.getElementById('waveShape').addEventListener('change', changeWave); // onchange = changeWave;
function changeWave(e) {
  waveForm = this.selectedIndex;
}

var waveForm = 0;
var mountain = null;
var waterLevel=50;
// -----------------------------------------------------
//            Interesting code goes here
// -----------------------------------------------------

//  -----------  Resources --------------

var cloudImage = addRsc(Image, 'http://images.wikia.com/fantendo/images/b/bb/Lakitu_Cloud.png');

//  -----------  GrassBlock --------------

function GrassBlock(x, y, width, depth) {
  this.x = x;
  this.width = width;
  this.y = y;
  this.depth = depth;
  var col1 = 'hsl(0, 0%, 0%)';
  var col2 = 'hsl(0, 0%, 0%)';
  var col3 = 'hsl(0, 0%, 0%)';
  var col4 = 'hsl(0, 0%, 0%)';
  var gd = ctx.createLinearGradient(0, this.y, 0, this.y + this.depth);
  gd.addColorStop(0, col1);
  gd.addColorStop(0.1, col2);
  gd.addColorStop(0.11, col3);
  gd.addColorStop(1.0, col4);
  this.gd = gd;
}

GrassBlock.prototype.collide = function(x, y, vx, vy) {
  if ((x < this.x) || (x > this.x + this.width) || (y > this.y + this.depth) || (y < this.y)) return false;
  return...