start outline for first project in the course

_includes/nav_oop.html

@@ -0,0 +1,11 @@
+<table>
+    <tr>
+        <td><a href="{{site.baseurl}}/2023/07/30/mario_overview_IPYNB_2_.html">Overview</a></td>
+        <td><a href="{{site.baseurl}}/2023/08/01/mario_player_IPYNB_2_.html">Player</a></td>
+        <td><a href="{{site.baseurl}}/2023/08/02/mario_platform_IPYNB_2_.html">Platform</a></td>
+        <td><a href="{{site.baseurl}}/2023/08/06/mario_background_IPYNB_2_.html">Background</a></td>
+        <td><a href="{{site.baseurl}}/2023/08/03/mario_tube_IPYNB_2_.html">Tube</a></td>
+        <td><a href="{{site.baseurl}}/2023/08/04/mario_block_IPYNB_2_.html">Block</a></td>
+        <td><a href="{{site.baseurl}}/2023/08/05/mario_goomba_IPYNB_2_.html">Goomba</a></td>
+    </tr>
+</table>

_posts/2023-11-13-CSSE-tri2-oop.md

@@ -0,0 +1,206 @@
+---
+toc: false
+comments: false
+layout: post
+title: Innovation, CPT Project
+permalink: /cpt/home
+description: Innovation requirements for the Create Performance Task
+type: collab
+courses: { csse: {week: 13} }
+---
+
+{% include nav_oop.html %}
+
+## OOP Conversion
+
+Object is to covert functionalities of Imperative Style Mario Game to Object Oriented Programming.  We have many of the assets and now can improve on our OOP 
+
+### Game Environment
+
+The GameEnv holds states and objects of the game including GameObjects, Screen extents, and Current GameLevel.
+
+```javascript
+class GameEnv {
+    static gameObjects = [];
+    static height;
+    static width;
+    static currentLevel;
+
+    static initialize(width, height) {
+        this.width = width;
+        this.height = height;
+        // Additional initialization logic
+    }
+
+    static startGame() {
+        // Initialize or load the first level
+        this.currentLevel = new Level();
+        this.currentLevel.load(); // or generate
+        // Additional game start logic
+    }
+
+    static update() {
+        // Update game state, including all game objects
+        for (const gameObject of this.gameObjects) {
+            gameObject.update();
+        }
+        // Additional global update logic
+    }
+
+    static draw() {
+        // Draw all game objects
+        for (const gameObject of this.gameObjects) {
+            gameObject.draw();
+        }
+        // Additional global draw logic
+    }
+
+    static handleCollisions() {
+        // Check for collisions between game objects
+        for (const gameObject of this.gameObjects) {
+            for (const otherObject of this.gameObjects) {
+                if (gameObject !== otherObject) {
+                    gameObject.handleCollision(otherObject);
+                }
+            }
+        }
+        // Additional collision handling logic
+    }
+}
+```
+
+### GameObject
+
+```javascript
+class GameObject {
+  constructor(canvas, image, speedRatio) {
+    this.x = 0;
+    this.y = 0;
+    this.frame = 0;
+    this.canvas = canvas;
+    this.ctx = canvas.getContext('2d');
+    this.image = image;
+    this.width = image.width;  // Image() width (meta data)
+    this.height = image.height; // Image() height
+    this.aspect_ratio = this.width / this.height;
+    this.speedRatio = speedRatio;
+    this.speed = GameEnv.gameSpeed * this.speedRatio;
+    this.invert = true;
+    this.collisionWidth = 0;
+    this.collisionHeight = 0;
+    this.collisionData = {};
+  }
+
+  update() {  }
+  draw() { }
+  size() {  }
+  destroy() {  }
+  isCollision(object) {  }
+  collisionAction(object) {  }
+  handleCollision(object) {
+      if (this.isCollision(object)) {
+          this.collisionAction(object);
+      }
+  }
+}
+```
+
+### Player
+
+Create a class specifically for the player character, extending the GameObject class. Include properties such as player speed, jump height, and health.  Implement methods for player-specific actions like jumping, attacking, etc.
+
+```javascript
+class Player extends GameObject {
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+        this.speed = 5;
+        this.jumpHeight = 10;
+        this.health = 100;
+
+        // Set up event listeners for user input
+        document.addEventListener('keydown', this.handleKeyDown.bind(this));
+        document.addEventListener('keyup', this.handleKeyUp.bind(this));
+    }
+
+    handleKeyDown(event) {
+        // Handle key down events (e.g., move left or right, jump)
+        switch (event.key) {
+            case 'ArrowLeft':
+                this.moveLeft();
+                break;
+            case 'ArrowRight':
+                this.moveRight();
+                break;
+            case 'Space':
+                this.jump();
+                break;
+            // Handle other keys as needed
+        }
+    }
+
+    handleKeyUp(event) {
+        // Handle key up events (e.g., stop moving)
+        switch (event.key) {
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                this.stopMoving();
+                break;
+            // Handle other keys as needed
+        }
+    }
+
+    moveLeft() { /* Implement left movement logic */ }
+    moveRight() { /* Implement right movement logic */ }
+    stopMoving() { /* Implement stop movement logic */ }
+    jump() { /* Implement jump logic */ }
+    attack() { /* Implement attack logic */ }
+}
+```
+
+### Platform
+
+Create a class for platforms that the player can stand on. Include properties such as width, height, and possibly a type (solid, moving, etc.).
+
+```javascript
+class Platform extends GameObject {
+    constructor(x, y, width, height) {
+        super(x, y, width, height);
+    }
+    // Additional platform-specific methods or properties
+}
+```
+
+
+### Level
+
+Store the assets and attributes of the Game at the specfice GameLevel.
+
+```javascript
+class GameLevel {
+    constructor() {
+        this.platforms = []; // Array of platforms in the level
+        this.enemies = [];   // Array of enemies in the level
+        // Additional level-specific properties
+    }
+
+    load() { /* Load level data */ }
+    generate() { /* Generate level elements */ }
+    // Additional level-specific methods
+}
+```
+
+### Game State Management
+
+Implement a system to manage different game states (e.g., menu, playing, game over).  This can help organize your game's flow and handle transitions between states.
+
+```javascript
+class GameStateManager {
+    constructor() {
+        this.currentState = "menu"; // Initial state
+    }
+
+    changeState(newState) {
+        // Logic for transitioning between states
+    }
+}
+```