Skip to content

Instantly share code, notes, and snippets.

@larsgw

larsgw/app.js

Last active January 15, 2017 13:23
Show Gist options
  • Save larsgw/5589ac452a8276e48cae42a83829402c to your computer and use it in GitHub Desktop.
Save larsgw/5589ac452a8276e48cae42a83829402c to your computer and use it in GitHub Desktop.
Download ZIP
Frame function and dependency functions to move a CSS "car"
Raw
app.js
function deg(a){return a*(180/Math.PI);}
function rad(a){return a*(Math.PI/180);}
function sin(a){return Math.sin(rad(a))}
function cos(a){return Math.cos(rad(a))}
function tan(a){return Math.tan(rad(a))}
function asin(a){return deg(Math.asin(a))}
function acos(a){return deg(Math.acos(a))}
function atan(a){return deg(Math.atan(a))}
var mov = { w:0,a:0,s:0,d:0,i:0,k:0,t:0,f:0,g:0,h:0 },
minspd = 0, maxspd = 5, spd = minspd;
$(window).load(function(){
$('body').keydown(function(e) {
ek = e.keyCode;
if (ek==65) mov.a=1; // A
if (ek==68) mov.d=1; // D
if (ek==83) mov.s=1; // S
if (ek==87) mov.w=1; // W
if (ek==70) mov.f=1; // F
if (ek==72) mov.h=1; // H
if (ek==71) mov.g=1; // G
if (ek==84) mov.t=1; // T
if (ek==73) mov.i=1; // I
if (ek==75) mov.k=1; // K
if (ek==81) $('.rotate-world').transition({rotateX:'0',rotateY:'0',rotateZ:'0',scale:'1'},500);
});
$('body').keyup(function(e) {
ek = e.keyCode;
if (ek==65) mov.a=0; // A
if (ek==68) mov.d=0; // D
if (ek==83) mov.s=0; // S
if (ek==87) mov.w=0; // W
if (ek==70) mov.f=0; // F
if (ek==72) mov.h=0; // H
if (ek==71) mov.g=0; // G
if (ek==84) mov.t=0; // T
if (ek==73) mov.i=0; // I
if (ek==75) mov.k=0; // K
});
setInterval(function () {
if (mov.w && spd < maxspd) ++spd
if (mov.s && spd > minspd) --spd
if (mov.a) $('.rotate-world').css({rotateY:'+=1'})
if (mov.d) $('.rotate-world').css({rotateY:'-=1'})
if (spd !== 0) {
var rtn = parseInt($('.rotate-world').css('rotateY'))
, xo = parseFloat($('.move-world').css('x'))
, zo = parseFloat($('.move-world').css('z'))
, xn = sin(rtn) * spd
, zn = cos(rtn) * spd
, x = xo + xn
, z = zo + zn
$('.move-world').css({x:x,z:z});
}
},1000);
});
Raw
index.html
<html>
<head>
<title>Racing game</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="world">
<div class="rotate-world">
<div class="car-container">
<div class="car a"></div>
</div>
<div class="move-world">
<div class="objects">
<div class="floor"></div>
<div class="tower"></div>
</div>
</div>
</div>
</div>
<div class="hud">
<div class="speed"></div>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jquery.transit.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Raw
style.css
body { margin:0;padding:0;width:100%;overflow:hidden; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.world {
-webkit-perspective:500px;
perspective:500px;
position:relative;
width:100%;height:100%;
}
.world,.world * {
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.rotate-world {
width:0;height:0;left:50%;top:50%;position:absolute;overflow:visible;
}
.rotate-world * { position:relative;z-index:100; }
.objects { transform:translateY(50px); }
.floor {
background:url('https://www.google.nl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
height:1000px;width:1000px;
z-index:0;
-webkit-transform-origin:0 0;-moz-transform-origin:0 0;transform-origin:0 0;
transform:rotateX(90deg) translateX(-500px) translateY(-500px);
}
.tower,.tower:before {
height:1000px;width:100px;background:rgba(0,0,0,.2);
top:-1000px;position:absolute;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.tower:before {
top:0;left:0;
content:'';display:block;transform:rotateY(90deg);
}
.hud {
position:fixed;z-index:500;
pointer-events:none;
top:0;left:0;right:0;bottom:0;
}
.hud .speed {
position:absolute;right:20px;bottom:20px;
height:150px;width:150px;background:black;
opacity:.25;border-radius:100%;border:7px solid grey;
}
.car-container {
width:0;height:0;position:absolute;top:0;left:0;overflow:visible;
}
.car.a {
width:50px;
height:100px;
background:black;
transform:translate3d(-25px,-1px,-50px) rotateX(90deg);
}
/*Testing*
.rotate-world,.rotate-world:before,.rotate-world:after { background:red;width:5px;height:5px;z-index:400; }
.rotate-world:before,.rotate-world:after { position:absolute;top:0;left:0;display:block;content:''; }
.rotate-world:before { transform:rotateX(90deg); }
.rotate-world:after { transform:rotateY(90deg); }
.car-container,.car-container:before,.car-container:after { background:blue;width:5px;height:5px;z-index:400; }
.car-container:before,.car-container:after { position:absolute;top:0;left:0;display:block;content:''; }
.car-container:before { transform:rotateX(90deg); }
.car-container:after { transform:rotateY(90deg); }
/**/
@larsgw
Copy link
Author

larsgw commented Jan 15, 2017 

function  deg(a){return  a*(180/Math.PI);}
function  rad(a){return  a*(Math.PI/180);}
function  sin(a){return  Math.sin(rad(a))}
function  cos(a){return  Math.cos(rad(a))}
function  tan(a){return  Math.tan(rad(a))}
function asin(a){return deg(Math.asin(a))}
function acos(a){return deg(Math.acos(a))}
function atan(a){return deg(Math.atan(a))}

var mov = { w:0,a:0,s:0,d:0,i:0,k:0,t:0,f:0,g:0,h:0 },
    
    scale = 4,
    orient = 0,
    
    minspd = 0,
    maxspd = 5,
    spd = minspd

$(window).load(function(){
  $('.rotate-world').css('transform','scale3d('+scale+','+scale+','+scale+')')
  
  $('body').keydown(function(e) {
    ek = e.keyCode;
    if (ek==65) mov.a=1;			// A 
    if (ek==68) mov.d=1;			// D 
    if (ek==83) mov.s=1;			// S 
    if (ek==87) mov.w=1;			// W 
    if (ek==70) mov.f=1;			// F 
    if (ek==72) mov.h=1;			// H 
    if (ek==71) mov.g=1;			// G 
    if (ek==84) mov.t=1;			// T 
    if (ek==73) mov.i=1;			// I 
    if (ek==75) mov.k=1;			// K 
    if (ek==81) $('.rotate-world').transition({rotateX:'0',rotateY:'0',rotateZ:'0',scale:'1'},500);
  });

  $('body').keyup(function(e) {
    ek = e.keyCode;
    if (ek==65) mov.a=0;			// A 
    if (ek==68) mov.d=0;			// D 
    if (ek==83) mov.s=0;			// S 
    if (ek==87) mov.w=0;			// W 
    if (ek==70) mov.f=0;			// F 
    if (ek==72) mov.h=0;			// H 
    if (ek==71) mov.g=0;			// G 
    if (ek==84) mov.t=0;			// T 
    if (ek==73) mov.i=0;			// I 
    if (ek==75) mov.k=0;			// K 
  });

  setInterval(function () {
    if (mov.w && spd < maxspd) ++spd
    if (mov.s && spd > minspd) --spd
    if (mov.a) ++orient
    if (mov.d) --orient
    
    if (mov.a || mov.d) {
      $('.rotate-world').css('rotateY',orient)
      $('.car-container').css('rotateY',orient * -1)
    }
    
    if (spd !== 0) {
      var rtn = orient
        , xo  = parseFloat($('.move-world').css('x'))
        , zo  = parseFloat($('.move-world').css('z'))
	, xn  = sin(rtn) * spd
	, zn  = cos(rtn) * spd
	, x   = xo + xn
	, z   = zo + zn
      
      $('.move-world').css({x:x,z:z});
    }
  },25);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment