Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id='console'>
  <div id='building_box_top' class='building_box'></div>
  <div id='road'>
    <div id='automobile' class=''></div>
  </div> 
  <div id='fence'></div>
  <div id='nighttime'></div>
  <div id='score'>0</div>
  <div id='start_btn'>
    <img src='https://contentservice.mc.reyrey.net/image_v1.0.0/?id=77d9dcb2-a39f-5654-b4d2-d6df8ac1c546&637383812795706078' alt="Out of Control"/>
    <div>When your aligment is out-of-whack, bad things can happen.
      <br><br><br>
      <strong>TAP TO START & PLAY</strong>        
    </div>
  </div>
</div>

<audio id="myAudio" preload='auto' autoplay loop>
  <source src="http://contentservice.mc.reyrey.net/audio_v1.0.0/?id=8bb4d4c4-1b05-5e93-ab51-f5495efc96b9" type="audio/mpeg">
</audio>

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,300,500,700,900&display=swap" rel="stylesheet">
              
            
!

CSS

              
                :root {
  --car:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=489c9c69-8c12-564e-88bd-7c4fedc1fb34&637383613035935265');
  --bus:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=8aa6e19d-a1a7-555f-aa5c-68cf3eb83caf&637383613329844917');
  --scooter:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=e5cc505a-20af-50fb-89d3-9b6deaf7577d&637384611631246715');
  --city:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=e61e51e1-cc90-5c94-a4d1-b98a77776942&637383702193853809');
  --clouds:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=6d512b35-727c-5a17-9e09-287d8c4b4abe&637383702443770615');
  --broken:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=545f4733-f44d-5f02-8d50-08e54c06a041&637383725331302753');
  --opening:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=d3176659-07eb-5c56-a65c-c13cc8e74eba&637383819620032185');
  --logo:url('https://contentservice.mc.reyrey.net/image_v1.0.0/?id=7f8ab3d9-90e3-5502-9a14-b811d60f61e0&637383811403214482');
}

body {
  margin:0;
  padding:0;
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  text-align:center;
  background:dodgerblue;
}
body:after {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  background:var(--clouds), dodgerblue;
  background-size:cover;
  background-position:50% 50%;
  filter:blur(5px);
}
#console {
  width:320px;
  height:480px;
  margin:100px auto;
  position:relative;
  overflow:hidden;
  background:var(--clouds), linear-gradient(to bottom, dodgerblue 50%, mediumseagreen 50%);
  background-repeat:no-repeat, no-repeat;
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family:'Montserrat', sans-serif;
  font-weight:300;
  text-align:center;
  border-radius:5px;
  box-shadow:0 0 0 1px black;
}

#score {
  position:absolute;
  right:10px;
  top:10px;  
  z-index:999999;
  pointer-events:none;
  user-select:none;
}

#nighttime {
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:navy;
  mix-blend-mode:overlay;
  z-index:99;
  pointer-events:none;
  opacity:0;
  transition:2s;
}

.goodnight {
  opacity:1 !important;
}

#fence {
  width:100%;
  height:35px;
  background:linear-gradient(to bottom, transparent 5px, saddlebrown 5px, #410 10px, transparent 10px, transparent 25px, saddlebrown 25px, #410 30px, transparent 30px), linear-gradient(to right, transparent 5px, #410 5px, saddlebrown 10px, transparent 10px, transparent 60px, #410 60px, saddlebrown 65px, transparent 65px);
  background-size:35px 70px;
  background-position:0 0;
  position:absolute;
  transform:translateY(-25%);
  animation:fence 2s linear infinite;
  z-index:99;
}
@keyframes fence {
  100% { background-position:-100% 0; }
}

#start_btn {
  width:100%;
  height:100%;
  font-size:20px;
  padding:25px 10px;
  box-sizing:border-box;
  background:var(--opening);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:99999;
  cursor:pointer;
  user-select:none;
  font-size:16px;
  color:white;
/*     display:none; */
}
#start_btn img {
  margin-top:20px;
}

#start_btn div {
  position:absolute;
  top:262px;
  text-align:right;
  padding-right:20px;
}

#road {
  width:100%;
  height:150px;
  background-color:#555;
  background-size:320px 75px;
  background-position:0 0;
  position:relative;
  outline:10px solid lightgray;
}
#road:before {
  content:'';
  width:100%;
  height:36%;  
  position:absolute;
  top:29%;
  left:0;
  border-top:3px dashed gray;
  border-bottom:3px dashed gray;
/*   display:none; */
}

#automobile {
  width:50px;
  height:28px;
  background:var(--broken); 
  background-position:0 0;
  background-size:50px 113px;
  position:absolute;
  left:50px;
  top:61px;
  z-index:9;
  animation:car .5s linear infinite;
  user-select:none;
}
@keyframes car {
  50% { transform:scaleY(1.15); }
}

.broken {  
  animation:broken .75s steps(3) forwards !important;
}
@keyframes broken {
  0% { background-position:0 0px; }
  100% { background-position:0 -86px; }
}

.night:after {
  content:'';
  width:300%;
  height:150%;
  background:linear-gradient(to right, rgba(255,255,255,.85), transparent);
  clip-path:polygon(0px 22px, 0px 18px, 100% 0px, 100% 100%);
  position:absolute;
  left:100%;
  transform:skewY(-5deg) translateY(-7px);
}

