JSFiddle - React, Tailwind, and code Playground

by Lloyd Atkinson

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

const getRandomNumber = (minimum, maximum) =>
    Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

/* const update = () => {
    context.fillStyle = getRandomColour();
    
    const randomSize = getRandomNumber(1, 10);
    
    context.fillRect(
        getRandomNumber(0, 150),
        getRandomNumber(0, 150),
        randomSize,
        randomSize);
    
    requestAnimationFrame(update);
};

requestAnimationFrame(update); */


const initialWorldState = {
    bot: {
        x: 50,
        y: 50,
    },
};

const createNextWorldState = (previousWorldState) => JSON.stringify(previousWorldState);

const updateWorld = (previousWorldState) => {
	const positiveOrNegative = () => {
    	if(Math.random() % 2 === 0)	return true;
        
        return false;
    };

	const x = previousWorldState.bot.x + getRandomNumber(1, 10);
    const y = previousWorldState.bot.y + getRandomNumber(1, 10);
    
    return {
    	bot: {
        	x,
            y,
        }
    }
};

const render = () => {
	context.fillStyle = 'red';
    
    const nextWorldState = updateWorld(initialWorldState);
    
    context.fillRect(nextWorldState.bot.x, nextWorldState.bot.y, 3, 3);

	requestAnimationFrame(render);
};

requestAnimationFrame(render);