Game loop mechanism

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%;
+}

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);
+    }
+}

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);
+// }

index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- META TAGS-->
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="assets/img/favicon.png" type="image/png">
+    <meta name="description" content="">
+    <meta name="keywords" content="">
+    <meta name="author" content="Retro Logic">
+    <title>Office Invaders</title>
+    <!-- CSS LINK -->
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+    <div id="game-board"></div>
+    <script src="assets/js/component.js"></script>
+    <script src="assets/js/game.js"></script>
+</body>
+</html>