JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<canvas id = 'canvas' height = '482px'>
	</canvas>

JavaScript

var canvas = document.getElementById("canvas");   // the canvas where game will be drawn

var context = canvas.getContext("2d");            // canvas context
var mapArray = [
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
];
//these fill the canvas.
var tile1 = new Image();
var tile2 = new Image();
var tile3 = new Image();
var tile4 = new Image();
var player = new Image();

player.src = 'http://greensportsalliance.org/images/lightGreenSquare.gif';
tile1.src = 'http://laminex.com.au/uploads/products/olympia_blue.jpg';
tile2.src = 'http://img.tradeindia.com/fp/1/441/396.jpg';
tile3.src = 'http://www.babybedding.com/images/fabric/silver-gray-minky-fabric_medium.jpg';
tile4.src = 'http://img3.findthebest.com/sites/default/files/2307/media/images/t2/Dark_Red_429990_i0.png';

var left = false;						// level height, in tiles
var right = false;
var up = false;
var down = false;
var space = true;
var tileHeight=37;							// tile size, in pixels
var tileWidth = 45;
var pos = {x: 45, y: 74};
var enemy = {x:990,y:74,y2:111,y3:148,y4:185,y5:222,y6:259,y7:296,y8:333,y9:370};
playerpos = {x:pos.x, y:pos.y};

//randomly selecting the position of the y of the enemy.

for (var i=1; i < 0.8; i++) { 
i= Math.random();
console.log(i); 
} 

//HIT DETECTION FOR THE TILEMAP.
function checkmove(x,y){
	if(mapArray[Math.floor(x/tileWidth)][Math.floor(y/tileHeight)]==1...