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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>
<div class="scanlines"></div>
<div class = "container"  >
  
  <div id="bg-image" ></div>
  <div id="wrapper" >
    
    <header ><h1>ASTEROIDS</h1></header>
<!--     MAIN MENU SECTION -->
    <div class= "menu" id="main">
      <ul>
        <li><a class="flash">START</a></li>
        <li><a>CONTROLS</a></li>
        <li><a>ABOUT</a></li>
      </ul>
      <footer ><p>1979-2017 TRIBUTE BY <a target="_blank" href="https://codepen.io/zlotousty">ZLOTOUSTY</a></p></footer>
    </div>
<!--     CONTROLS SECTION -->
    <div class= "menu" id ="controls">
      <ul>
        <li>ARROWS - STEERING</li>
        <li>SPACE BAR - LASER</li>
        <li>CONTROL - MISSILE</li>
        <li><a class="flash" >BACK</a></li>
      </ul>
    </div>
 <!--     ABOUT SECTION -->
    <div class= "menu" id ="about">
      <ul>
        <li id = "description">Asteroids is an arcade space shooter released in November 1979 by Atari, Inc. and designed by Lyle Rains, Ed Logg, and Dominic Walsh. The player controls a spaceship in an asteroid field which is periodically traversed by flying saucers. The object of the game is to shoot and destroy asteroids and saucers while not colliding with either or being hit by the saucers' counter-fire. The game becomes harder as the number of asteroids increases.</li>
        <li><a class="flash">BACK</a></li>
      </ul>
    </div>
<!--     GAME OVER / RETRY -->
    
  </div>  
<!--   GAME SECTION -->
  <div id="game">
  <div id="score"></div>
  <div class= "menu" id ="gameOver">
    <ul>
      <li><h1>GAME OVER<h1></li>
      <li id = "finalScore"></li>
      <li><a class="flash">MENU</a></li>
    </ul>
  </div>
  </div>
</div>
              
            
!

CSS

              
                body {
  background-color: black;
  font-family: 'Press Start 2P', cursive;
  color: white;
}

.container {

  margin: 0 auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 68px;
  width: 900px;
  min-width: 900px;
  height: 600px;
  border: 8px dashed white;
}

#bg-image {
  position: fixed;
  top: 76px;
  width: 900px;
  height: 600px;
  background-image: url('https://waitingforison.files.wordpress.com/2013/10/asteroids2.jpg');
  z-index: 1;
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  -o-filter: blur(2px);
  filter: blur(2px);
/*   ADJUST IT LATER !! */
/*   background-size: 50% 50%; */
  transition: all 8s ;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

#wrapper {
  width: 900px;
  min-width: 900px;
  margin: 0 auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 68px;
  z-index: 5;
  transition: all 8s ease;
}
header {
  width: 600px;
  margin: 0 auto 60px auto;
  border-bottom: 4px solid white;
}
h1 {
  font-size: 68px;
  text-align: center;
  text-shadow: 5px 5px  #AA0114;
  
}
.menu {
  margin: 30px auto 0 auto;
  width: 100%;
}

#main {
  display: initial;
}
#controls {
  display: none;
}
#about {
  width: 800px;
  margin: 0 auto;
  text-align: center;
  display: none;
}
#game {
  height: 100%;
  width: 100%;
}
#score {
  position: fixed;
  font-size: 32px;
  top: 68px;
  padding: 24px 0 0 20px;
}
#finalScore {
  font-size: 90px;
  padding-bottom: 150px;
}
#gameOver {
  display: none;
  background-color: transparent;
  height: 100%;
  width: 100%;
  position: absolute;
}
ul {
  list-style-type: none;
}

ul li {
  width: 100%;
  float: left;
  font-size: 32px;
  text-align: center;
  padding-bottom: 60px;
}

#description {
  font-size: 20px;
  padding-bottom: 38px;
}

