JSFiddle - React, Tailwind, and code Playground

by Tgwizman

HTML

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

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

botSize = 16;

bots = [
    {
        "id": 0,
        "gender": 0,
        "pos": {
            "x": 0,
            "y": 0
        },
        "status": {
            "alive": true,
            "happiness": 100,
            "hunger": 100,
            "rest": 100
        },
        "knowledge": {
            "happy": true,
            "hungry": true,
            "tired": false,
            "surroundings": {
                "bot": false,
                "food": false,
                "bed": false
            }
        }
    }
];

var drawBot = function(bot) {
    ctx.fillStyle = '#00F #F66'.split(' ')[bot.gender];
    if (!bot.status.alive) ctx.fillStyle = '#999';
    
    //head
    ctx.fillRect(
        bot.pos.x * botSize + (botSize*3/8),
        bot.pos.y * botSize + (botSize*1/8),
        botSize/4, botSize/4);
    //body
    ctx.fillRect(
        bot.pos.x * botSize + Math.round(bot.status.hunger/25) + 3,
        bot.pos.y * botSize + 4,
        botSize - Math.round(bot.status.hunger/25)*2 - 6, botSize - 8);
    //legs
    ctx.fillRect(
        bot.pos.x * botSize + 4,
        bot.pos.y * botSize + 10,
        botSize - 13, botSize - 10);
    ctx.fillRect(
        bot.pos.x * botSize + 9,
        bot.pos.y * botSize + 10,
        botSize - 13, botSize - 10);
};

drawBot(bots[0]);