Maryam Individual Review
Summary of learning, contributions, and key events
- Issue Review
- HTML and CSS Elements
- Canvas and Background
- Div adjustment based on other element
- Functionality of Buttons to Remove Elements
- CharacterMonkey.js code and fixes
- N@tM Extra Credit Peer Reviews
- Retrospection
Issue Review
Week 1
- Drew canvas including background image
- Set background dimensions
- Positioned canvas on screen
- Created invert button
- Created start screen
Week 2
- Worked on resizing canvas to adjust for header
- Worked on
textBackground
element - Made
backgroundImage
universal - Edited
startGame()
function to remove some elements from screen upon button press
Week 3
- Attempted to begin OOP integration
- Replaced CSS styles with imported stylesheet
- Moved main game to index.html and changed some menu tabs
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
Main Screen with game title set-up leading into Start Screen with character customization
The Armeneggon
A Space Invaders Game
Choose your character
CSS
Set canvas
and backgroundImage
properties
Defined placeholder
for fitting backgroundImg
into screen
Designed mainScreen
and startScreen
to be uniform and centered
Button class for uniformity
.hidden
class for ease of adding and removing elements with button clicks
Canvas and Background
Set backgroundImg
to appear .onload
by setting dimensions and other properties
// 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`; </script>
Drew backgroundImg onto canvas
Function to invert colors to fix display issues
Div adjustment based on other element
Adjust size of placeholder
div based on size of backgroundImg
// Call the function initially and on window resize window.addEventListener(‘resize’, placeholderAdjust);
// Trigger the adjustment when the window loads window.addEventListener(‘load’, placeholderAdjust); </script>
Functionality of Buttons to Remove Elements
mainScreen
and startScreen
buttons remove certain elements of page .onclick
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(); } } } //… } </script>
CharacterMonkey.js code and fixes
Overrode parent class Character.js
to center chicken horizontally instead of generating randomly at top
Overrode parent class to keep chicken character on the floor
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