Part 1
Over the past 12 weeks, I have done many things. These include:
- Learning how to make my blog and important basics of coding. At first, I didn’t know how to use Github and was having trouble with the tools, but I was able to figure them out and get them to work. The lessons from others have also enhanced my experience and broadened my understanding of coding in JavaScript.
- I learned how to make and change parts of a simple game to make it my own. I improved upon the basic game of snake and added my own touches that made my version unique
- I learned more about how these lessons can be applied to the real world through the computer science panel. This panel really opened my eyes to the real world and how these skills that I am learning right now are useful later in life. I took important notes for myself that will help me in the present and the future.
- Creating lessons and teaching others about a certain part of code. I had to make sure to help make popcorn hacks and homework that matched the lessons that were being taught, along with explaining and giving clear instructions
- Going through the design process to develop the RPG. We had to brainstorm and come up with ideas on what to do for the RPG, then implement those ideas and bring them to life with our code
Part 3 & 4
Tinkers:
- I made the text box at the bottom of the screen show up and still keeps the game going
if (hintBox && hintText) {
hintText.innerText = `${this.name || "NPC"}: "${this.hint}"`;
hintText.classList.remove("hidden");
hintBox.style.display = "block";
document.getElementById("hint-close").onclick = () => {
hintBox.classList.add("hidden");
hintBox.style.display = "none";
};
}
#hint-box {
position: fixed;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 400px;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 15px;
border-radius: 10px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
#hint-box.hidden {
display: none;
}
#hint-close {
margin-top: 10px;
padding: 5px 10px;
background: red;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
The 1st code cell shows the box for the hint and how the text appears. The 2nd and 3rd code cell show the html for what the box looks like and how the close button works.
- Made interactions happen when you press a certain key of the programmer’s choice instead of just “e” and “u”
handleKeyDown({ keyCode }) {
if (keyCode === this.hintKey && this.hint) {// Player 1 interaction
this.handleKeyInteract();
}
}
const sprite_src_ditto = path + "/images/gamify/ditto.png"; // be sure to include the path
const sprite_data_ditto = {
id: "Ditto",
name: "Ditto",
greeting: "Hi! I'm Ditto! Nice to meet you!",
hintKey: 90,
hint: "Planets are Indeed very large aNd you can see some by looKing at the night sky. By the way, my favorite letter is M!",
src: sprite_src_ditto,
SCALE_FACTOR: 8, // Adjust this based on your scaling needs
ANIMATION_RATE: 50,
pixels: { height: 256, width: 256 },
INIT_POSITION: { x: width / 4, y: height / 4 },
orientation: { rows: 4, columns: 4 },
down: { row: 0, start: 0, columns: 4 },
left: { row: 1, start: 0, columns: 4 },
right: { row: 2, start: 0, columns: 4 },
up: { row: 3, start: 0, columns: 4 },
hitbox: { widthPercentage: 0.45, heightPercentage: 0.2 },
};
The 1st image is in the NPC.js and shows how it takes in the ascii keycode and waits for that to be pressed to start, instead of it just being the key “e” or “u” The 2nd image is in GameLevelSpace and shows how you can customize the keycode (Ditto’s keycode, 90, is the letter Z)
- Made it so that when you press the right key and try to interact with the character, you have to be within a certain distance.
handleKeyInteract() {
var players = GameEnv.gameObjects.filter(obj => obj instanceof Player);
var npc = this;
var names = [];
if (players.length > 0 && npc) {
players.forEach(player => {
if (player.position.x !== undefined && player.position.y !== undefined) {
var distance = Math.sqrt(
Math.pow(player.position.x - npc.position.x, 2) + Math.pow(player.position.y - npc.position.y, 2)
);
console.log(`Checking distance to ${this.name}: ${distance}`);
if (distance <= 150) {
names.push(player.name || "Player");
const hintBox = document.getElementById("hint-box");
const hintText = document.getElementById("hint-text");
if (hintBox && hintText) {
hintText.innerText = `${this.name || "NPC"}: "${this.hint}"`;
hintText.classList.remove("hidden");
hintBox.style.display = "block";
document.getElementById("hint-close").onclick = () => {
hintBox.classList.add("hidden");
hintBox.style.display = "none";
};
}
console.log(`${this.name} interacted with: "${player.name || "Player"}"`);
} else {
console.warn(` Player too far from ${this.name} (${distance}px away)`);
}
}
});
}
}
This tinker for me took the most time. At first, you were able to press the button and the message would pop up wherever, but with this edit to the handleKeyInteract, now it checks if you are a certain distance from the npc, and if you are, it triggers the interaction. This code creates an array of names of the npcs that are close to the player. It then checks the distance between the names in the array and the player to see if the player is in range.
Our flowchart!
A sprite sheet for the player that I made:
Part 4
N@TM
We saw lots of great games at N@TM!
One of the games we reviewed was very interesting where the player had to reach the wizard at the other side of the screen to get to the next level, but they had to do this before the bat reached the player, otherwise the player would explode. The explosion was a very cool feature they added. Something else they had was a black hole that the player could enter to get to the next level.
Another very cool game we reviewed was where you had to interact with different npcs to escape the room, similar to ours, except there were multiple ways the conversation could go, since there were options for you to choose for your reply. There was also a quiz that got graded automatically.
Feedback we recieved
I like how the npcs have a spinning idle animation. It looks really cute!!!! Also, I like how to solve the game and escape you have to talk to multiple npcs and figure out puzzles. Good job! Btw you can improve the game by slowing down chillguy cuz rn bro literally thinks he’s Lightning Mqueen himself
I like the cute pictures and interactivity. It’s a nice puzzle. It is challenging to figure out the puzzle and solve the game. Good job!
This game was simple but very cute and fun to play! I loved the way the puzzles were made and the little hints that were given to the player in order to lead them in the right direction. In my opinion, this is a great game to start out with and could always use more puzzles to build onto it. Overall, this game is personally right up my alley and I enjoyed playing it and figuring out the puzzles with a little help from the NPCS!
How we plan on improving:
Based on the reviews we made our character slow down and are currently making the game easier for the user to understand and interact with. We made the character slow down by adjusting the animation rate. We are also planning on making a proximity function so that pressing a key will only reveal the text box if the player is in the npcs hitbox, otherwise the person playing the game can just end the game without going through the npcs.
Part 5
Throughout this trimester, this class has taught me many concepts about computer science that I would never have learned otherwise. Before this class, I wanted to understand how to create my own games and also wanted to learn about how to use GitHub.
Through this class, I learned both of these things, and so much more that I had never even dreamed of. I was able to gain a deeper understanding of classes and methods, which I had struggled with understanding earlier, along with learning some basic Linux commands. I have even gained some confidence with presenting to others at Night at the Museum! I learned more about myself, too.
I believe that I still need to learn more and more about coding, along with making sure to manage my time so that I keep a constant amount of work during each project. Some things that I have learned that I am good at are being able to understand necessary parts of the code to make my own.
One of the reasons that I took this class was because I was considering pursuing a career in computer science. I want to make fun games that can make people laugh, smile, and possibly change their lives for the better. I hope that these teachings can help me do that, and I will continue to try to improve, even if I won’t be doing CSSE 2 next trimester.
Overall, this trimester, I will grade myself a 0.93/1.0. I did well and was satisfied with a lot of what I did. Even so, I still believe that I could have done a lot of things better, but it is recognizing these faults that allow us to grow. I will keep this class in mind in a lot of my future decisions and won’t forget the important lessons that this class has taught me.