An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Secret Sam on CodePen.

License.

index.html

<h2>Space Invaders</h2>
<canvas id="game-canvas" class="canvas" width="500" height="500"></canvas>

<ul class="controls">
  <li>Left & right arrows to move</li>
  <li>Space to shoot</li>
</ul>

script.js

(function() {
  
  var canvas, ctx;
  var tick = 0;
  var invaders = [];
  var bullets = [];
  var stars = [];
  var player = {
    x:225
  };
  var keys = {
    left: false,
    right: false
  };
  var cellWidth = 10;
  var playerPattern = [
    [0, 0, 0, 0, 0],
    [0, 0, 1, 0, 0],
    [1, 0, 1, 0, 1],
    [0, 1, 1, 1, 0],
    [1, 1, 1, 1, 1],
  ];
  
  var invaderPatterns = [
      [
        [0, 1, 0, 1, 0],
        [1, 0, 1, 0 ,1],
        [1, 1, 1, 1, 1],
        [0, 1, 1, 1, 0],
        [0, 1, 0, 1, 0]
      ],
      [
        [0, 0, 0, 0, 0],
        [0, 1, 1, 1 ,0],
        [1, 0, 1, 0, 1],
        [0, 1, 1, 1, 0],
        [0, 0, 1, 0, 0]
      ],
      [
        [1, 0, 0, 0, 1],
        [1, 1, 1, 1 ,1],
        [1, 0, 1, 0, 1],
        [0, 1, 1, 1, 0],
        [0, 0, 1, 0, 0]
      ],
      [
        [0, 0, 1, 0, 0],
        [0, 1, 1, 1 ,0],
        [1, 0, 1, 0, 1],
        [0, 1, 1, 1, 0],
        [1, 0, 0, 0, 1]
      ],
      [
        [0, 0, 1, 0, 0],
        [0, 1, 1, 1 ,0],
        [1, 1, 1, 1, 1],
        [1, 0, 1, 0, 1],
        [0, 1, 1, 1, 0]
      ],
      [
        [0, 0, 1, 0, 0],
        [0, 1, 1, 1 ,0],
        [1, 0, 1, 0, 1],
        [1, 1, 1, 1, 1],
        [1, 0, 0, 0, 1]
      ],
      [
        [0, 0, 0, 0, 0],
        [0, 1, 0, 1 ,0],
        [0, 1, 1, 1, 0],
        [1, 0, 1, 0, 1],
        [0, 1, 1, 1, 0]
      ]
  ];
  
  var createStar = function() {
    return {
      x: rand(500),
      y: rand(500),
      int: Math.random() * 0.3,
      dir: 1
    };
  };
  
  var init = function() {
    canvas = document.getElementById("game-canvas");
    ctx = canvas.getContext("2d");
    
    // create 8 invaders
    for(var i = 0; i < 7; i++) {
      invaders.push(createInvader(i));
    }
    
    for(var i = 0; i < 50; i++) {
      stars.push(createStar()); 
    }
  };
  
  var createInvader = function(index) {
     var randomIndex = Math.random() * invaderPatterns.length;
     randomIndex = Math.floor(randomIndex);     
     var pattern = invaderPatterns[randomIndex];
     
     return {
       pattern: pattern,
       x: 20 + index * 60,
       y: 0,
       dir: 1,
       hue: rand(360)
     };
  };
  
  var fire = function() {
    bullets.push({
      x: player.x + 20,
      y: 440
    });
  };
  
  var update = function() {
    var step = 20;
    
    if(keys.left) {
      player.x -= step ;
    } else if(keys.right) {
      player.x += step; 
    }

    for(var i = 0; i < bullets.length; i++) {
      if(bullets[i].y < -20) {
        bullets.splice(i, 1);
      }
       bullets[i].y -= 20;
       
    }
    
    if(tick % 5 === 0) {
      for(var i = 0; i < invaders.length; i++) {
        if(invaders[i].x > 430 || invaders[i].x < 20) {
          invaders[i].y += 60;
          invaders[i].dir *= -1;
          if(i < 7) {
             invaders.push(createInvader(0));
          }
        }
        invaders[i].x += 10 * invaders[i].dir;
      }
    }
    
    tick++;
  };
  
  var rand = function(limit) {
     return Math.floor(Math.random() * limit);  
  };

  var render = function() {
    ctx.clearRect(0, 0, 500, 500);
    
    var int = 0;
    for(var i = 0; i < stars.length; i++) {
      var star = stars[i];
      if(star.int >= 0.3 || star.int <= 0) {
       star.dir *= -1; 
      }
      star.int += (0.01 * star.dir);
      
      ctx.fillStyle = "rgba(255,255,255,"+star.int+");";
      ctx.fillRect(star.x, star.y, cellWidth, cellWidth);  
    }
    
    renderPlayer();
    
    for(var i = 0; i < bullets.length; i++) {
      var s = 90;
      var l = 100;
      
      for(var t = 0; t < 5; t++) {
          ctx.fillStyle = "hsl(30, "+ s +"%, "+ l * ((5 - t) / 5) +"%)";
          ctx.fillRect(
            bullets[i].x,
            bullets[i].y + t * cellWidth,
            cellWidth,
            cellWidth
          );
      }
    }
    
    for(var i = 0; i < invaders.length; i++) {
      var invader = invaders[i];
      renderInvader(invader);
    }
  };
  
  var renderPlayer = function() {
    var pat = playerPattern;
    ctx.fillStyle = "#fff";
    
    for(var x = 0; x < pat.length; x++) {
      for(var y = 0; y < pat[x].length; y++) {
        if(pat[y][x]) {
          ctx.fillRect(
            player.x + x * cellWidth,
            440 + y  * cellWidth,
            cellWidth,
            cellWidth
          ); 
        }
      }
    }
  };
  
  var renderInvader = function(invader) {
    var pattern = invader.pattern;
    var h = invader.hue;
      
    for(var x = 0; x < pattern.length; x++) {
      for(var y = 0; y < pattern[x].length; y++) {
       var l = 100 * y / pattern[x].length;
       ctx.fillStyle = "hsl("+h+",80%,"+l+"%)";  
       if(pattern[y][x]) {
          ctx.fillRect(
             invader.x + x * cellWidth, 
             invader.y + y  * cellWidth,
             cellWidth,
             cellWidth
          ); 
        }

      } 
    }
  };
  
  var play = function() {
    update();
    render();
  };
  
  var keyup = function(e) {
    switch(e.keyCode) {
      case 37:
        keys.left = false;
        break;
      case 39:
        keys.right = false;
        break;
     }
  };
  
  var keydown = function(e) {
    switch(e.keyCode) {
      case 37:
        keys.left = true;
        break;
      case 39:
        keys.right = true;
        break;
      case 32:
        fire();
    }
  };
  
  window.addEventListener("load", init);
  window.addEventListener("keydown", keydown);
  window.addEventListener("keyup", keyup);
  setInterval(play, 50);
}).call(this);

style.css

html, body {
  background-color:#040404;
  color:#fff;
  text-align:center;
  font-family: monospace;
}

.canvas {
   background-color:#000;
}

ul.controls {
  list-style-type:none;
}