JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<body id="main">
  <div id="content">
    <div class="playMatObject" playMatObject="player">
      <img src="http://i41.tinypic.com/2q9mb93.png" />
    </div>
  </div>
</body>

CSS

* {
  padding: 0px;
  margin: 0px;
}

#content {
  background-color: red;
  width: 600px;
  height: 400px;
}

div[playMatObject="player"]
{
  width: 32px;
  height: 46px;
  float: left;
  border: 1px solid #ff0000;
}

.playMatObject {
    /* Firefox */
  -moz-transition: all 0.8s ease;
  /* WebKit */
  -webkit-transition: all 0.8s ease;
  /* Opera */
  -o-transition: all 0.8s ease;
  /* Standard */
  transition: all 0.8s ease;
}

.playMatObject {
    
}
}

JavaScript

(function ($) {

  $.fn.playMat = function(options) {
    var settings = $.extend({
      backgroundColor: "red",
      width: $(window).width(),
      height: $(window).height()
    }, options );

    var playMat = this;

    var playMatObjects = playMat.children();

    var player = playMat.children("div[playMatObject='player'");

    playMatObjects.css("position","relative");

    var xInitial = parseInt(player.css("top"));
    var yInitial = parseInt(player.css("left"));

    var transformation = "translate(" + 200/*(xFinal-(0.5*player.width()))*/ + "px, " + 200/*(yFinal-(0.5*player.height()))*/ + "px)";

    $(".playMatObject").css('-webkit-transform', transformation);
    $(".playMatObject").css('-moz-transform', transformation);
    $(".playMatObject").css('-o-transform', transformation);
    $(".playMatObject").css('-ms-transform', transformation);
    $(".playMatObject").css('transform', transformation);
    
    var previousAngle = 0;

    playMat[0].ontouchstart = function(e) {

      var touche= e.touches[0];

      console.log(touche);

      var xFinal = touche.clientX;
      var yFinal = touche.clientY;

      var deltaY = yFinal - yInitial;
      var deltaX = xFinal - xInitial;

      var angleInDegrees = Math.atan2(deltaY, deltaX);

      angleInDegrees *= 180/Math.PI;

      console.log(angleInDegrees);

      if(angleInDegrees >= 0 && angleInDegrees < 90)
      {
        console.log("quadrant 1");
      }

      var transformation = "translate(" + 200/*(xFinal-(0.5*player.width()))*/ + "px, " + 200/*(yFinal-(0.5*player.height()))*/ + "px) rotate(" + angleInDegrees + "deg)";

      $(".playMatObject").css('-webkit-transform', transformation);
      $(".playMatObject").css('-moz-transform', transformation);
      $(".playMatObject").css('-o-transform', transformation);
      $(".playMatObject").css('-ms-transform', transformation);
      $(".playMatObject").css('transform', transformation);
      
      //xInitial = xFinal;
      //yInitial =...