diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..78aeaf6
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,36 @@
+*, ::before, ::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+}
+
+body {
+
+ height: 100%;
+ width: 100%;
+ display: grid;
+ place-content: center center;
+ background-color: black;
+}
+
+#game-board {
+ width: 100vh;
+ height: 100vmin;
+ border: solid black 1px;
+ background-color: slategray;
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ grid-template-rows: repeat(12, 1fr);
+}
+
+.player {
+ background: url("/assets/images/retro_developer.png") no-repeat center center/cover;
+}
+
+.mouse {
+ background: url("/assets/images/mouse.png") no-repeat center center/cover;
+ width: 25%;
+ height: 25%;
+}
diff --git a/assets/images/mouse.png b/assets/images/mouse.png
new file mode 100644
index 0000000..cc8bb0c
Binary files /dev/null and b/assets/images/mouse.png differ
diff --git a/assets/images/retro_developer.png b/assets/images/retro_developer.png
new file mode 100644
index 0000000..b8d8a21
Binary files /dev/null and b/assets/images/retro_developer.png differ
diff --git a/assets/images/retro_developer_shooting.png b/assets/images/retro_developer_shooting.png
new file mode 100644
index 0000000..f966d59
Binary files /dev/null and b/assets/images/retro_developer_shooting.png differ
diff --git a/assets/js/component.js b/assets/js/component.js
new file mode 100644
index 0000000..aec6cea
--- /dev/null
+++ b/assets/js/component.js
@@ -0,0 +1,94 @@
+class Component {
+ constructor(name, width, heigth, xPos, yPos, speed) {
+ this.name = name;
+ this.width = width;
+ this.heigth = heigth;
+ this.xPos = xPos;
+ this.yPos = yPos;
+ this.speed = speed;
+ }
+ draw(gameBoard) {
+ const div = document.createElement('div');
+ div.setAttribute('class', this.name);
+ div.style.gridRow = `${this.yPos} / span ${this.heigth}`;
+ div.style.gridColumn = `${this.xPos} / span ${this.width}`;
+ gameBoard.appendChild(div);
+ }
+}
+
+class Player extends Component {
+ constructor(name, width, heigth, xPos, yPos, speed, lives) {
+ super(name, width, heigth, xPos, yPos, speed);
+ this.lives = lives;
+ }
+ moveLeft() {
+ if (this.xPos > 0) {
+ this.xPos--;
+ }
+ }
+ moveRight() {
+ if (this.xPos < 12) {
+ this.xPos++;
+ }
+ }
+ moveUp() {
+ if (this.yPos > 2) {
+ this.yPos--;
+ }
+ }
+ moveDown() {
+ if (this.yPos < 11) {
+ this.yPos++;
+ }
+ }
+ shootMovement() {
+ const playerDiv = document.querySelector('.player');
+ playerDiv.style.background = `url("/assets/images/retro_developer_shooting.png") no-repeat center center/cover`;
+ }
+}
+
+class Enemy extends Component {
+ constructor(name, width, heigth, xPos, yPos, speed, health, defense) {
+ super(name, width, heigth, xPos, yPos, speed);
+ this.health = health;
+ this.defense = defense;
+ this.isDead = false;
+ }
+ fall() {
+ setTimeout(() => {
+ if (this.yPos < 12) {
+ this.yPos++;
+ } else {
+ this.remove();
+ }
+ }, 1000);
+ }
+ takeDamage(amount) {
+ let damage = amount - this.defense;
+ if (damage < 0) {
+ damage = 0;
+ }
+ this.health -= damage;
+ }
+ checkIsDead() {
+ if (this.health <= 0) {
+ this.isDead = true;
+ }
+ }
+}
+
+class Projectile extends Component {
+ constructor(name, width, heigth, xPos, yPos, speed, attack) {
+ super(name, width, heigth, xPos, yPos, speed);
+ this.attack = attack;
+ }
+ shoot() {
+ setTimeout(() => {
+ if (this.yPos > 1) {
+ this.yPos--;
+ } else {
+ this.remove();
+ }
+ }, 1000);
+ }
+}
diff --git a/assets/js/game.js b/assets/js/game.js
new file mode 100644
index 0000000..01ea314
--- /dev/null
+++ b/assets/js/game.js
@@ -0,0 +1,130 @@
+// class Game {
+// constructor() {
+// this.currentTime = 0;
+// this.previousTime = 0;
+// this.player = new Player("player", 2, 2, 6, 11, 25);
+// this.gameBoard = document.querySelector('#game-board');
+// window.requestAnimationFrame((time)=>this.gameLoop(time));
+// }
+
+// gameLoop(time) {
+// window.requestAnimationFrame((time)=>this.gameLoop(time));
+// let timeDelta = this.startFrame(time) / 1000;
+// if (timeDelta < 1 / this.player.speed) return;
+// this.previousTime = this.currentTime;
+// this.draw();
+// }
+
+// startFrame(time) {
+// this.currentTime = time - this.previousTime;
+// return this.currentTime;
+// }
+
+// draw() {
+// this.gameBoard.innerHTML = '';
+// this.player.draw(this.gameBoard);
+// }
+
+// movePlayer(event) {
+// switch(event.key) {
+// case 'ArrowLeft':
+// this.player.moveLeft();
+// break;
+// case 'ArrowRight':
+// this.player.moveRight();
+// break;
+// }
+// }
+// }
+
+const gameBoard = document.querySelector('#game-board');
+const player = new Player("player", 2, 2, 6, 11, 6, 3);
+const enemy = new Enemy("player", 1, 1, 0, 0, 6, 3);
+const mouse = new Projectile("mouse", 1, 1, player.xPos, player.yPos, 3, 50);
+let previousTime = 0;
+let currentTime = 0;
+let newShoot = false;
+
+function gameLoop(currentTime) {
+ window.requestAnimationFrame(gameLoop);
+ const timeDelta = (currentTime - previousTime) / 1000;
+ if (timeDelta < 1 / player.speed) return;
+ previousTime = currentTime;
+ draw();
+}
+
+window.requestAnimationFrame(gameLoop);
+document.addEventListener('keydown', movePlayer, true);
+// document.addEventListener('keydown', shootProjectile, true);
+
+function draw() {
+ gameBoard.innerHTML = '';
+ player.draw(gameBoard);
+ enemy.draw(gameBoard);
+ enemy.fall();
+ if (newShoot) {
+ mouse.draw(gameBoard);
+ mouse.shoot();
+ }
+}
+
+function movePlayer(event) {
+ switch(event.key) {
+ case 'ArrowLeft':
+ player.moveLeft();
+ break;
+ case 'ArrowRight':
+ player.moveRight();
+ break;
+ case 'ArrowUp':
+ player.moveUp();
+ break;
+ case 'ArrowDown':
+ player.moveDown();
+ break;
+ case ' ':
+ player.shootMovement();
+ newShoot = true;
+ break;
+ }
+}
+
+// function shootProjectile(event) {
+// let yPos = player.yPos;
+// let xPos = player.xPos;
+// function moveProjectile() {
+// const div = document.createElement('div');
+// div.setAttribute('class', 'mouse');
+// div.style.gridRowStart = yPos;
+// div.style.gridColumnStart = xPos + 1;
+// gameBoard.appendChild(div);
+// if (yPos > 1) {
+// yPos--;
+// } else {
+// clearInterval(moveProjectile);
+// div.remove();
+// }
+// }
+// if (event.key === ' ') {
+// setInterval(moveProjectile, 1000 / player.speed);
+// }
+// }
+
+// function dropEnemies() {
+// let yPos = 0;
+// let xPos = Math.floor(Math.random() * 12);
+// function moveEnemies() {
+// const div = document.createElement('div');
+// div.setAttribute('class', 'player');
+// div.style.gridRowStart = yPos;
+// div.style.gridColumnStart = xPos;
+// gameBoard.appendChild(div);
+// if (yPos < 12) {
+// yPos++;
+// } else {
+// clearInterval(moveProjectile);
+// div.remove();
+// }
+// }
+// setInterval(moveEnemies, 500);
+// }
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..880e1c6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+
+
+ Office Invaders
+
+
+
+
+
+
+
+
+