JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas" Width="1000" Height="600"></canvas>
CSS
#canvas
{
border: 0px solid black;
}
JavaScript
var canvas;
var ctx;
var GAME_WIDTH = 1000;
var GAME_HEIGHT = 600;
var game;
var mouse = new Mouse();
$(document).ready(function () {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
game = new GameBoard();
//game.Map.Level = Level_2();
//game.Map.Draw();
Draw();
// $("#canvas").mousemove(function (e) {
// mouse.X = e.pageX;
// mouse.Y = e.pageY;
// game.MouseMove(mouse);
// Draw();
// });
$("#canvas").mousemove(function (e) {
mouse.X = e.pageX;
mouse.Y = e.pageY;
game.MouseMove(mouse);
Draw();
});
});
function Draw() {
ctx.save();
ClearScreen();
ctx.fillStyle = "rgba(10,0,0,1)";
ctx.strokeRect(0, 0, GAME_WIDTH, GAME_HEIGHT);
// DRAW INDIVIDUAL STUFF
game.Map.Draw();
//game.Units.Draw();
ctx.restore();
}
function ClearScreen() {
canvas.width = canvas.width;
}
function Mouse() {
this.X;
this.Y;
}
function GameBoard() {
this.Map = new Map();
this.Units = new Units();
this.MouseMove = function (Mouse) {
this.Map.MouseMove(Mouse);
};
}
function Map() {
this.LevelData = Level_1(); // array
this.Level = [];
this.BuildLevel = function () {
var t = new Tile();
for (var i = 0; i < this.LevelData.length; i++) {
this.Level.push([]);
for (var a = 0; a < this.LevelData[i].length; a++) {
var terrain;
if (this.LevelData[i][a] == "w") {
terrain = new Water({ X: a * t.Width, Y: i *...