JSFiddle - React, Tailwind, and code Playground

by Yaroslav

HTML

<button id="left">left</button>
<button id="right">right</button>
<button id="top">top</button>
<button id="bottom">bottom</button>
<hr>
<div id="stage"></div>

CSS

#stage {
  border: 1px solid black;
  width: 400px;
  height: 300px;
  position: relative;
  background-color: #fff;
}
.hero-class {
  width: 125px;
  height: 125px;
  background-color: #eee;
  position: absolute;
  background-image: url(https://cdn2.iconfinder.com/data/icons/gaming-color-icons/104/35-gaming-mushroom-mario-128.png);
}

JavaScript

$(document).keypress(function(event) {
  switch(event.charCode) {
    case 119: // w
      hero2.moveUp();
      break;
    case 115: // s
      hero2.moveBottom();
      break;
    case 97: // a
      hero2.moveLeft();
      break;
    case 100: // d
      hero2.moveRight();
      break;
	}
});

var stage = $('#stage');
var hero1 = new hero('hero1');
var hero2 = new hero('hero2');
$('#left').click(function(){hero2.moveLeft();});
$('#bottom').click(function(){hero2.moveBottom();});
$('#top').click(function(){hero2.moveUp();});
$('#right').click(function(){hero2.moveRight();});
hero2.jqEl.css('left','200px');
hero2.jqEl.click(function(){
	hero2.moveBottom();
});
function hero (heroId) {
  stage.append('<div id="' + heroId + '" class="hero-class">' + heroId + '</div>');
  this.jqEl = $('#' + heroId);
  this.moveBottom = function() {
  	var top = parseInt(this.jqEl.css('top'));
    this.jqEl.stop().animate({
    	top: top + 50 + 'px'
    });
  }
  this.moveLeft = function() {
  	var left = parseInt(this.jqEl.css('left'));
    this.jqEl.stop().animate({
    	left: left - 50 + 'px'
    })
  	//this.jqEl.css('left', left - 50 + 'px');
  }
  this.moveUp = function() {
  	var up = parseInt(this.jqEl.css('top'));
    this.jqEl.stop().animate({
    	top: up - 50 + 'px' 
    })
  }
  this.moveRight = function() {
  	var left = parseInt(this.jqEl.css('left'));
    this.jqEl.stop().animate({
    	left: left + 50 + 'px'
    })
  }
  return this;
}
// <div id="hero"></div>



//$('#hero').text('Какой-то текст');
// append
// html
// text