JSFiddle - React, Tailwind, and code Playground

by Grant

HTML

<script src="https://cs.stanford.edu/people/karpathy/reinforcejs/lib/rl.js"></script>
<canvas id="canvas"></canvas>

CSS

body {
  background: cyan;
  //background: rgb(10, 9, 9);
}

JavaScript

console.clear()
canvas = document.getElementById("canvas")
ctx = canvas.getContext("2d")
scale = 50
canvas.width = scale * 11
canvas.height = scale * 10

// create environment
var env = {};
env.getNumStates = function() {
  return 1;
}
env.getMaxNumActions = function() {
  return 9;
}

// create the agent, yay!
var spec = {
  alpha: 0.01
}
ai = new RL.DQNAgent(env, spec);



/*
var action = agent.act([0]);

if (action == s * 2) {
  reward = 1
  console.log("     Win")
} else {
  reward = -1
  console.log("Lose")
}
agent.learn(reward); */

function flatten(arr) {
  var result = []
  for (var i = 0; i < arr.length; i++) {
    for (var o = 0; o < arr[0].length; o++) {
      result.push(arr[i][o])
    }
  }
  return result;
}

/*KEY
1 AIR
2 WALL
3 LAVA
*/
//Game Setup
function generate() {
  //Data Setup
  data = []
  gravity = .001
  speed = 2
  player = [1, 1.5, 0] // [X,Y,vY]
  ground = true;
  size = 10 //Length of playing field
  for (var i = 0; i < size; i++) {
    data[i] = [2, 1, 1, 1, 1, 1, 1, 1, 1, 2]
  }

  data[3][0] = 3
  
}



/*KEY
[0]
   0 Nothing
	 1 Left
	 2 Right
[1]
   0 Nothing
	 1 Jump
	 2 Increase Gravity
*/
//Game Run
function run(control, time) {
  act = control.toString(3).split("")
	act[0]=act[0]||0
	act[1]=act[1]||0
  player[2] -= gravity * time
  player[1] += player[2]
  player[0] += speed * (act[0] == 2 ? 1 : act[0] == 1 ? -1 : 0)


  switch (data[Math.floor(player[0])][Math.floor(player[1] - .5)]) {
    case 2:
      ground = true
      player[1] = Math.ceil(player[1]) + .5
			break;
    case 3:
      generate()
			console.log("dead")
      return -10

  }
	
	switch (data[Math.floor(player[0])][Math.floor(player[1] + .5)]) {
    case 2:
      ground = true
      player[1] = Math.floor(player[1]) + .5
			player[2] = 0
			break;
    case 3:
      generate()
			console.log("dead")
      return -10

  }
  return time
}



//Calculate View
view = []

function getView() {
  view = []
  for (var i = -5; i <= 5; i++) {
    view[i + 5] = []
   ...