Issue Review

Week 1

Week 2

Week 3

I did a lot of trial and error for this stage of my code so I have little to show in commits as a lot of my code was nonfunctional and never pushed

HTML and CSS Elements

HTML

Overarching canvasContainer and placeholder elements

<!-- Prepare DOM elements -->
<div id="canvasContainer">
    <canvas id="backgroundID">
        <img id="backgroundImage" src="">
    </canvas>
</div>

<div id="placeholder"></div>

Main Screen with game title set-up leading into Start Screen with character customization

<!--loading screen-->
<div id="mainScreen">
    <h1>The Armeneggon</h1>
    <p><em>A Space Invaders Game</em></p>
    <div id="start">
        <button id="startButton">Start</button>
    </div>
</div>

<div id="startScreen" class="hidden">
    <h1 id="chooseText">Choose your character</h1>
    <!--...-->
    <button id="startGameButton" onclick="startGame()">Start Game</button>
</div>

CSS

Set canvas and backgroundImage properties

canvas {
    position: absolute;
    top: 60px;
    bottom: 205px;
    left: 0;
    width: 100%;
}
#backgroundImage {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

Defined placeholder for fitting backgroundImg into screen

#placeholder {
    width: 100%;
}

Designed mainScreen and startScreen to be uniform and centered

#mainScreen {
    display: none; /* will be displayed after image loads*/
    position: absolute;
    top: 50%; /* Vertically centered */
    left: 50%; /* Horizontally centered */
    transform: translate(-50%, -50%); /* Center the text */
    text-align: center; /* Center the text horizontally */
    color: rgb(0, 0, 0);
    z-index: 2; /* places element on top of other elements (bring to front) */
}
#startScreen {
    text-align: left;
    position: absolute;
    top: 80px;
    left: 270px;
    color: rgb(0, 0, 0);
    z-index: 2; /* places element on top of other elements (bring to front) */
}

Button class for uniformity

.button {
    margin-top: 20px;
    margin: 0 auto;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    display: block;
}

.hidden class for ease of adding and removing elements with button clicks

.hidden {
    display: none;
}

Canvas and Background

Set backgroundImg to appear .onload by setting dimensions and other properties

    const canvasWidth = maxWidth;
    const canvasHeight = canvasWidth / ASPECT_RATIO;  // height is oriented by width
    const canvasLeft = 0;
    const canvasTop = 60;
    
    // Set dimensions for the background canvas
    canvas.width = WIDTH / ADJUST;
    canvas.height = HEIGHT / ADJUST;

    // Set Style properties for the background canvas
    canvas.style.width = `${canvasWidth}px`;
    canvas.style.height = `${canvasHeight}px`;
    canvas.style.position = 'absolute';
    canvas.style.left = `${canvasLeft}px`;
    canvas.style.top = `${canvasTop}px`;

Drew backgroundImg onto canvas

    draw() {
        ctx.drawImage(backgroundImg, 0, 0, canvas.width, canvas.height);
    }

Function to invert colors to fix display issues

    //Invert the colors
    var isFilterEnabled = true;
    const defaultFilter = getComputedStyle(document.documentElement).getPropertyValue('--default-canvas-filter');
    if (isFilterEnabled) {
        canvas.style.filter = "none";  // remove filter
    } else {
        canvas.style.filter = defaultFilter; // Apply the default filter value
    }

Div adjustment based on other element

Adjust size of placeholder div based on size of backgroundImg

//adjusts size of placeholder
function placeholderAdjust() {
    const backgroundImg = document.getElementById('backgroundImage');
    if (backgroundImg.complete) {
        const backgroundHeight = backgroundImg.height;
        placeholder.style.height = backgroundHeight + 'px';
    }
}
    
// Call the function initially and on window resize
window.addEventListener('resize', placeholderAdjust);

// Trigger the adjustment when the window loads
window.addEventListener('load', placeholderAdjust);

Functionality of Buttons to Remove Elements

mainScreen and startScreen buttons remove certain elements of page .onclick

//start button code
document.getElementById('startButton').addEventListener('click', function() {
    var mainScreen = document.getElementById("mainScreen");
    mainScreen.remove();
    var startScreen = document.getElementById('startScreen');
    startScreen.classList.remove('hidden');
});

function startGame() {
        // ...
        // Remove elements using a loop
        for (var i = 0; i < startGameRemove.length; i++) {
            var element = document.getElementById(startGameRemove[i]);
            if (element) {
                if (i === 1) {
                    element.classList.remove('hidden');
                } else {
                    element.remove();
                }
            }
        }
    //...
}

CharacterMonkey.js code and fixes

Overrode parent class Character.js to center chicken horizontally instead of generating randomly at top

export class CharacterMonkey extends Character{
    //...
        this.position = {
            x: this.canvas.width / 2,
            y: 0
        }
}

Overrode parent class to keep chicken character on the floor

    size() {
        super.size();
        if (!GameEnv.prevInnerWidth) {
            this.setY(GameEnv.bottom);
        }
        this.setX(GameEnv.innerWidth/2);
    }

N@tM Extra Credit Peer Reviews

Group name: SAIL

  • Frontend
  • Backend
  • Screen Design
  • API

HOOK! Key features achieved (shown in running demo to graders), 1 minute show
[4]
Good presentation skills, showed all features, everyone talked

KNOWLEGE, HOW IT IS MADE!
[4]
Clearly know a lot, did a lot of things (games, flashcards, quiz, informational, search engine using Unsplash)

VALUE.
[3.7]
Shows a lot of understanding about topic, learned a lot

WOW Factor
[1]
Lots of mini games lots of information

Retrospection

Areas of Success:

  • Effective teamwork and communication with each other

  • Slowly gained more understanding over time, understood code better
    • Code became better and better over time (worked better, more complex)

  • Good at problem solving, continuing to work through adversity

  • Creativity in ideas, flexibility with our requirememnts for our game

Areas of Improvement:

  • We need to simplify problems a lot more and not overthink things. Many of our problems had simple solutions that we overlooked.

  • We needed to be working in one file for a longer time to make integration go smoother

  • We needed more realisitic expectations on what we could and could not get done

  • Work faster and more often, be more efficient so we could finish in a timely manner