JSFiddle - React, Tailwind, and code Playground

by monteslu

HTML

<script src="http://monwarp.com/js/libs/mwe_mini-0.0.1.js"></script>
<canvas id='myCanvas' width='300' height='300' ></canvas>
        <script type='text/javascript'>  
          
        </script>
        <button id="startButton">Start</button>

JavaScript

dojo.require('mwe.GameCore');
        dojo.require('mwe.Sprite');
        dojo.require('mwe.ResourceManager');
        dojo.require('mwe.GameAction');
        
          var sprite = {fillStyle:'rgb(0,0,255)',                          
                        x:100,y:100, w:50, h: 50, dx:0.5, dy: 0.5,
                        xStartVelocity: 0.5, yStartVelocity: 0.5};
          
          var game = new mwe.GameCore({
              canvasId: 'myCanvas',
              update : function(elapsedTime){
                  sprite.x += sprite.dx * elapsedTime;
                  sprite.y += sprite.dy * elapsedTime;
              },
              draw: function(context){
                  //fill background
                  context.fillStyle = "rgb(255,255,255)";
                context.fillRect(0,0,this.width,this.height);
                //draw square
                context.fillStyle = sprite.fillStyle; 
                context.fillRect(sprite.x,sprite.y, sprite.w, sprite.h);
              },
              initInput: function(im) {                
                  this.moveLeft = new mwe.GameAction({name:"moveLeft"});
                  this.moveRight = new mwe.GameAction({name:"moveRight"});
                  this.moveUp = new mwe.GameAction({name:"moveUp"});
                  this.moveDown = new mwe.GameAction({name:"moveDown"});
                  
                  im.mapToKey(this.moveLeft, dojo.keys.LEFT_ARROW);
                  im.mapToKey(this.moveRight, dojo.keys.RIGHT_ARROW);
                  im.mapToKey(this.moveUp, dojo.keys.UP_ARROW);
                  im.mapToKey(this.moveDown, dojo.keys.DOWN_ARROW);                  
              },
              handleInput: function(im){
                  if(this.moveLeft.isPressed()){
                      sprite.dx = Math.abs(sprite.xStartVelocity) * -1;
                  }
                  else if(this.moveRight.isPressed()){
                      sprite.dx = Math.abs(sprite.xStartVelocity);
                  }
   ...