Demo 1

prakharjain3 · Jan 25, 2022 · 325b3cd · 325b3cd
1 parent dc53cf4
commit 325b3cd
Show file tree

Hide file tree

Showing 20 changed files with 434 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/ideas.md b/ideas.md
@@ -0,0 +1,37 @@
+To Do:
+        * Collision detection
+        * change map depending on which gate the player walks through
+
+
+
+Ideas for - ACM-RPG
+ACM Logo is the platform!
+Secret room by walking through one wall, plays rick roll on opening a chest
+Computers that give information on pressing spacebar
+
+First make the game in vanilla js
+then put it in react with react stuff
+
+
+Secret room will have character skin customization thing. Upgrade your look!
+
+To Download aseprite pixel art editor -
+https://www.youtube.com/watch?v=s3hhkcDOASc 
+
+To run aseprite -
+
+cmake \
+        -DCMAKE_BUILD_TYPE=RelWithDebInfo \
+        -DLAF_BACKEND=skia \
+        -DSKIA_DIR=$HOME/deps/skia \
+        -DSKIA_LIBRARY_DIR=$HOME/deps/skia/out/Release-x64 \
+        -DSKIA_LIBRARY=$HOME/deps/skia/out/Release-x64/libskia.a \
+        -G Ninja \
+        ..
+
+
+
+
+ninja aseprite
+
+
diff --git a/images/DemoLower.png b/images/DemoLower.png
diff --git a/images/DemoUpper.png b/images/DemoUpper.png
diff --git a/images/KitchenLower.png b/images/KitchenLower.png
diff --git a/images/KitchenUpper.png b/images/KitchenUpper.png
diff --git a/images/hero.png b/images/hero.png
diff --git a/images/npc1.png b/images/npc1.png
diff --git a/images/npc2.png b/images/npc2.png
diff --git a/images/shadow.png b/images/shadow.png
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ACM-VIT Recruitment Portal</title>
+
+    <link rel="stylesheet" href="./styles.css" type="text/css">
+</head>
+<body>
+    <div class="game-container">
+        <!-- going with 16/9 aspect ratio -->
+        <canvas class="game-canvas" width="352" height="198"></canvas>
+    </div>
+
+    <script src="./js/utils.js"></script>
+    <script src="./js/DirectionInput.js"></script>
+    <script src="./js/Overworld.js"></script>
+    <script src="./js/GameObject.js"></script>
+    <script src="./js/Person.js"></script>
+    <script src="./js/Sprite.js"></script>
+    <script src="./js/OverworldMap.js"></script>
+    <script src="./js/init.js"></script>
+</body>
+</html>
diff --git a/js/DirectionInput.js b/js/DirectionInput.js
@@ -0,0 +1,37 @@
+class DirectionInput {
+    constructor() {
+        this.heldDirections = []; // keeps track of keys held
+        this.map = {
+            "ArrowUp": "up",
+            "ArrowDown": "down",
+            "ArrowLeft": "left",
+            "ArrowRight": "right",
+            "KeyW": "up",
+            "KeyS": "down",
+            "KeyA": "left",
+            "KeyD": "right"
+        }
+    }
+
+
+    init() {
+        document.addEventListener("keydown", e => {
+            const dir = this.map[e.code];
+            if(dir && this.heldDirections.indexOf(dir) === -1) {
+                this.heldDirections.unshift(dir);
+            }
+        });
+
+        document.addEventListener("keyup", e => {
+            const dir = this.map[e.code];
+            const index = this.heldDirections.indexOf(dir);
+            if(index > -1) {
+                this.heldDirections.splice(index, 1);
+            }
+        });
+    }
+
+    get direction() {
+        return this.heldDirections[0];
+    }
+}
diff --git a/js/GameObject.js b/js/GameObject.js
@@ -0,0 +1,16 @@
+class GameObject {
+    constructor(config) {
+        this.x = config.x || 0;
+        this.y = config.y || 0;
+        this.direction = config.direction || "down";
+        this.sprite = new Sprite({
+            gameObject: this,
+            src: config.src || "./images/hero.png",
+        });
+    }
+
+    update() {
+
+    }
+
+}
diff --git a/js/Overworld.js b/js/Overworld.js
@@ -0,0 +1,53 @@
+class Overworld {
+    constructor(config) {
+        this.element = config.element;
+        this.canvas = this.element.querySelector(".game-canvas");
+        this.context = this.canvas.getContext("2d");
+        this.map = null;
+    }
+
+    init() {
+        this.map = new OverworldMap(window.OverworldMaps.DemoRoom);
+        this.directionInput = new DirectionInput();
+        this.directionInput.init();
+
+        this.startGameLoop();
+        // game loop fires at 60 fps
+
+    }
+
+    startGameLoop() {
+        const step = () => {
+
+            this.context.clearRect(0,0, this.canvas.width, this.canvas.height);
+
+            // around which character to place the camera
+            const cameraPerson = this.map.gameObjects.hero;
+
+            // update all objects
+            Object.values( this.map.gameObjects ).forEach( object => {
+                object.update({
+                    arrow: this.directionInput.direction
+                })
+            })
+
+
+            // step(); infinite loop that will crash the system
+
+            this.map.drawLowerImage(this.context, cameraPerson);
+
+            Object.values( this.map.gameObjects ).forEach( object => {
+                object.sprite.draw(this.context, cameraPerson);
+            })
+
+            this.map.drawUpperImage(this.context, cameraPerson);
+
+            // call step when a new frame starts
+            requestAnimationFrame( () => {
+                step();
+            });
+        }
+        console.log(performance.now());
+        step();
+    }
+}
diff --git a/js/OverworldMap.js b/js/OverworldMap.js
@@ -0,0 +1,76 @@
+class OverworldMap {
+    constructor(config) {
+        this.gameObjects = config.gameObjects;
+        this.walls = config.walls || {};
+
+        this.lowerImage = new Image();
+        this.upperImage = new Image();
+
+        this.lowerImage.src = config.lowerSrc; // floor
+        this.upperImage.src = config.upperSrc; // what is rendered above the floor (above the player) like tree tops
+    }
+
+    drawLowerImage(context, cameraPerson) {
+        context.drawImage(this.lowerImage, utils.withGrid(10.5) - cameraPerson.x, utils.withGrid(6) - cameraPerson.y);
+    }
+
+    drawUpperImage(context, cameraPerson) {
+        context.drawImage(this.upperImage, utils.withGrid(10.5) - cameraPerson.x, utils.withGrid(6) - cameraPerson.y);
+    }
+
+}
+
+window.OverworldMaps = {
+    DemoRoom: {
+        lowerSrc: "./images/DemoLower.png",
+        upperSrc: "./images/DemoUpper.png",
+        gameObjects: {
+
+            hero: new Person({
+                isPlayerControlled: true,
+                x: utils.withGrid(5),
+                y: utils.withGrid(6)
+            }),
+
+            npc1: new Person({
+                x: utils.withGrid(7),
+                y: utils.withGrid(9),
+                src: "./images/npc1.png"
+            }),
+
+            // walls: {
+            //     [utils.asGridCoord(7,6)]: true,
+            //     [utils.asGridCoord(8,6)]: true,
+            //     [utils.asGridCoord(7,7)]: true,
+            //     [utils.asGridCoord(8,7)]: true,
+
+            // }
+        }
+    },
+
+    Kitchen: {
+        lowerSrc: "./images/KitchenLower.png",
+        upperSrc: "./images/KitchenUpper.png",
+        gameObjects: {
+            hero: new GameObject({
+                x: 3,
+                y: 5,
+            }),
+
+            npc1: new GameObject({
+                x: 9,
+                y: 6,
+                src: "./images/npc1.png"
+            }),
+
+            npc2: new GameObject({
+                x: 10,
+                y: 8,
+                src: "./images/npc2.png"
+            })
+        }
+    },
+
+}
+
+
diff --git a/js/Person.js b/js/Person.js
@@ -0,0 +1,48 @@
+class Person extends GameObject {
+    constructor(config) {
+        super(config);
+        this.movingProgressRemaining = 0;
+
+        this.isPlayerControlled = config.isPlayerControlled || false;
+
+        this.directionUpdate = { // to alter speed, changed 1 to 2 here and (*)
+            "up": ["y", -2],
+            "down": ["y", 2],
+            "left": ["x", -2],
+            "right": ["x", 2]
+        }
+    }
+
+    update(state) {
+        this.updatePosition();
+        this.updateSprite(state);
+
+        // don't move the person until he's done moving to a square
+        if(this.isPlayerControlled && this.movingProgressRemaining === 0 && state.arrow) {
+            this.direction = state.arrow;
+            this.movingProgressRemaining = 8; // (*) Was 16 before, changed to 8 for speed
+        }
+    }
+
+    updatePosition() {
+        if(this.movingProgressRemaining > 0) {
+            const [property, change] = this.directionUpdate[this.direction];
+            this[property] += change;
+            this.movingProgressRemaining -= 1;
+        }
+    }
+
+    updateSprite(state) {
+
+        if(this.isPlayerControlled && this.movingProgressRemaining === 0 && !state.arrow) {
+            this.sprite.setAnimation("idle-"+this.direction);
+            return;
+        }
+
+
+        if(this.movingProgressRemaining > 0) {
+            this.sprite.setAnimation("walk-"+this.direction);
+        }
+    }
+
+}