JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<div id="world">
    <div id="monster"></div>
</div>

CSS

#world{
    width:400px;
    height:400px;
    border:1px solid #000;
}

#letterList {
    position:absolute;
    top:10px;
    left:20px;
    overflow:hidden;
}

.word{
    position:absolute;
    width:20px;
    height:20px;
    text-align:center;
    border-radius:20px;
    border:1px solid black;
    -webkit-transition:600ms ease-in;
}

#monster {
    width:30px;
    height:30px;
    background:green;
    position:absolute;
}

JavaScript

var monster, 
    wordBank = ['apple', 'orange', 'pear', 'beer'];

var world = {
    width: 400,
    height: 400,
    wordCnt: 0,
    charCnt:0,
    init: function() {
        monster = new Monster();
        monster.placeMonster(this.width - monster.width, this.height - monster.height);
        monster.move();
        this.withdraw(this.wordCnt);
    },
    withdraw: function(wordCnt) {
        $('#letterList').html("");
        this.charCnt = 0;
        var charArr = wordBank[this.wordCnt].split("");
        var charWidth = 30;
        _.each(charArr, function(char) {
            $('#world').append("<div class='word'>" + char + "</div>");
            $('.word:last').css({top:50,left:charWidth+=50});
        })
    },
    checkChar:function(char){
        var word = wordBank[this.wordCnt];
        return (word.charAt(this.charCnt) === char)
    },
    shoot:function(ele){
        ele.css({'position':'absolute','top':monster.y,'left':monster.x});
    }
}

$('#world').on('click', '.word', function() {
    world.shoot($(this));
    if(world.checkChar($(this).text())){
        monster.stop();
        setTimeout(function(){monster.move()},800);
        if(++world.charCnt == wordBank[world.wordCnt].length){
            world.wordCnt++;
            world.withdraw();
        };
    }
    else{
        monster.dx += -0.2;
    }
    
})

function Monster() {
    this.ele = $('#monster');
    this.width = 30;
    this.height = 30;
    this.x = 0;
    this.y = 0;
    this.dx = -0.5;

    this.placeMonster = function(x, y) {
        this.x = x;
        this.y = y;
        this.ele.css({
            'top': y,
            'left': x
        });
    };
    this.move = function() {
        var that = this;
        this.monsterInterval = setInterval(function() {
            that.moveMonster()
        }, 1000 / 60);
    };
    this.stop = function() {
        clearInterval(this.monsterInterval);
    };
    this.moveMonster = function() {
        this.x += this.dx;
       ...