footer {
  float: right;
  margin: 28px 40px 0 0;
  height: 100px;
}
footer a:hover {
  cursor: pointer;
  color: #AA0114;
}

a {
  text-decoration: none !important;
  color: white;
}


.flash {
  animation-name: flash;
	animation-duration: 1s;
	animation-timing-function: step-end;
	animation-iteration-count: infinite;
}


@keyframes flash {
  0% { background-color: white; 
       color: #AA0114;
  }
    50% { background-color: initial; 
          color: white;
  }
}



.scanlines {
  pointer-events: none;
  width: 135%;
  height: 135%;
  position: fixed;
  left: -10%;
  top: -10%;
  z-index: 7;

  background: -webkit-repeating-linear-gradient(
    top,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.55) 0px,
    rgba(0,0,0,0.15) 4px
  );
  -webkit-background-size: 100% 4px;

  background: -moz-repeating-linear-gradient(
    top,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.55) 0px,
    rgba(0,0,0,0.15) 4px
  );
  -moz-background-size: 100% 4px;
}

canvas {
  filter: url(#goo)
}
              
            
!

JS

              
                var started = false;
var gameIsOver = false;
// NAVIGATION WITH KEYS

var currentPos = 0; //pos 0-start, 1-controls etc..
var mainPage = true; // says if view is on the main page
var pages = ["main", "controls", "about"];
var anchorLinks = $('a');
$(window).keydown(function(e){
  if (!started){
		switch(e.which){
			case 40:
        if (mainPage){
          if (currentPos<2){
            anchorLinks.eq(currentPos).removeClass('flash');
            currentPos+=1;
            anchorLinks.eq(currentPos).addClass('flash');
          } else {
            anchorLinks.eq(currentPos).removeClass('flash');
            currentPos = 0;
            anchorLinks.eq(currentPos).addClass('flash');
          }
          break;
        }  
			case 38:
        if (mainPage){
          if (currentPos>0){
            anchorLinks.eq(currentPos).removeClass('flash');
            currentPos-=1;
            anchorLinks.eq(currentPos).addClass('flash');
          } else {
            anchorLinks.eq(currentPos).removeClass('flash');
            currentPos = 2;
            anchorLinks.eq(currentPos).addClass('flash');
          }
          break;
        }  
      case 13:
      case 32:
        if (mainPage){
          if (currentPos == 0) {
            game();
          } else if (currentPos == 1) {
            changeSection('main', pages[currentPos]);
            mainPage = false;
          } else if (currentPos == 2) {
            changeSection('main', pages[currentPos]);
            mainPage = false;
          }
        } else {
          changeSection(pages[currentPos], 'main');
          mainPage = true;
        }  
		}
  } else if (gameIsOver) {
    document.getElementById("main").style.display = "initial";
    document.getElementById("wrapper").style.display = "initial";
    document.getElementById("bg-image").style.display = "initial";
    document.getElementById("gameOver").style.display = "none";
    started = false;
    gameIsOver = false;
    background(0);
    resetGame();
  }
});



function changeSection(from, to) {
  document.getElementById(from).style.display = "none";
  document.getElementById(to).style.display = "initial";
}


function gameOver() {
  document.getElementById("gameOver").style.display = "initial";
  $('#score').text('');
  $('#finalScore').text(score);
  gameIsOver = true;

}

function game(){
    document.getElementById("main").style.display = "none";
    document.getElementById("wrapper").style.display = "none";
    document.getElementById("bg-image").style.display = "none";
    // document.getElementById("bg-image").style.backgroundPosition = "center center";
    // document.getElementById("bg-image").style.opacity = "0";
    
    started = true;
    // loop();
}
// P5 GAME CODE



var ship;
var jet;
var score;
var asteroids;
var laserBeams;
var explosions;
var missiles;
var crashed;

function resetGame() {
  score = 0;
  crashed = false;
  ship = new Ship();
  jet = new Jet(ship.pos);
  asteroids = [];
  laserBeams = [];
  explosions = [];
  missiles = [];
  for (var i = 0; i < 5; i++) {
  	asteroids.push(new Asteroid());
  }
  stars = new Stars();
}

function setup() { 
  var canvas = createCanvas(900, 600);
  canvas.parent('game');
  resetGame();
  // noLoop();
} 

function draw() { 
  if(started){
    background(0, 160);
    stars.show();
    for (var i = 0; i < asteroids.length; i++) {
      asteroids[i].update();
      asteroids[i].show();
      if (!crashed && ship.hit(asteroids[i])) {
        crashed = true;
        explosions.push(new Explosion(true, ship.pos));
        // document.getElementById("main").style.display = "initial";
        
      }
    }
    for (var j = 0; j < laserBeams.length; j++) {
      laserBeams[j].update();
      laserBeams[j].show();
      var flag = false;
      for (var i = asteroids.length-1; i >-1; i--) {
        if(laserBeams[j].hit(asteroids[i])) {
          score += asteroids[i].r * 100;
          explosions.push(new Explosion(true, asteroids[i].pos));
          asteroids[i].break();
          asteroids.splice(i,1);
          laserBeams.splice(j,1);
          j--;
          flag = true;
          break;
        }
      }
      if (flag == false && laserBeams[j].edges()) {
        laserBeams.splice(j,1);
        j--;
      }
    }
    for (var k = 0; k < explosions.length; k++) {
      explosions[k].update();
      explosions[k].show();
      if (explosions[k].particles.length == 0) {
        explosions.splice(k, 1);
        k--;
      }
    }
    for (var l = 0; l< missiles.length; l++) {
      missiles[l].getTarget();
      missiles[l].update();
      missiles[l].show();
      if (missiles[l].gotToCenter) {
        explosions.push(new Explosion(true, asteroids[missiles[l].targetIndex].pos, true));
        score += asteroids[missiles[l].targetIndex].r * 100;
        asteroids[missiles[l].targetIndex].break();
        asteroids.splice(missiles[l].targetIndex,1);
        missiles.splice(l,1);
        l--;

      }
    }
    jet.update();
    jet.show();
    ship.update();
    ship.show();
    $('#score').text(score);
    if (explosions.length == 0 && crashed &&
       missiles.length == 0 && laserBeams.length == 0){
      gameOver();
    }
  }
}

function Stars (pos) {
  this.stars = [];
  this.starsSz = [];
  
  for (var i = 0 ; i < 200; i++) {
  	this.stars.push(new p5.Vector(Math.floor(random(0, width)),Math.floor(random(0, height))));
    this.starsSz.push(random(2,4));
  }
  
  this.show = function () {
  	for (var i = 0 ; i< this.stars.length; i++) {
    	fill(80, 80, 100, 255);
      if (random() < 0.002) {
      	ellipse(this.stars[i].x, this.stars[i].y, this.starsSz[i]+4);
      } else {
      	ellipse(this.stars[i].x, this.stars[i].y, this.starsSz[i]);
      }	
    }
  }
}


function Missile(pos, heading) {
	this.pos = pos.copy();
  this.heading = heading;
  this.targetFound = false;
  this.targetIndex = NaN;
  this.vel =  p5.Vector.fromAngle(ship.heading).mult(25);
  this.strength =0.8;
  this.gravityConstant = 300;
  this.gotToCenter = false;
  this.crosshairVisibility = 1;
  this.getTarget = function() {
  	if (this.targetFound == false) {
      var smallestDif = 40000;
      for (var i = 0; i < asteroids.length; i++) {
        
        //trzeba poprawic, problem z przypadkiem gdy statek ma np 359* a asteroida 5* (roznica daje 354, a powinna 6)
        push();
				translate(ship.pos.x, ship.pos.y);
        // ellipse(asteroids[i].pos.x- ship.pos.x, asteroids[i].pos.y- ship.pos.y, 20);
        var a = atan2( asteroids[i].pos.y- ship.pos.y, asteroids[i].pos.x- ship.pos.x);
        var deg = (Math.floor(ship.heading * 180 / PI) + 360) % 360;
        var dega =(Math.floor(a * 180 / PI) + 360) % 360;
        pop();
        var difference  = Math.abs(deg  - dega);
        console.log(difference);
        if (difference < smallestDif) {
        	smallestDif = difference;
          this.targetIndex = i;
        }
      }
      this.targetFound = true;
      // this.pos = ship.pos.copy();
      // this.heading = ship.heading;
      // this.vel =  p5.Vector.fromAngle(ship.heading - PI / 2).mult(25);

    }
  }
  
  this.update = function() {
  	if (this.targetFound && !this.gotToCenter) {
      var dir = p5.Vector.sub(asteroids[this.targetIndex].pos, this.pos);
      dir.setMag(this.strength);
			this.vel.add(dir);
      this.vel.mult(0.94);
      this.pos.add(this.vel);
      if (this.pos.dist(asteroids[this.targetIndex].pos) < asteroids[this.targetIndex].r * 0.5) {
        this.gotToCenter = true;
      }
    }
  }
  
  this.show = function () {
  	if (this.targetFound) {
      push();
      fill(250,20,20)
    	ellipse(this.pos.x, this.pos.y, 10);
			
      if (frameCount % 20 == 0) {
      	this.crosshairVisibility *= -1;
      }
      if (this.crosshairVisibility ==1) {
        noFill();
      	stroke(255,0,0, 120);
      	strokeWeight(3)
      	var ax = asteroids[this.targetIndex].pos.x;
      	var ay = asteroids[this.targetIndex].pos.y;
      	ellipse(ax, ay, 50);
      	ellipse(ax, ay, 30);
      // line(ax, ay-30, ax, ay + 30);
      // line(ax-30, ay, ax + 30, ay);
      	push();
      	translate(ax,ay);
      	rotate(asteroids[this.targetIndex].heading);
      	line(0, 0-30, 0, 0 + 30);
        line(0-30, 0, 0 + 30, 0);
      	pop();
        pop();
      }
      
			
    }
  }
}

function Explosion(explosion, pos, missile) {
  this.pos = pos.copy();
  if (explosion){
  	this.particles = [];
    if (missile) {
    	this.particlesNumber = 200;
      this.col = [Math.floor(random(255)),Math.floor(random(255)),Math.floor(random(255))];
    } else if (this.pos.x == ship.pos.x && this.pos.y == ship.pos.y) {
      this.particlesNumber = 300;
      this.col = [170, 1, 20];
    } else {
    	this.particlesNumber = 100;
      this.col = [255, 255, 255];
    }
    for (var i = 0; i < this.particlesNumber; i++) {
      this.particles.push(new Explosion(false, this.pos.copy(), missile));
    }
  } else {
    this.vel = p5.Vector.random2D().mult(random(-15,15));
    this.lifespan = random(150, 220);
    this.sz = Math.floor(random(4,8));
  }

	this.update = function() {
  	for (var i = 0; i < this.particles.length; i++) {
    	this.particles[i].pos.add(this.particles[i].vel);
      this.particles[i].lifespan -=25;
      if (this.particles[i].lifespan < 0) {
      	this.particles.splice(i, 1);
        i--;
      }
    }
  }
  	
  this.show = function () {
    
    push()
  		for (var i = 0; i < this.particles.length; i++) {
      	if (random()<0.2) {
          if (!missile && !crashed) {
          	fill(this.col);
          } else {
          	fill(Math.floor(random(255)),Math.floor(random(255)),Math.floor(random(255)));
          }
      	} else {
          	fill(this.col[0], this.col[1], this.col[2], this.particles[i].lifespan)
      	}
    		ellipse(this.particles[i].pos.x, this.particles[i].pos.y, this.particles[i].sz)
    	}
    pop();
  }
}
function Laser(pos, heading) {
	this.pos = pos.copy();
  this.heading = heading;
  this.vel = p5.Vector.fromAngle(this.heading).mult(8);
  this.rocket =
  this.update = function() {
    this.pos.add(this.vel);
  }
  this.show = function() {
    push();
    strokeWeight(4);
    stroke(255,20,20,255);
    point(this.pos.x, this.pos.y);
    pop();
  }
  this.hit = function(asteroid) {
  	if (this.pos.dist(asteroid.pos) < asteroid.r) {
    	return true;
    }
  }
  this.edges = function() {
  	if (this.pos.x > width ||
        this.pos.x < 0 ||
        this.pos.y > height ||
        this.pos.y < 0) {
    	return true;
    } else {
    	return false;
    }
  }
}
function Asteroid(r, pos, vel) {
  this.col = [Math.floor(random(255)),Math.floor(random(255)),Math.floor(random(255))];
  if (pos) {
    this.pos = pos.copy();
    this.r = r;
    this.vel = vel;
  } else {
    if (random()>0.5){
      //horizontal
      if(random()>0.5){
        this.pos = createVector(-100, random(height));
      } else {
        this.pos = createVector(width + 100, random(height));
      }  
    } else {
      //horizontal
      if(random()>0.5){
        this.pos = createVector(random(width), -100);
      } else {
        this.pos = createVector(random(width), height + 100);
      }  
    }
    this.r = Math.floor(random(40,90));
    this.vel = p5.Vector.random2D().mult(Math.floor(random(1,2)));
  }
  
  this.rotation = random(-PI/30, PI/30);
  this.heading = 0;
  this.total = [];
  this.pts = Math.floor(random(5,20));
  for (var i = 0; i < this.pts; i++){
  	this.total.push(Math.floor(random(this.r / 8,this.r / 2)));
  }
  
  this.show = function() {
    push();
    fill(0);
    if (!gameIsOver){
      stroke(255);
    } else {
      stroke(this.col[0],this.col[1],this.col[2], 180)
      if (frameCount % 40 == 0) {
        this.col = [Math.floor(random(255)),Math.floor(random(255)),Math.floor(random(255))];
      } 
    }
    
    strokeWeight(3)
    beginShape();
    
  	for (var i = 0; i < this.pts; i++) {
    	var angle = map(i, 0, this.pts, 0, TWO_PI);
      var x = (this.r-this.total[i])*cos(this.heading+angle);
      var y = (this.r-this.total[i])*sin(this.heading+angle);
      vertex(this.pos.x + x, this.pos.y + y)
    }
    endShape(CLOSE);
    pop();
  }
  this.update = function() {
  	this.pos.add(this.vel);
    this.heading += this.rotation;
    this.edges();
  }
  
  this.break = function() {
    var newR = Math.floor(this.r / 2);
    var newPos = this.pos;
    var newVelOne = this.vel.copy();
    var newVelTwo = this.vel.copy();
    newVelOne.rotate(PI/4)
    newVelTwo.rotate(-PI/4)
    if (newR > 10) {
      asteroids.push(new Asteroid(newR, newPos, newVelOne));
      asteroids.push(new Asteroid(newR, newPos, newVelTwo));
    } else if (random() < 0.4){
      asteroids.push(new Asteroid());
    }
    	// asteroids.splice(i,1); 	
  }
  this.edges = function () {
  	if (this.pos.x>width+this.r) {
    	this.pos.x = 0-this.r;
    } else if (this.pos.x<0-this.r) {
    	this.pos.x = width+this.r;
    } else if (this.pos.y<0-this.r) {
    	this.pos.y = height+this.r;
    } else if (this.pos.y>height+this.r) {
    	this.pos.y = 0-this.r;
    }
  }
}
function Jet(){
	this.pos = ship.pos.copy();
  this.vel = createVector(0,0);
  this.particles = [];
  this.lifespan = 255;
  this.adding = false;
  
  this.set = function() {
    	if (this.adding && !crashed) {
      	this.particles.unshift(new Jet())
        this.particles.unshift(new Jet())
      } 	  
  }
  this.update = function() {
    this.set();
  	for (var i = this.particles.length-1; i>-1; i--) {
    	if (this.particles[i].lifespan <=0) {
      	this.particles.splice(i,1);
      } else {
        this.particles[i].lifespan -=15;
        var force = p5.Vector.fromAngle(ship.heading + PI + random(-1,1)).mult(0.9);
        this.particles[i].vel.add(force);
        this.particles[i].pos.add(this.particles[i].vel);
      }
    }
  }
  this.show = function() {
    push();
  	for (var i =0; i < this.particles.length; i++) {
    	fill(255,250,255,this.particles[i].lifespan);
      noStroke();
      ellipse(this.particles[i].pos.x, this.particles[i].pos.y, 4)
    }
    pop();
  }
  
}
function Ship() {
	this.pos = createVector(width/2, height/2);
  this.r = 10;
  this.heading = 0;
  this.rotation = 0;
  this.vel = createVector(0,0);
  this.isBoosting = false;
  this.laserLife = 255;
  this.boosting = function(b) {
  	this.isBoosting = b;
  }
  
  this.update = function() {
    if (frameCount % 10 == 0) {
    	this.laserLife += 10; 
			this.laserLife = constrain(this.laserLife, 0, 255)
    }
  	this.turn();
    this.edges();
    if (this.isBoosting) {
    	this.boost();
    }
    this.vel.mult(0.99);
    this.pos.add(this.vel);
  }
  
  this.show = function () {
    if (!crashed){
      push();
      translate(this.pos.x, this.pos.y);
      rotate(this.heading);
      fill(170, 1, 20, 255 - this.laserLife);
      strokeWeight(3);
      stroke(170, 1, 20, 220);
      triangle(0,-this.r, 0, this.r , this.r*2,  0);
      pop();
    }
    
  }
  
  this.edges = function () {
  	if (this.pos.x>width+this.r) {
    	this.pos.x = 0-this.r;
    } else if (this.pos.x<0-this.r) {
    	this.pos.x = width+this.r;
    } else if (this.pos.y<0-this.r) {
    	this.pos.y = height+this.r;
    } else if (this.pos.y>height+this.r) {
    	this.pos.y = 0-this.r;
    }
  }
  this.boost = function() {
    var force = p5.Vector.fromAngle(this.heading).mult(0.1);
  	this.vel.add(force);
  }
  
  this.turn = function(angle) {
  	this.heading += this.rotation;
    if (Math.abs(this.heading) >= TWO_PI) {
      if (this.heading > 0) {
      	this.heading -= TWO_PI;
      } else {
      	this.heading += TWO_PI;
      }
    	
    }
  }
  this.setRotation = function(angle) {
  	this.rotation = angle;
  }
  this.hit = function(asteroid) {
  	if (this.pos.dist(asteroid.pos) < 0.9 * asteroid.r) {
    	return true;
    }
  }
}

function keyPressed() {
  if (!crashed) {
    if (keyCode == LEFT_ARROW) {
      ship.setRotation(-PI / 45)
    } else if (keyCode == RIGHT_ARROW) {
      ship.setRotation(PI / 45);
    } else if (keyCode == UP_ARROW) {
      ship.boosting(true);
      jet.adding = true;
    } else if (key == ' ' && ship.laserLife > 50) {
      laserBeams.push(new Laser(ship.pos, ship.heading));
      ship.laserLife -= 30;
    } else if (keyCode == CONTROL) {
      if (missiles.length ==0) {
        missiles.push(new Missile(ship.pos, ship.heading));
      }
    }    
  }
}

function keyReleased() {
	
  if (!keyIsDown(UP_ARROW)) {
  	ship.boosting(false)
    jet.adding = false;
  }
  if (key != ' '){
  	ship.setRotation(0);
  }
}


              
            
!
999px

Console