.parkedCar {
  background-size:contain;
  position:absolute;
  transform:translateY(-50%);
  animation:parked 6s linear forwards;
  user-select:none;
}
@keyframes parked {
  0% { left:100%; }
  100% { left:-80px; }
}
.car {
  background:var(--car);
  width:50px;
  height:28px; 
  animation-duration:4s;
}
.bus {
  background:var(--bus);
  width:75px;
  height:36px;
  animation-duration:4s;
}
.scooter {
  background:var(--scooter);
  width:30px;
  height:23px;
  animation-duration:4s;
}
.building_box {
  width:100%;
  height:250px;
  position:relative;
  text-align:left;
  background:var(--city);
  background-position:0 90%;
  background-repeat:repeat-x;
  background-size:200% auto;
  /*   outline:2px solid green; */
  animation:moveBuildings 15s linear infinite;
  user-select:none;
}
@keyframes moveBuildings {
  100% { background-position:200% 90%; }
}
              
            
!

JS

              
                const car = document.querySelector('#automobile')
const start_btn = document.querySelector('#start_btn')
const console = document.querySelector('#console')
const road = document.querySelector('#road')
const nt = document.querySelector('#nighttime')
const audio = document.querySelector('#myAudio')
var score = 0
var car_top = 61
var dead_top = -10
var dead_bottom = 127
var alignment_power = 3 //gravity essentially
var alignment_correction = 3 // upward thrust
var drop_rate = 1750 // rate obstacles get added
var dead = false
var press = false

audio.volume = .05

function moveCar() {
  function death() {
    car.classList.toggle('broken')
    dead = true          
    var cars = document.querySelectorAll('.parkedCar')
    cars.forEach(function(elm){
      elm.remove()
    })
    setTimeout(function(){
      start_btn.style.display = ''  
    },1250)
  }

  if(!dead){
    if(press) {
      if(car_top > dead_top) {
        car_top = car_top - alignment_correction    
      } else {
        car_top = dead_top
        death()
      }
      car.style.top = car_top + 'px' 
    } else {
      if(car_top < dead_bottom) {
        car_top = car_top + alignment_power    
      } else {
        car_top = dead_bottom  
        death()
      }
      car.style.top = car_top + 'px'  
    }

    // collision detection
    var car_loc = car.getBoundingClientRect()
    function checkForHits() {
      var parked = document.querySelectorAll('.parkedCar')
      parked.forEach(function(elm){
        var elm_deets = elm.getBoundingClientRect()
        var ouch = !(elm_deets.right - 10 < car_loc.left + 10 || 
                     elm_deets.left + 7 > car_loc.right || 
                     elm_deets.bottom - 7 < car_loc.top || 
                     elm_deets.top + 7 > car_loc.bottom)        
        if(ouch) {
          death()
        }

        var points = (elm_deets.right < car_loc.left - 50)
        if(points) {
          if(!dead){
            score++
            document.querySelector('#score').innerHTML = score
            elm.remove()
            if(score % 20 === 0) {
              car.classList.toggle('night')
              nt.classList.toggle('goodnight')
            }  
          }
        }
      })
    }
    checkForHits()
    setTimeout(moveCar, 1000/30)
  }    
}

var vehicles = ['bus','car','scooter']
var locs = ['20,75','75,125','20,125']

function parkedCar() {
  if(!dead) {   
    var veh_num = Math.floor(Math.random()*3)
    var veh_numm = Math.floor(Math.random()*3)
    var loc_num = Math.random() < .25 ? 2 : Math.floor(Math.random()*2)

    var pc = document.createElement('div')
    pc.className = 'parkedCar' 
    pc.classList.add(vehicles[veh_num])
    pc.style.top = locs[loc_num].split(',')[0] + 'px'
    pc.style.filter = 'hue-rotate('+Math.random()*360+'deg)' 

    var pcc = document.createElement('div')
    pcc.className = 'parkedCar' 
    pcc.classList.add(vehicles[veh_num])
    pcc.style.top = locs[loc_num].split(',')[1] + 'px' 
    pcc.style.filter = 'hue-rotate('+Math.random()*360+'deg)' 

    road.appendChild(pc) 
    road.appendChild(pcc) 

    setTimeout(parkedCar, drop_rate)
  }  
}

start_btn.addEventListener('click', function(){
  score = 0
  document.querySelector('#score').innerHTML = score
  car_top = 61
  start_btn.style.display = 'none'
  audio.play()

  if(document.querySelector('.night')){
    car.classList.toggle('night')
    document.querySelector('#nighttime').classList.toggle('goodnight')  
  }  
  if(document.querySelector('.broken')){
    car.classList.toggle('broken')
  }
  dead = false
  moveCar()
  parkedCar()  
})

window.addEventListener('mousedown', function(e){
  press = true
})
window.addEventListener('mouseup', function(e){
  press = false
})
window.addEventListener('touchstart', function(e){
  press = true
})
window.addEventListener('touchend', function(e){
  press = false
})
console.addEventListener("contextmenu", function (e) {
  e.preventDefault();
}, false);
              
            
!
999px

Console