JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<script src="https://dl.dropboxusercontent.com/u/2219262/cavy.js"></script>
Gopherをクリックする
<div id="wrap"></div>

JavaScript

var preload = new cavy.Preload({
    gopher: "https://dl.dropboxusercontent.com/u/2219262/gopher_head.jpg"
}).complete(init);

function init(result) {
    var stage = new cavy.Stage("wrap", window.innerWidth, window.innerHeight, true);

    var gophers = [new cavy.Sprite(preload.get("gopher"))];
    var width = 3;
    var height = 3;
    for (var y = 0; y < height; y++) {
        for (var x = 0; x < width; x++) {
            var i = x + width * y;
            i > 0 && gophers.push(gophers[i - 1].clone());
            gophers[i].x = gophers[i].width * x;
            gophers[i].y = gophers[i].height * y;
            gophers[i].opacity = 0;
            gophers[i].interactive = true;
            stage.addChild(gophers[i]);
            gophers[i].addEventListener('click', function () {
                if (!this.visible) {
                    return;
                }
                score.text = parseInt(score.text, 10) + 10;
                console.log(socre);
                tween.destroy();
                this.opacity = 0;
                this.visible = false;
            }.bind(gophers[i]));
            gophers[i].show = function () {
                var tween = cavy.Tween(this).to({
                    opacity: 100
                }, 200 * Math.random(), "linear").wait(200 * Math.random()).to({
                    opacity: 0
                }).call(function () {
                    this.visible = false;
                    tween.destroy();
                }.bind(this));
                this.visible = true;
                tween.play();
            }.bind(gophers[i]);
        }
    }

    cavy.Timer.repeat(function () {
        var i = Math.floor(width * height * Math.random());
        if (!gophers[i].isShwon) {
            gophers[i].show();
        }
    }, 300);

    var score = new cavy.Text("0");
    score.set({
        width: 300,
        height: 100,
        x: 0,
        y: gophers[i].height * height + 10,
        color: "#333",
        fontSize:...