JSFiddle - React, Tailwind, and code Playground

by guydog28

HTML

<canvas id="gameBoard" width="400" height="200" style="border:1px solid #000000;"></canvas>

<center>
<div><button id="up" type="button">Up</button></div>
<div><button id="left" type="button">Left</button>
    <button id="right" type="button">Right</button></div>
<div><button id="down" type="button">Down</button></div>
</center>

JavaScript

// Variables
var canvas = document.getElementById('gameBoard');
var ctx = canvas.getContext('2d');
var FPS = 1;

var upButton = document.getElementById('up');
var downButton = document.getElementById('down');
var leftButton = document.getElementById('left');
var rightButton = document.getElementById('right');

// Event Listeners for Buttons

upButton.addEventListener('click', function(){player.up()}, false);
downButton.addEventListener('click', function(){player.down()}, false);
leftButton.addEventListener('click', function(){player.left()}, false);
rightButton.addEventListener('click', function(){player.right()}, false);

/////// note: add player methods to player object

///////////////////////////////////////////////
// Event Listener
canvas.addEventListener('click', test, false);
function test() {
    alert("Test 1");
}
///////////////////////////////////////////////

// Interval for game loop
setInterval(function () {
    gameLoop();
}, 1000 / FPS);

// Game loop
function gameLoop() {
    update();
    draw();
}

// Changes location of objects
function update() {
    player.x += 1;
    player.y += 1;
}

// Draws
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    player.draw();
}

// Player object
var player = {
    x: 10,
    y: 10,
    draw: function () {
        ctx.fillText("Hello World!", this.x, this.y);
    },
    up: function(){player.y-=1;},
    down: function(){player.y+=1;},
    left: function(){player.x-=1;},
    right: function(){player.x+=1;}
};