JSFiddle - React, Tailwind, and code Playground

by otherDewi

HTML

<div class="wrapper">
        <div id="splashScreen"><h1>Click to Play</h1></div>
        <div id="duck1" class="ducks"></div> 
        <div id="duck2" class="ducks"></div>
        <div id="duck3" class="ducks"></div>
        <img src="http://s21.postimg.org/hfmq4wts3/sight.png" alt="" id="crosshair">
        <h5 id="score"></h5>
        <div id="winner">
          
        </div>
      </div><!--end .wrapper-->

CSS

.wrapper{
    position:relative;
    width:600px;
    height: 360px;
    background-color: #66f;
    cursor: none;
    overflow:hidden;
}

#splashScreen{
    position: absolute;
    background-color: #ff2;
    height:100%;
    width:100%;
    cursor:pointer;
    z-index:1000;
}

.ducks{
    /*display:none;*/
    position:absolute;
    width:100px;
    height:96px;
    background: url(http://s21.postimg.org/3n8b9a30n/duck_sprite.png);
    background-position:0 0;
    overflow:hidden;
    top:20px;
    right:-55px;
}

#crosshair{
    position:absolute;
    z-index: 15;
}

h5{
    position:absolute;
    width:70px;
    top:16px;
    left:60px;
    color:#f79a21;
    margin:0;
    padding:0;
    font:21px/22px 'torqueultra', sans-serif;
    z-index: 20;
}

#winner{
  display:none;
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  margin:0;
  z-index:50;
}

#winner{
  display:none;
  position:absolute;
  cursor:pointer;
  top:0;
  left:0;
  margin:0;
  z-index:50;
}

JavaScript

$(document).ready(function(){
    $(document).on('click','#splashScreen', function(){
        $('#splashScreen').fadeTo(600,0).hide(600); 
        init.start();
    });

    var init = {

        start: function(){
            var $wrapper = $('.wrapper')
            ,   $tally = document.getElementById("score")
        	,	$crosshair = $('#crosshair')
            ,   $winner = $('#winner')
            ,   playEnterOnce = true
            ,   shells = 7
            ,   yHair 
            ,   xHair 
            ,   hit = 0 
            ,   frame = 0
            ,   count = 0
            ,   ducks = new Array() // create an array to contain all the duck objects
            ,   duckPosX = new Array()
            ,   duckPosY = new Array()
            ,   sxdx = [["#duck1",700],["#duck2",900],["#duck3",1300]] // initial array of the sx and dx values for each duck
            ,   tryAgain=true
            ;

            $tally.innerHTML=hit;

           
        	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
            window.requestAnimFrame = (function(){
                return  window.requestAnimationFrame|| 
                window.webkitRequestAnimationFrame  || 
                window.mozRequestAnimationFrame     || 
                window.oRequestAnimationFrame       || 
                window.msRequestAnimationFrame      || 
                function(/* function */ callback, /* DOMElement */ element){
                    window.setTimeout(callback, 1000 / 60);
                };
            })();

            $wrapper.mousemove(function(e){
        		xHair    = e.pageX-14;
        		yHair    = e.pageY-14;
        	});

            function Duck(namen,dx) {
                this.namen = namen;
                this.sx1  = 0 - Math.round(Math.random())*100;
                this.sy   = 0;
                this.sx2  = this.sx1-100;
                this.dx   = dx + Math.round(Math.random()*100);
                this.dy   = 10 +...