EdgardoRodriguezSolano/enemy.png

## enemy.png

      
    Raw
  

              enemy.png
            
          
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Space Invaders - Recurse Center Interview</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

## index.js
const PARTIAL_SCREEN = 0.7; // Percentage of the screen with that the block of enemies will occupy
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var playerHeight = 30;
var playerWidth = 30;
var playerX = (canvas.width-playerWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var enemiesRowCount = 5;
var enemiesColumnCount = 11;
var enemiesPadding = 10;
var enemiesWidth = ((canvas.width * PARTIAL_SCREEN) / enemiesColumnCount) - enemiesPadding;
var enemiesHeight = 20;
var enemiesOffsetTop = 10;
var enemiesOffsetLeft = 10;
var enemiesNumberOfSteps = 15;
var dx = Math.ceil(((canvas.width * (1 - PARTIAL_SCREEN)) - (2*enemiesOffsetLeft)) / enemiesNumberOfSteps);
var enemies = [];
var tick = 0;
var steps = 0;


for(var c = 0; c < enemiesColumnCount; c++) {
    enemies[c] = [];
    for(var r = 0; r < enemiesRowCount; r++) {
      enemies[c][r] = { x: 0, y: 0, status: 1 };
    }
}

function drawPlayer() {
  var img = new Image();
  img.src = 'player.png';
  ctx.drawImage(img, playerX, canvas.height - playerHeight, playerWidth, playerHeight);
}

function drawEnemies() {
    for(var c = 0; c < enemiesColumnCount; c++) {
        for(var r = 0; r < enemiesRowCount; r++) {
          if(enemies[c][r].status == 1) {
              var enemiesX = (c * (enemiesWidth + enemiesPadding)) + enemiesOffsetLeft;
              var enemiesY = (r * (enemiesHeight + enemiesPadding)) + enemiesOffsetTop;
              enemies[c][r].x = enemiesX;
              enemies[c][r].y = enemiesY;
              var img = new Image();
              img.src = 'enemy.png';
              ctx.drawImage(img, enemiesX, enemiesY, enemiesWidth, enemiesHeight);
          }
        }
    }
}

function moveEnemies() {
  if (tick % 30 == 0) {
    enemiesOffsetLeft = enemiesOffsetLeft + dx;
    steps++;
    tick = 0;
    if (steps % enemiesNumberOfSteps == 0) {
      dx = -dx;
      steps = 0;
    }
  }
}

function movePlayer() {
  if(rightPressed) {
    playerX += 7;
    if (playerX + playerWidth > canvas.width){
      playerX = canvas.width - playerWidth;
    }
  }
  else if(leftPressed) {
      playerX -= 7;
      if (playerX < 0){
        playerX = 0;
      }
  }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    tick++;
    drawPlayer();
    drawEnemies();
    moveEnemies();
    movePlayer();
    requestAnimationFrame(draw);
  }

function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}
draw();
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

## player.png

      
    Raw
  

              player.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Space Invaders - Recurse Center Interview</title>
	<style>
	* { padding: 0; margin: 0; }
	canvas { background: #eee; display: block; margin: 0 auto; }
	</style>
	</head>
	<body>

	<canvas id="myCanvas" width="480" height="320"></canvas>
	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	const PARTIAL_SCREEN = 0.7; // Percentage of the screen with that the block of enemies will occupy
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var playerHeight = 30;
	var playerWidth = 30;
	var playerX = (canvas.width-playerWidth) / 2;
	var rightPressed = false;
	var leftPressed = false;
	var enemiesRowCount = 5;
	var enemiesColumnCount = 11;
	var enemiesPadding = 10;
	var enemiesWidth = ((canvas.width * PARTIAL_SCREEN) / enemiesColumnCount) - enemiesPadding;
	var enemiesHeight = 20;
	var enemiesOffsetTop = 10;
	var enemiesOffsetLeft = 10;
	var enemiesNumberOfSteps = 15;
	var dx = Math.ceil(((canvas.width * (1 - PARTIAL_SCREEN)) - (2*enemiesOffsetLeft)) / enemiesNumberOfSteps);
	var enemies = [];
	var tick = 0;
	var steps = 0;


	for(var c = 0; c < enemiesColumnCount; c++) {
	enemies[c] = [];
	for(var r = 0; r < enemiesRowCount; r++) {
	enemies[c][r] = { x: 0, y: 0, status: 1 };
	}
	}

	function drawPlayer() {
	var img = new Image();
	img.src = 'player.png';
	ctx.drawImage(img, playerX, canvas.height - playerHeight, playerWidth, playerHeight);
	}

	function drawEnemies() {
	for(var c = 0; c < enemiesColumnCount; c++) {
	for(var r = 0; r < enemiesRowCount; r++) {
	if(enemies[c][r].status == 1) {
	var enemiesX = (c * (enemiesWidth + enemiesPadding)) + enemiesOffsetLeft;
	var enemiesY = (r * (enemiesHeight + enemiesPadding)) + enemiesOffsetTop;
	enemies[c][r].x = enemiesX;
	enemies[c][r].y = enemiesY;
	var img = new Image();
	img.src = 'enemy.png';
	ctx.drawImage(img, enemiesX, enemiesY, enemiesWidth, enemiesHeight);
	}
	}
	}
	}

	function moveEnemies() {
	if (tick % 30 == 0) {
	enemiesOffsetLeft = enemiesOffsetLeft + dx;
	steps++;
	tick = 0;
	if (steps % enemiesNumberOfSteps == 0) {
	dx = -dx;
	steps = 0;
	}
	}
	}

	function movePlayer() {
	if(rightPressed) {
	playerX += 7;
	if (playerX + playerWidth > canvas.width){
	playerX = canvas.width - playerWidth;
	}
	}
	else if(leftPressed) {
	playerX -= 7;
	if (playerX < 0){
	playerX = 0;
	}
	}
	}

	function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	tick++;
	drawPlayer();
	drawEnemies();
	moveEnemies();
	movePlayer();
	requestAnimationFrame(draw);
	}

	function keyDownHandler(e) {
	if(e.key == "Right" \|\| e.key == "ArrowRight") {
	rightPressed = true;
	}
	else if(e.key == "Left" \|\| e.key == "ArrowLeft") {
	leftPressed = true;
	}
	}
	function keyUpHandler(e) {
	if(e.key == "Right" \|\| e.key == "ArrowRight") {
	rightPressed = false;
	}
	else if(e.key == "Left" \|\| e.key == "ArrowLeft") {
	leftPressed = false;
	}
	}
	draw();
	document.addEventListener("keydown", keyDownHandler, false);
	document.addEventListener("keyup", keyUpHandler, false);