Documenting my Journey

  • As this was my first Computer Science course ever, the journey is definitely very rough. I experienced a lot of difficulties during the first few weeks such as running the terminal commands, understanding how they work, and overall implementing/making all the code.

Project: My Time Working at CodeClimbers

  • This project is very important, as it is worth half of my grade and took over half of my class time. I learned how to cooperate with my three teammates (Ian, Gavin, and John) in order to produce a good quality performing game! I’ll be honest though, Gavin is the most hard-working out of all of us, he’s able to work on the code diligently and acted as a leader. I, on the other hand, didn’t know where to start half of the time and mostly worked on other stuff unrelated to coding (e.g. finding sprites, html/markdown). Looking back, I wish I could experiment more with OOP (Object-Oriented Programming) so I can understand how the code works rather than only doing it a couple of times. However
  • I was able to modify many objects, I just haven’t done them completely by myself, but I guess that’s what a team is for. Code-wise, I was able to stop the player from double-jumping (though it has some delay when free falling) and made an entire menu (which is really nice, but it is made out of html, which I don’t think is considered code). Besides my “code” work, I was able to make some quality reflection and plans such as this one, which is nice. I found a sprite, but it is not being used.
  • For this class, I seemed to be on the artistic side (even though I’m not much of an artist) for the project overall. I honestly wish I could work on this project so that it won’t seem like I’m dragging. I’m not sure if I will be able to make it to Night at the Museum (where we showcase our work).
  • If I could go back in time with my new-found knowledge, I could work on the code components more, but I have to think about it now. I wrapped up all of my findings, and I am going to take all of my knowledge for next trimester.

Code Examples (References):

  • Making the Main Menu
  • Fixing Double Jump on the OOP for the Player

Code for CodeClimbers (game.js): https://gavincopley.github.io/sharedGame/




<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  <title>CodeClimbers</title>
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

.container {
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar {
  width: 100%;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.15);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items {
  display: flex;
}

.navbar .nav-container li {
  list-style: none;
}

.navbar .nav-container a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover{
    font-weight: bolder;
}

.nav-container {
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items {
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items {
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
</head>

<body translate="no">
  <body>
    <div class="game">
      <script>
        var isWin = false;
      </script>
      <script id="game0" type="module"></script>
      <script> 
        console.log(isWin + "isWin!!")
        const script = document.getElementById("game0");
        script.src = "/student2.0/assets/js/codeClimbers/game.js";

          function switchLevel() {
            console.log("change!!");
            if (isWin === true) {
              updateGameScriptSource();
              console.log("its true!");
            };
              
            function updateGameScriptSource() {
              script.remove()
              const newScript = document.createElement("script");
              newScript.id = "game0";
              newScript.type = "module";
              newScript.src = "/student2.0/assets/js/codeClimbers/game2.js";
              document.body.appendChild(newScript);
              console.log("new game!!");
              console.log(script.src);
            };
          };
          setInterval(switchLevel, 100);
      </script>
    </div>
    <nav>
      <div class="navbar">
        <div class="container nav-container">
            <input class="checkbox" type="checkbox" name="" id="" />
            <div class="hamburger-lines">
              <span class="line line1"></span>
              <span class="line line2"></span>
              <span class="line line3"></span>
            </div>  
          <div class="logo">
            <h1>CodeClimbers</h1>
          </div>
          <div class="menu-items">
            <li><a href="https://gavincopley.github.io/sharedGame">Home</a></li>
            <li><a href="https://gavincopley.github.io/sharedGame/about/">About</a></li>
            <li><a href="https://gavincopley.github.io/sharedGame/blogs/">Blogs</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="https://gavincopley.github.io/sharedGame/compsci/">Timebox</a></li>
          </div>
        </div>
      </div>
    </nav>
  </body>
  
  
  
</body>
<img id="roadImage" src="/student2.0/assets/js/img/road.png" style="display: none;">
<img id="floorImage" src="/student2.0/images/road.png" style="display: none;">
<img id="backgroundImage" src="/student2.0/images/background.png" style="display: none;">
<img id="buildingImage" src="/student2.0/images/building.png" style="display: none;">
<img id="spriteRight" src="/student2.0/images/spriteRight.png" style="display: none;">
<img id="spriteLeft" src="/student2.0/images/spriteLeft.png" style="display: none;">
</html>

<style>
    body {
        margin: 0;
    }
</style>

<canvas></canvas>

Extra Credit:

“The MOVE” (P4: CSSE):

  • Hook: 4.0/4.0

  • Explanation: There is a title screen, which has great detail upon playing the game. There is an eerie mood once I start playing the game. For a first impression, this game is very impressive and has a lot of potential.

  • Knowledge: 4.1/4.0

  • Explanation: I was able to see the code, and there are nearly thousands of lines! It was used for various objects (I.e. player, boxes, door). It is very impressive and it was executed very well with little to no bugs.

  • Value: 1.0/1.0

  • Explanation: The game is a horror game, and it conveys the tone very well.

  • WOW Factor: +1 Point

  • Extra Note: I am truly astonished by the quality of the game. If I played this game blind and had to guess which class it was from, I would think that it’s from CSA. Bravo to everyone who worked on this game!

  • TOTAL: 10.1/10.0

The MOVE: https://trystan-schmits.github.io/Group//c4.1/2023/10/25/Game.html

Universium (P4: CSSE):

  • Hook: 3.9/4.0

  • Explanation: I really like the music that is playing as well as the animation of the characters and the background.

  • Knowledge: 3.75/4.0

  • Explanation: The game shows excellent use of code and object orienting programming but I think there could be more added (etc. the enemy gets faster over time so that the game doesn’t go on forever)

  • Value: 0.95/1.0

  • Explanation: Same thing as knowledge, there could be more added, but I think everything that is on the game is excellent on its own.

  • WOW Factor: Endless Mode (+0.8 points)

  • Total: 9.4/10

Universium: https://justinq-dnhs.github.io/Game/

Astronomer (P3: CSA):

  • Hook: 3.6/4.0

  • Explanation: The website itself is relatively fine, but I didn’t feel immediately drawed in to explore the website. I think there could be a bigger animation or more appealing text to make this hook more enhanced.

  • Knowledge: 3.9/4.0

  • Explanation: I really love the design of how they incorporated AI to the website and how each planet has a ton of information

  • Value: 0.98/1.00

  • This website is shown to have a lot of knowledge and has a lot of code fundamentals that make the website very appealing. Once I started to explore the website, it just got better.

  • WOW Factor: Incorporating AI with search results.

  • TOTAL: 9.48/10.00

Astronomer: https://paaraspurohit.github.io/team-premium-frontend/

Rubric:

  • Code in blog. JavaScript is primary focus to check for this review, particularly how you have learned JavaScript and Game programming. Links, notes, videos watched, ChatGPT session are valuable elements to maintain in personal blog.

  • Usage of blog. Teacher should be convinced that you are using your Blog as Study Guide for this course and future trimesters. Classes change and project knowledge should be capture in you own repository. After each class, or in future discussion on learning in code you will need to show your own projects, history, and analytics.

  • Trimester 1 reflection. Memories and learnings from trimester 1. Reflective summary of things you learned, positive accomplishments, Reflective summary of things you intend to learn in trimester 2 that you did not get to, opportunities for growth.