jQuery moving car!
HTML
<script src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js"></script>
<!DOCTYPE html>
<html>
<body>
<H1>Hey Reddit, Check out what I made today : Use the arrow keys :)</H1>
<br />
<p> Updates:</p>
<ul>
<li>"Turn only when moving"</li>
<li>fixed reverse key directions</li>
<li>reversing added</li>
<li>multiple keys now supported</li>
<li>smoother(than before) motion - stil not smooth enough</li> </ul>
<div id="container">
<!--<img id="carImg" src="http://thumbs.dreamstime.com/thumblarge_459/126034361367I321.jpg" alt="Smiley face" width="80" height="80" />-->
<div id="container">
<img id="carImg" src="http://solidworksaudir8.com/assets/images/landingpage1/solidworks_car_top.jpg" alt="Smiley face" width="115" height="60" />
</div>
<div id="output"></div>
</body>
</html>
CSS
#carImg
{
position:absolute;
}
li
{
border:1px solid lightblue;
margin-bottom:2px;
margin-left:20px;
padding:5px;
}
*
{
font-family:arial;
padding:5px;
}
h1
{
font-size:2em;
background-color:lightblue;
}
JavaScript
var offset = -180;
var rot_step_val = 5;
var dist_step_val = 10;
var angle = offset;
var u = false;
var d = false;
var l = false;
var r = false;
var revConst = 2;
$(document).ready(function() {
function handleKeys(e) {
trace(e.which);
if (e.which == 37) {
e.preventDefault();
l = true;
}
else if (e.which == 39) {
e.preventDefault();
r = true;
}
else if (e.which == 38) {
e.preventDefault();
u = true;
}
else if (e.which == 40) {
e.preventDefault();
d = true;
}
}
function handleKeyUp(e) {
trace(e.which);
if (e.which == 37) {
e.preventDefault();
l = false;
}
else if (e.which == 39) {
e.preventDefault();
r = false;
}
else if (e.which == 38) {
e.preventDefault();
u = false;
}
else if (e.which == 40) {
e.preventDefault();
d = false;
}
}
function fastLoop() {
if (u === true) {
revConst = 1;
moveForward();
}
if (l === true) {
rotateLeft();
}
if (r === true) {
rotateRight();
}
if (d === true) {
revConst = -1;
moveBackwards();
}
}
var key = setInterval(fastLoop, 25);
$(document).keydown(
function(e) {
handleKeys(e);
});
function rotateToAngle() {
$("#carImg").rotate(angle + offset);
}
$(document).keyup(
function(e) {
handleKeyUp(e);
});
function rotateLeft() {
if (u === true || d === true) {
angle = angle - revConst * rot_step_val;
rotateToAngle();
}
}
function rotateRight() {
if (u === true || d === true) {
angle = angle + revConst *...