JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<html>
<head>
<style>
</style>
</head>
<body>
<canvas id = "battle_arena" width = "400" height = "200"></canvas>
<script></script>
</body>
</html>

CSS

body{
  background-color:black;
}
canvas{
  border:10px solid white;
}

JavaScript

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();
var arena = document.getElementById("battle_arena")
var ctx = arena.getContext("2d")
var soul = {
width:16,
height:16,


x:200,
y:100,
velX:0,
velY:0,
speed:3


}
var matrix= [
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0],
[1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
]
var keys = [];
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if(value === 1){
ctx.fillStyle = "red";
ctx.fillRect(soul.x , soul.y, 1, 1);
}
})
})
function update(){
if(keys[38]){
soul.velY--;
if(soul.velY < soul.speed){
soul.velY++;
}
}
soul.y += soul.velY;
requestAnimationFrame(update);
}
document.addEventListener("keydown", function(e) {
keys[e.keyCode] = false;
})
document.addEventListener("keyup", function(e) {
keys[e.keyCode] = false;
})
update();