JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>index</title>
        <meta name="description" content="" />
        <meta name="author" content="Per" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <link rel="stylesheet" src="style.css" />
        <script src="http://www.perandersen.no/sandbox/fromAbove/jQueryRotate.2.2.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <img src="http://www.perandersen.no/sandbox/fromAbove/img/car.png", id="carImage"/>    
    </body>
</html>

JavaScript

var angle = 0;
var degreeInRadians = 2*Math.PI/360;
var realX = 0; 
var realY = 0;

$(document).ready(function(){
    placeInCenter($("#carImage"));
});

$(document).keydown(function(e){
    //left
    if (e.keyCode == 37) { 
        rotateLeft($("#carImage"));
        return false;
    }
    //up
    if (e.keyCode == 38) { 
        moveForward($("#carImage"),1);
        return false;
    }   
    //right
    if (e.keyCode == 39) { 
        rotateRight($("#carImage"));
        return false;
    }
    //down
    if (e.keyCode == 40) { 
        //TODO move the car forward
        return false;
    }    
});



function placeInCenter(element) {
    // get viewport height and width and divide it by 2
    centerY = window.innerHeight/2;
    centerX = window.innerWidth/2;
    
    //set absoulte positioning on element
    $(element).css("position", "absolute");
    // place the element
    $(element).offset({ top: centerY, left: centerX });
    //update realX and realY
    realX = centerX;
    realY = centerY;
}

function rotateRight(element) {
    if(angle <360) {
        angle++;
    }
    else {
        angle=0;
    }
    element.rotate(angle);
}

function rotateLeft(element) {
    if(angle > 0) {
        angle--;
    }
    else {
        angle=359;
    }
    element.rotate(angle);
}

function moveForward(element, speed) {
    //move the element to polar cordinate (speed,angle)
    realX = realX + Math.cos(degreeInRadians * angle);
    realY = realY + Math.sin(degreeInRadians * angle);
    
    $(element).offset({ top: realY, left: realX });
}