JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='canvas-container'></div>

<div id='control-container'>
    <button id='pause-btn'>pause</button>
    <button id='resume-btn'>resume</button>
    
     - Ticks: <span id='ticks'></span> - 
    
    <button class='canvas-size-btn' data-size='1'>1x</button>       <button class='canvas-size-btn' data-size='2'>2x</button>
    <button class='canvas-size-btn' data-size='3'>3x</button>
    
    Speed: <select id=''></select>
    <button id=''></button>

</div>

CSS

#canvas-container {
    /*width: 150px;
    height: 120px;*/
}
#canvas-container canvas {
   image-rendering: pixelated;
   /* width: 100%;
    height: 100%;*/
}

JavaScript

class Demo {

    constructor(size = 1){
    
        this.canvas = document.createElement("canvas");
        this.ctx = this.canvas.getContext("2d", {
            alpha: false
        });
        this.canvas.width = 150;
        this.canvas.height = 120;
        
        document.getElementById("canvas-container").append(this.canvas);
        this.setCanvasSize(size);

        //this.test();
        
        
        this.x = 20;
        this.y = 40;
        this.reverse = false;
        

        this.isPaused = false;
        this.tickCounter = document.getElementById("ticks");
        this.tickDelay = 100;
        this.tick = this.tick.bind(this);
        this.ticks = 0;
        this._previousElapsed = 0;
        this.run();
    }
    
    setCanvasSize(size){
        if(typeof size != "number" || size < 1 || size > 4){
            throw "setCanvasSize: size must be number between 1 and 4.";
        }
        this.canvas.style.width = 150 * size + "px";
        this.canvas.style.height = 120 * size + "px";
    }
    
    test(){
        this.ctx.fillStyle = "#ffcc33";
        this.ctx.fillRect(10, 10, 80, 40);
        
        this.ctx.fillStyle = "#2d2d2d";
        this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height);
    }
    
    anim(){
        if(this.reverse){
            this.x -= 1;
            if(this.x < 20){
                this.reverse = false;
            }
        }else{
            this.x += 1;
            if(this.x > 80){
                this.reverse = true;
            }
        }
        
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.fillStyle = "#ffcc33";
        this.ctx.fillRect(this.x, this.y, 50, 40);
    }
    
    
    
    /*
    * 
    */
    loadImages(){
        return [];
    }
    
    init(){
        /*
        Keyboard.listenForEvents(
            [Keyboard.LEFT, Keyboard.RIGHT, Keyboard.UP, Keyboard.DOWN]
        );
        this.tileAtlas = Loader.getImage('tiles');
   ...