JSFiddle - React, Tailwind, and code Playground

by otherDewi

HTML

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
    
    <body id="index">
    
      <div class="wrapper">
        <img class="scene" src="http://s7.postimg.org/lp9vvmil7/Duck_Hunt2.jpg" alt="duck hunt background">
        <canvas id="canvas" height="360" width="600"></canvas>

        <audio id="audio">
            <source src="audio/goose1.ogg" type="audio/ogg">
            <source src="audio/goose1.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
        <audio id="gun">
            <source src="audio/gun-fire2.ogg" type="audio/ogg">
            <source src="audio/gun-fire2.mp3" type="audio/mpeg">
        </audio>
        <h5>Hit:<span id="score"></span></h5>
        <div id="winner">
          
        </div>
      </div><!--end .wrapper-->
     
    </body>

CSS

.wrapper{
    position:relative;
    width:600px;
    height: 360px;
}

.scene, #canvas{
    cursor: none;
    position:absolute;
    width:600px;
    height: 360px;

JavaScript

(function(){   //or $(window).load(function(){
	var $canvas = $('#canvas')
	,	ctx  = document.getElementById('canvas').getContext('2d')
    ,   $tally = document.getElementById("score")
    ,   $winner = $('#winner')
	,   img  = new Image()
	,	img2 = new Image() // Create new img element
    ,   img3 = new Image() // goose sprite
    ,   crosshair = new Image()
    ,   shell = new Image()
	,	xHair  	//crosshair position
	,	yHair
	,	xGPos	//gun position
	,	yGPos
	,	difx
	,	dify
	,	rotation //gun rotation 
    ,   canvasWidth = 600
    ,   offset      = 50
    ,   count       = 0
    ;       
   

	    // 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);
        };
    })();

	img2.src = 'http://s18.postimg.org/61fxtwfxl/rifle.png';
    crosshair.src = 'http://s24.postimg.org/vxczml6ht/crosshair.png';


	$canvas.mousemove(function(e){
		xHair=e.pageX;
		yHair=e.pageY;

		//gun position
		xGPos    = xHair/4+280;
		yGPos    = yHair/4+200;
		difx     = xHair-(235+xGPos);
		dify     = yHair -(230+ yGPos); 
		radians  = Math.atan2(dify,difx);
		//rotation = radians+2.36; //rotation in radians
        rotation = (((radians*180)/Math.PI)+135); //rotation in degrees
        //console.log(rotation);
	});


   //loop that call the request animFrame and all the loop functions
            (function duckHunt() {
                ctx.clearRect(0,0,600,360);
                draw(ctx, xGPos, yGPos, difx, dify, rotation);
                crosshairs(ctx, xHair, yHair);
                //drawGeese(ctx);
                //audioTrigger();
               ...