Working Rocket in a Mini World

HTML
<div class="big-one"> <div class="control"> <p class="control-title">Control</p> <div class="control-left" id="control-left">Left<i class="material-icons">arrow_back</i></div> <div class="control-right" id="control-right">Right<i class="material-icons">arrow_forward</i></div> <p class="tips">Click both for propulsion</p> </div> <div class="container"> <div class="rocket" id="rocket"> <span class="antenna"></span> <span class="flame flame-left"></span> <span class="flame flame-right"></span> <span class="base"></span> </div> <div> <div class="explosion ex1"></div> <div class="explosion ex2"></div> <div class="explosion ex3"></div> <div class="terra"></div> <div class="mountain"></div> <div class="ice"></div> <div class="mountain-ice"></div> <div class="fog"></div> <div class="clouds clouds1"></div> <div class="clouds clouds2"></div> <div class="clouds clouds3"></div> </div> <span class="altitude"></span> <span class="speed"></span> <span class="bussola"></span> <span class="toofast"><i class="material-icons">warning</i></span> </div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700'); html, body{ margin: 0; background: #f1f1f1; height: 100%; } .control{ position: absolute; width: 200px; height: 120px; margin: auto; top: 0; bottom: 0; right: -220px; text-align: center; z-index: 100; font-family: 'Roboto Condensed', sans-serif; background: rgba(255,255,255,0.4); border-radius: 10px; .control-title{ font-size: 20px; margin: 0; } .control-left{ position: absolute; width: 50px; height: 50px; left: 10px; margin: 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); background: white; } .control-right{ position: absolute; width: 50px; height: 50px; margin: 10px; right: 10px; border-radius: 10px; background: white; border: 1px solid rgba(0,0,0,0.1); } .tips{ bottom: 10px; position: absolute; font-size: 13px; left: 0; right: 0; margin: auto; } } .big-one{ position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 500px; height: 500px; text-align: center; .speed{ position: absolute; font-size: 60px; top: 40%; margin: auto; left: 0; right: 0; font-family: 'Roboto Condensed', sans-serif; color: rgba(255,255,255,0.4); z-index: 10; } .altitude{ position: absolute; top: 0px; font-size: 22px; font-family: 'Roboto Condensed', sans-serif; color: #444; } .bussola{ position: absolute; bottom: 10px; right: 10px; width: 25px; height: 30px; background: #444; margin: auto; left: 0; right: 0; z-index: 50; -webkit-clip-path: polygon(50% 0%, 100% 100%, 60% 94%, 60% 64%, 40% 64%, 40% 94%, 0% 100%); clip-path: polygon(50% 0%, 100% 100%, 57% 94%, 57% 64%, 43% 64%, 43% 94%, 0% 100%); } .toofast{ position: absolute; top: 10px; margin: auto; left: 0; right: 0; width: 13px; height: 13px; i{ color: rgba(0,0,0,0); } } } .container{ position: absolute; background: #E1F5FE; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; z-index: 0; box-shadow: inset 0 0 150px rgba(0,0,0,0.13); .terra{ position: absolute; bottom: -40px; width: 100%; height: 100px; border-radius: 80%; background: #FBC02D; &:after{ content: ''; position: absolute; left: 0; bottom: 20px; width: 100%; height: 105px; border-radius: 80%; background: #FFD180; z-index: -2; transform: rotateZ(-13deg); } &:before{ content: ''; position: absolute; left: 0; bottom: 0px; width: 100%; height: 125px; border-radius: 80%; background: #FFE57F; z-index: -1; transform: rotateZ(19deg); } } .explosion{ position: absolute; margin: auto; left: 0; right: 0; bottom: 30px; z-index: 200; border-radius: 50%; display: none; } .ex1{ width: 95px; height: 95px; background: #333; border: 5px solid #EF6C00; } .ex2{ content: ''; width: 40px; height: 40px; border-radius: 50%; background: #FB8C00; border: 3px solid #F4511E; bottom: 100px; right: 0; animation-delay: 1s; } .ex3{ content: ''; width: 30px; height: 30px; border-radius: 50%; background: #F4511E; border: 3px solid #FFB300; bottom: 50px; left: -60px; animation-delay: 0.5s; } .mountain{ position: absolute; width: 0px; height: 0px; border-left: 40px solid transparent; border-right: 60px solid transparent; border-top: 40px solid transparent; border-bottom: 100px solid #795548; left: 80px; bottom: 95px; transform: rotateZ(-2deg); z-index: -4; &:after{ position: absolute; content: ''; width: 0px; height: 0px; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 40px solid transparent; border-bottom: 80px solid #8D6E63; left: 20px; transform: rotateZ(5deg); z-index: -4; } &:before{ position: absolute; content: ''; width: 0px; height: 0px; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 40px solid transparent; border-bottom: 80px solid #8D6E63; right: 0px; z-index: -5; transform: rotateZ(5deg); } } .ice{ position: absolute; bottom: 35px; width: 90%; height: 120px; right: 0; border-radius: 50%; background: white; transform: rotateZ(-7deg); z-index: -10; } .mountain-ice{ position: absolute; width: 0px; height: 0px; border-left: 40px solid transparent; border-right: 60px solid transparent; border-top: 40px solid transparent; border-bottom: 100px solid #CFD8DC; right: 30px; bottom: 140px; z-index: 2; transform: rotateZ(2deg); z-index: -11; &:after{ content: ''; position: absolute; width: 0px; height: 0px; border-left: 14px solid transparent; border-right: 19px solid transparent; border-top: 24px solid transparent; border-bottom: 35px solid white; margin: auto; top: -25px; left: -13px; } &:before{ position: absolute; content: ''; width: 0px; height: 0px; border-left: 40px solid transparent; border-right: 40px solid transparent; border-top: 40px solid transparent; border-bottom: 80px solid #ECEFF1; left: 20px; z-index: 2; transform: rotateZ(5deg); z-index: -4; } } .rocket{ position: absolute; width: 38px; height: 70px; background: #dadada; bottom: 60px; margin: 5px auto; left: 0; right: 0; z-index: 5; border-top-right-radius: 100%; border-top-left-radius: 100%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; box-shadow: inset 0 -5px 15px rgba(0,0,0,0.1); .flame{ position: absolute; width: 12px; height: 12px; background: #3399ff; border-radius: 50% 50% 0% 50%; transform: rotateZ(40deg); bottom: -10px; } .flame-right{ left: -13px; display: none; } .flame-left{ right: -13px; display: none; } &:after{ position: absolute; content: ''; display: block; width: 10px; height: 15px; background: #b75248; left: -10px; bottom: 10%; border-radius: 10px 0 0 0; } &:before{ position: absolute; content: ''; display: block; width: 10px; height: 15px; background: #b75248; right: -10px; bottom: 10%; border-radius: 0px 10px 0 0; } .base{ &:after{ content: ''; display: block; position: absolute; width: 4px; height: 13px; background: #444; bottom: -12px; left: 2px; transform-origin: bottom; transform: rotateZ(20deg); border-radius: 10px; } &:before{ content: ''; display: block; position: absolute; width: 4px; height: 13px; background: #444; bottom: -12px; right: 2px; transform-origin: bottom; transform: rotateZ(-20deg); border-radius: 10px; } } } .clouds{ position: absolute; background: white; left: -100px; border-radius: 50px; box-shadow: inset 0 10px 25px rgba(0,0,0,0.05); } .clouds1{ width: 105px; height: 60px; top: 40px; animation: clouds 15s linear infinite; z-index: 5; } .clouds2{ width: 80px; height: 40px; top: 80px; animation: clouds 11s linear infinite; z-index: 2; } .clouds3{ width: 90px; height: 20px; top: 140px; animation: clouds 9s ease-in-out infinite; z-index: 200; } .fog{ position: absolute; width: 85px; height: 8px; background: rgba(255,255,255,0.4); right: 70px; bottom: 180px; border-radius: 50px; animation: fog 5s ease-in-out infinite alternate; &:after{ content: ''; position: absolute; width: 60px; height: 8px; background: rgba(255,255,255,0.6); left: 50px; bottom: 35px; border-radius: 50px; animation: fog 3s ease-in-out infinite alternate; } } } .smoke-container{ position: absolute; width: 38px; height: 70px; bottom: 60px; margin: 10px auto; left: 0; right: 0; transform-origin: center center; z-index: 5; } .smoke{ position: absolute; width: 15px; height: 15px; background: rgba(174, 194, 204, 0.2); border: 2px solid rgba(0,0,0,0.009); box-sizing: border-box; animation: smoke 1s forwards; border-radius: 50%; bottom: -30px; margin: auto; left: 0; right: 0; } .explosion-animation{ animation: explosion 2s forwards; } .danger{ animation: danger 0.5s infinite; } @keyframes smoke{ 0%{ opacity: 1; } 100%{ opacity: 0; } } @keyframes fog{ 0%{ transform: translateX(20px); } 100%{ transform: translateX(-20px); } } @keyframes clouds{ 0%{ transform: translateX(0px); } 100%{ transform: translateX(600px); } } @keyframes explosion{ 0%{ transform: scale(0); opacity: 0; } 10%{ opacity: 1; } 20%{ transform: scale(1); } 40%{ transform: scale(0.4); visibility: hidden; } 60%{ transform: scale(1.2); visibility: visible; } 80%{ transform: scale(0.8); } 100%{ transform: scale(0); } } @keyframes danger{ 0%{ color: rgba(255,0,0,0.1); } 100%{ color: rgba(255,0,0,1); } }
JAVASCRIPT
var nextx = 0; var nexty = 0; var velX = 0; var velY = 0; var rax; var acce = 0; var dirl = 0; var dirr = 0; var smoke = 0; class Cube{ constructor(x, y){ this.velx = 0; this.vely = 0; this.x = x; this.y = y; this.rotation = 0; } draw(newx, newy){ this.x = newx; this.y = newy; $(".rocket").css({transform: 'translate('+ this.x +'px,' + this.y + 'px) rotateZ('+ this.rotation +'deg)'}); } rotate(dir){ this.rotation += dir; $(".rocket").css({transform: 'translate('+ this.x +'px,' + this.y + 'px) rotateZ('+ this.rotation +'deg);'}); } graphicsUpdate(){ $(".speed").text(Math.floor(Math.abs(this.vely) * 200) + ""); //$(".altitude").text(Math.floor(Math.abs(this.y) * 20) + " m"); if(Math.floor(this.y) < 0){ $(".bussola").css("transform", "rotateZ(" + Math.atan(this.x/this.y) * (-50) + "deg)"); }else{ $(".bussola").css("transform", "rotateZ(" + Math.atan(this.x/this.y) * (50) + "deg)"); } } } function init(){ rax = new Cube(0, 0); rax.draw(0,0); nextx = 0; nexty = 0; } function loop(){ nextx -= rax.velx*2; nexty -= rax.vely*2; if(rax.y <= 0){ rax.vely -= 0.0003; if(rax.vely * 200 < -40){ $(".toofast i").addClass("danger"); }else{ $(".toofast i").removeClass("danger"); } }else{ if(nexty >= 0 && Math.abs(rax.vely) * 200 > 40){ $(".rocket").hide(); $(".explosion").show().addClass("explosion-animation"); setTimeout(function(){ init(); $(".rocket").show(); $(".explosion").hide().removeClass("explosion-animation"); },1900); } rax.vely = 0; rax.velx = 0; nexty = 0; } if(rax.vely < 2 && rax.velx < 2 && acce){ smoke++; var dim = Math.floor((Math.random() * 20) + 8); if(smoke % 3 == 0){ $(".container").append("<span class='smoke-container' style=\"transform: translate(" + (rax.x) + "px, " + rax.y + "px) rotateZ(" + rax.rotation + "deg)\"><span class='smoke' style=\"left: -45px; width: "+ dim + "px; height: " + dim + "px\"></span><span class='smoke' style=\"right: -45px; width: "+ dim + "px; height: " + dim + "px\"></span></span>"); } rax.vely += Math.cos((rax.rotation % 360) * Math.PI/180) * 0.0012; rax.velx += -Math.sin((rax.rotation % 360) * Math.PI/180) * 0.0012; } if(dirl && rax.y <= -5){ rax.velx += -0.00002; rax.rotate(-1); } if(dirr && rax.y <= -5){ rax.velx += 0.00002; rax.rotate(1); } rax.draw(nextx, nexty); rax.graphicsUpdate(); setTimeout(loop, 1); } init(); loop(); var map = {37: false, 39: false}; $(document).keydown(function(e) { if (e.keyCode in map) { map[e.keyCode] = true; if (map[37] && map[39]) { acce = 1; dirl = 0; dirr = 0; $(".flame-left").show(); $(".flame-right").show(); }else if(map[37] && !map[39]){ dirl = 1; $(".flame-left").show(); }else{ dirr = 1; $(".flame-right").show(); } } }).keyup(function(e) { if (e.keyCode in map) { map[e.keyCode] = false; acce = 0; dirl = 0; dirr = 0; $(".flame-left").hide(); $(".flame-right").hide(); setTimeout(function(){ $(".smoke-container").remove(); }, 600) } });
Expand for more options Login