Daisy Zhang’s Individual Review
My key tangibles and learnings from this tri:
- Cases and functions via the snake game
- Cases and operators in the Calculator
- Learning how to use frames and animate with classes in Sprites
- Collision mechanisms in creating platforms
- Adding conditions and search Query in creating my minigames
Snake Game
I figured out how to add WASD keys by using cases, also learned logic in Javascript.
let changeDir = function(key){
// test key and switch direction
switch(key) {
case 37: // left arrow
case 65: // 'A' key
if (snake_dir !== 1) // not right
snake_next_dir = 3; // then switch left
break;
case 38: // up arrow
case 87: // 'W' key
if (snake_dir !== 2) // not down
snake_next_dir = 0; // then switch up
break;
case 39: // right arrow
case 68: // 'D' key
if (snake_dir !== 3) // not left
snake_next_dir = 1; // then switch right
break;
case 40: // down arrow
case 83: // 'S' key
if (snake_dir !== 0) // not up
snake_next_dir = 2; // then switch down
break;
}
}
Cases in Calculator
I learned how to use math operators in the Calculator. The operations were separated by cases, and I added the square root and divide functions by adding cases to the calculator.
// Calculator
function calculate (first, second) { // function to calculate the result of the equation
let result = 0;
switch (operator) {
case "+":
result = first + second;
break;
case "-":
result = first - second;
break;
case "*":
result = first * second;
break;
case "√":
result = Math.sqrt(first);
break;
case "/":
if (second === 0) {
// Handle division by zero
output.innerHTML = "Error";
firstNumber = null;
nextReady = true;
return;
}
result = first / second;
break;
default:
break;
}
return result;
}
Sprites
I learned how the canvas is positioned. The origin is in the top left corner. The lower you go, the greater the y coordinate and the more right indicates a greater x coordinate, which seems counterintuitive. Also, I learned that the frames are animated with the “animate()” function, which is key.
I also learned about spritesheets and how to portion a spritesheet into different frames by dividing the size by the number of x frames and y frames. Additionally, the frames were kept track of via indicies where if there were 7 frames that meant the indicies ranged from 0-6.
In using div containers, I could organize the different movements into different ids and change among them.
<div id="controls"> <!--basic radio buttons which can be used to check whether each individual animaiton works -->
<input type="radio" name="animation" id="back" checked>
<label for="back">Back</label><br>
<input type="radio" name="animation" id="right">
<label for="right">Right</label><br>
<input type="radio" name="animation" id="front">
<label for="front">Front</label><br>
<input type="radio" name="animation" id="left">
<label for="left">Left</label><br>
</div>
These ids could then be referenced when animating the different actions. The maxFrame function allowed me to set a different number of frames for each row, depending on the action.
// update frameY of wizard object, action from idle1, idle2, idle3, scare, back, skip, and walk radio control
const controls = document.getElementById('controls');
controls.addEventListener('click', function (event) {
if (event.target.tagName === 'INPUT') {
const selectedAnimation = event.target.id;
switch (selectedAnimation) {
case 'idle1':
wizard.frameY = 0;
wizard.maxFrame = 3;
break;
case 'idle2':
wizard.frameY = 1;
wizard.maxFrame = 3;
break;
case 'idle3':
wizard.frameY = 2;
wizard.maxFrame = 3;
break;
case 'scare':
wizard.frameY = 3;
wizard.maxFrame = 4;
break;
case 'back':
wizard.frameY = 4;
wizard.maxFrame = 4;
break;
case 'skip':
wizard.frameY = 5;
wizard.maxFrame = 12;
break;
case 'walk':
wizard.frameY = 6;
wizard.maxFrame = 7;
break;
default:
break;
}
}
});
I applied this knowledge the creating the goblin, wizard, and bunny sprites.
Platforms
I learned the collision mechanisms from the Mario game and applied them to my starburst game. Implementation of collision mechanism:
// Check for collision between player and platform
if (
player.position.y + player.height <= platform.position.y &&
player.position.y + player.height + player.velocity.y >= platform.position.y &&
player.position.x + player.width >= platform.position.x &&
player.position.x <= platform.position.x + platform.width
) {
player.velocity.y = 0;
}
Minigames
I created two minigames with the help of Youtube tutorials: tic-tac-toe and rock-paper-scissors. In both of these games, I used boolean logic, loops, and constructors.
For the Tic-tac-toe game, I used arrays to separate each of the cells (using div) and assign winning combinations to certain arrays of cells.
// Tic-tac-toe logic using arrays
function checkScore() {
const allSquares = document.querySelectorAll(".square")
const winningCombos = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], //horizontal combos
[0, 3, 6], [1, 4, 7], [2, 5, 8] //vertical combos
[0, 4, 8], [2, 4, 6]
]
winningCombos.forEach(array => {
const circleWins = array.every(cell =>
allSquares[cell].firstChild?.classList.contains('circle'))
if (circleWins) {
infoDisplay.textContent = "Circle Wins!"
allSquares.forEach(square => square.replaceWith(square.cloneNode(true)))
return
}
})
winningCombos.forEach(array => {
const crossWins = array.every(cell =>
allSquares[cell].firstChild?.classList.contains('cross'))
if (crossWins) {
infoDisplay.textContent = "Cross Wins!"
allSquares.forEach(square => square.replaceWith(square.cloneNode(true)))
return
}
})
}
In the rock-paper-scissors game, a cool thing I learned to do was use the Math.random function to generate a random number from 1-3.
function computerTurn(){
const randNum = Math.floor(Math.random()*3) + 1; //get a random number between 1 and 3
switch(randNum) {
case 1:
computer = "ROCK";
break;
case 2:
computer = "PAPER";
break;
case 3:
computer = "SCISSORS";
break;
}
}
Also, I used logic with symbols to determine whether the computer or player won.
function checkWinner() {
if(player == computer) {
return "Draw!";
}
else if(computer == "ROCK") { //if the computer is equal to rock, is the player equal to paper?, if so then return string (win), if false return different string (lose)
return (player == "PAPER") ? "You Win!" : "You Lose!"
}
else if(computer == "PAPER") { //if the computer is equal to paper, is the player equal to scissors?, if so then return string (win), if false return different string (lose)
return (player == "SCISSORS") ? "You Win!" : "You Lose!"
}
else if(computer == "SCISSORS") { //if the computer is equal to scissors, is the player equal to rock?, if so then return string (win), if false return different string (lose)
return (player == "ROCK") ? "You Win!" : "You Lose!"
}
}
Night at the Museum
At Night at the Museum, we presented our project with a Hook, Project description, and separate minigames. I reviewed three other projects from CSA, and was especially impressed by a group’s facial recognition emotion project, which could sense your emotion (happy/sad) and give you an inspiration quote. These inspiration quotes were stored in an API, or a sort of big library that the website could pull from. I was also impressed by a group’s personal everything app which had a to-do list, planner, and weather-checker.
Trimester Reflection
This trimester, I learned how to utilize basic markdown and code to build a website using Github Pages. I learned how to create my own blog, and connected javascript, css, and HTML to create comprehensive sites and games. In the beginning, I was supported by the teacher’s code to build a snake game, game of life, and a calculator. Additionally, I contributed to our team game by helping implement sprites and collision mechanisms. I also added minigames from YouTube tutorials which used logic, if statements, and arrays. This helped me get a better intuitive understanding of code.
I am still trying to work on having a more positive mindset towards code. I find myself putting off code and using extra time outside of class to do other things. I was overwhelmed by the code of my peers and the teacher’s code and was struggling to break it down bit by bit. However, with help from YouTube and ChatGPT I was able to understand the code a bit better. I am still trying to learn how to “think in code” and get a better grasp of the basics of code. My next steps are to work on small projects, with the help of YouTube and also inspired by my own interests of reading, writing, and math.
In the future, I want to work on more projects to strengthen my coding skills. I hope to incorporate more math and logic into various games, and some of my ideas include a probability game where you can calculate the probability to roll a certain number on two dice. I think it would also be fun to try and make a randome meme generator that generates random memes from a library (partly inspired by night of the museum). Overall, I would like to work on more projects that incorporate my interests and relate to my interests so I can be motivated to do them.