ablwr · February 9, 2018 19:20
diff --git a/invading-space b/invading-space
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>👾 invade! 👾</title>
    <style type="text/css">
      canvas {
        background-color: black;
        background-image:
          radial-gradient(white, rgba(240,240,240,.2) 2px, transparent 4px),
          radial-gradient(white, rgba(240,240,240,.15) 1px, transparent 3px),
          radial-gradient(white, rgba(240,240,240,.1) 2px, transparent 4px),
          radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 3px);
        background-size: 450px 450px, 250px 250px, 250px 250px, 150px 150px; 
        background-position: 0 0, 20px 20px, 120px 200px, 70px 80px;
        border: 10px solid green;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="512" height="480"></canvas>
  </body>
  <script type="text/javascript"> 
  var Game = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var board = {x: canvas.width, y: canvas.height};
    
    this.invasion = setInvasion(this)
    this.player = new Alien(this, board);
    
    var thisGame = this;
    var step = function() {
      thisGame.update(board);
      thisGame.draw(ctx, board);
      requestAnimationFrame(step);  
    }
    step();
  }  
  
  Game.prototype = {
    update: function(board) {
      this.player.move();
      for (var i = 0; i < this.invasion.length; i++) {   
        this.invasion[i].move();
      }
    },

    draw: function(ctx, board) { 
      ctx.clearRect(0, 0, board.x, board.y);
      drawAlien(ctx, this.player);
      for (var i = 0; i < this.invasion.length; i++) {   
        drawInvader(ctx, this.invasion[i]);
      }
    }  
  }

 ///////////////////////////////////////////////////////////////////////////////
  var Alien = function(game, position) {
    this.game = game;
    this.position = {x: canvas.width/2, y: canvas.height-16};
  }

  Alien.prototype = {
    move: function() {
      var keysDown = {};
      var alien = this
      window.onkeydown = function(e) {
        keysDown[e.keyCode] = true;
        if (keysDown["37"]) {alien.position.x -= 4;} // go left
        if (keysDown["39"]) {alien.position.x += 4;} // go right
      };
      window.onkeyup = function(e) {
        keysDown[e.keyCode] = false;
      };
    }
  }
  
 ///////////////////////////////////////////////////////////////////////////////

  var Invader = function(game, location) {
    this.game = game;
    this.position = location;
    this.moveX = 0;
    this.direction = 1;
  }
   
  Invader.prototype = {
    move: function() {
      this.position.x += this.direction;
      this.moveX += this.direction;
      if ( this.moveX < -20 || this.moveX > 150) {
        this.direction = -this.direction;
      }
    }
  }

 ///////////////////////////////////////////////////////////////////////////////
  
  var setInvasion = function(game) {
    var invaders = [];
    for (var i = 0; i<7; i++) {
      var x = 30 + (i*5) * 10;
      var y = 50;
      invaders.push(new Invader(game, {x:x, y:y})); 
    }
    return invaders;
  }
  
  var setAlien = function(game) {
    alien = new Alien(game,{})
  }
  
  var drawInvader = function(ctx, i) {
    ctx.beginPath();
    ctx.font = '26px Arial';
    ctx.fillText("👾", i.position.x, i.position.y);
    ctx.closePath(); 
  }

  var drawAlien = function(ctx, a) {
    ctx.beginPath();
    ctx.font = '36px Arial';
    ctx.fillText("👽", a.position.x, a.position.y);
    ctx.closePath(); 
  }
    
  window.onload = function() {
    new Game("canvas");
  }
  
  // TODO: Attack the invaders!
  // TODO: Keep score of attack!
  </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>👾 invade! 👾</title>
	<style type="text/css">
	canvas {
	background-color: black;
	background-image:
	radial-gradient(white, rgba(240,240,240,.2) 2px, transparent 4px),
	radial-gradient(white, rgba(240,240,240,.15) 1px, transparent 3px),
	radial-gradient(white, rgba(240,240,240,.1) 2px, transparent 4px),
	radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 3px);
	background-size: 450px 450px, 250px 250px, 250px 250px, 150px 150px;
	background-position: 0 0, 20px 20px, 120px 200px, 70px 80px;
	border: 10px solid green;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas" width="512" height="480"></canvas>
	</body>
	<script type="text/javascript">
	var Game = function() {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var board = {x: canvas.width, y: canvas.height};

	this.invasion = setInvasion(this)
	this.player = new Alien(this, board);

	var thisGame = this;
	var step = function() {
	thisGame.update(board);
	thisGame.draw(ctx, board);
	requestAnimationFrame(step);
	}
	step();
	}

	Game.prototype = {
	update: function(board) {
	this.player.move();
	for (var i = 0; i < this.invasion.length; i++) {
	this.invasion[i].move();
	}
	},

	draw: function(ctx, board) {
	ctx.clearRect(0, 0, board.x, board.y);
	drawAlien(ctx, this.player);
	for (var i = 0; i < this.invasion.length; i++) {
	drawInvader(ctx, this.invasion[i]);
	}
	}
	}

	///////////////////////////////////////////////////////////////////////////////
	var Alien = function(game, position) {
	this.game = game;
	this.position = {x: canvas.width/2, y: canvas.height-16};
	}

	Alien.prototype = {
	move: function() {
	var keysDown = {};
	var alien = this
	window.onkeydown = function(e) {
	keysDown[e.keyCode] = true;
	if (keysDown["37"]) {alien.position.x -= 4;} // go left
	if (keysDown["39"]) {alien.position.x += 4;} // go right
	};
	window.onkeyup = function(e) {
	keysDown[e.keyCode] = false;
	};
	}
	}

	///////////////////////////////////////////////////////////////////////////////

	var Invader = function(game, location) {
	this.game = game;
	this.position = location;
	this.moveX = 0;
	this.direction = 1;
	}

	Invader.prototype = {
	move: function() {
	this.position.x += this.direction;
	this.moveX += this.direction;
	if ( this.moveX < -20 \|\| this.moveX > 150) {
	this.direction = -this.direction;
	}
	}
	}

	///////////////////////////////////////////////////////////////////////////////

	var setInvasion = function(game) {
	var invaders = [];
	for (var i = 0; i<7; i++) {
	var x = 30 + (i5) 10;
	var y = 50;
	invaders.push(new Invader(game, {x:x, y:y}));
	}
	return invaders;
	}

	var setAlien = function(game) {
	alien = new Alien(game,{})
	}

	var drawInvader = function(ctx, i) {
	ctx.beginPath();
	ctx.font = '26px Arial';
	ctx.fillText("👾", i.position.x, i.position.y);
	ctx.closePath();
	}

	var drawAlien = function(ctx, a) {
	ctx.beginPath();
	ctx.font = '36px Arial';
	ctx.fillText("👽", a.position.x, a.position.y);
	ctx.closePath();
	}

	window.onload = function() {
	new Game("canvas");
	}

	// TODO: Attack the invaders!
	// TODO: Keep score of attack!
	</script>
	</html>