Video:
Our project is a game, where a vertically stretched blue square is a player (or the car) and they avoid black horizontally stretched squares (the obstacles) to get yellow, blue, and green squares, which are our power-ups in the game. Yellow squares increase points, blue squares block against the black horizontally stretched squares and green squares slow everything down. These colors though can be changed when you start the game, with an editor built into the game.
Gavin. I first worked on the initial commit for the display, when it was 3 objects that you controlled using WASD controls before that was scrapped in favor of the objects falling and attacking you. I created box targeting, where the black boxes fell on the player along with integrating the controls for the color editor. Having the sliders correspond with colors, having the binary switch as the slider changes, and storing color data and displaying it. Finally, I built the 2 step system to start the game and polished the speed and shield controls to work.
A problem that I pushed on myself was trying to get the code to run, but effectively. Though I don’t count this as code golf, I was trying to use as many built-in JS functions as possible toward the end, causing for progress to be much slower, but I felt that I improved as a coder
Key commit:
Aditya R. I built the base of the game. I worked on a version of the game in Python and worked with Sai to translate that code into Javascript. The base game includes a moving car, controlled using the computer's arrow keys. I also created a random obstacle generator, which created the black boxes that would move against the car, coupled with a function that would end the game once an obstacle “collides” with the car. Lastly, I started work on the mystery boxes/powerups on the game. I added the timers to them so they expire after a while. Gavin finished work on them so that they do what they are supposed to in the game.
Problem: When translating the code from Python to Javascript, I used Pygame in the Python version, and this could not be switched to Java. So, to get past this error, I figured out how to use an HTML canvas, which allowed me to run the game instead.
One of my Key Commits: 869836f
Aditya S. I integrated the binary feature of the game. However, it was later scrapped, but improvised thanks to Gavin. At the end of the game, I made all the colors of the game inverted and displayed the current color of the player in hex and binary, and also its inverse. I also styled the buttons of the game, to make it more visually appealing, using some CSS. I made a pre-game screen to tell the user to choose their settings and then click the “start game” button. I also added WASD controls to make it easier for left-handed players as well. The game is now compatible with arrow keys and WASD controls. I added a score tracker and displayed whether the shield and score boost were active or not. Finally, I created the game over the screen and allowed the user to click the box to play again.
A problem I encountered while inverting the colors at the end of the game was that only the player’s color would invert, and not the background color. I had to write a separate line to invert the background as well.
30530f1
Here is one of my key commits, where the colors successfully inverted at the end of the game.
814af32
When I was adding the WASD controls, I forgot to specify the boundaries, as a result, the player was going through the wall instead of stopping. This was a fix to the problem, and the game is now compatible with both WASD and arrow keys.
Sai. I worked on the color conversion functions and the translation of the Pygame to JavaScript. In order to change the color we first take the hex values of the colors present and then convert them to binary. After that, the inversion process starts where 0’s go to 1’s and 1’s go to 0’s. For example, 01101000 goes to 10010111. Finally, we convert the new binary number back to hexadecimal and change the colors of the corresponding objects in the game. When translating the main game from Python to javascript I used Aditya’s help in understanding what function did what. Then, with the help of chatGPT, I was able to figure out the correct syntax to use when changing the game. The main problem was that the main structure of the code wouldn’t easily convert to JavaScript since the languages are almost completely different. After moving multiple parts of the code around it resulted in a dramatic structural difference but a very similar output. From there, my teammates helped with adding all the features and making the project more seamless.
1e93dda#diff-04fce845588755dcd5ae3595a895bf3c532d3bbf3d7bc090cd3e6cb13406b9c5
ffcc403#diff-aea2aa0bdc4179237467f5aa006850937423f84d049be5aae4270a5ee2750cde
Video:
Our project is a game, where a vertically stretched blue square is a player (or the car) and they avoid black horizontally stretched squares (the obstacles) to get yellow, blue, and green squares, which are our power-ups in the game. Yellow squares increase points, blue squares block against the black horizontally stretched squares and green squares slow everything down. These colors though can be changed when you start the game, with an editor built into the game.
Gavin. I first worked on the initial commit for the display, when it was 3 objects that you controlled using WASD controls before that was scrapped in favor of the objects falling and attacking you. I created box targeting, where the black boxes fell on the player along with integrating the controls for the color editor. Having the sliders correspond with colors, having the binary switch as the slider changes, and storing color data and displaying it. Finally, I built the 2 step system to start the game and polished the speed and shield controls to work.
A problem that I pushed on myself was trying to get the code to run, but effectively. Though I don’t count this as code golf, I was trying to use as many built-in JS functions as possible toward the end, causing for progress to be much slower, but I felt that I improved as a coder
Key commit:
Aditya R. I built the base of the game. I worked on a version of the game in Python and worked with Sai to translate that code into Javascript. The base game includes a moving car, controlled using the computer's arrow keys. I also created a random obstacle generator, which created the black boxes that would move against the car, coupled with a function that would end the game once an obstacle “collides” with the car. Lastly, I started work on the mystery boxes/powerups on the game. I added the timers to them so they expire after a while. Gavin finished work on them so that they do what they are supposed to in the game.
Problem: When translating the code from Python to Javascript, I used Pygame in the Python version, and this could not be switched to Java. So, to get past this error, I figured out how to use an HTML canvas, which allowed me to run the game instead.
One of my Key Commits: 869836f
Aditya S. I integrated the binary feature of the game. However, it was later scrapped, but improvised thanks to Gavin. At the end of the game, I made all the colors of the game inverted and displayed the current color of the player in hex and binary, and also its inverse. I also styled the buttons of the game, to make it more visually appealing, using some CSS. I made a pre-game screen to tell the user to choose their settings and then click the “start game” button. I also added WASD controls to make it easier for left-handed players as well. The game is now compatible with arrow keys and WASD controls. I added a score tracker and displayed whether the shield and score boost were active or not. Finally, I created the game over the screen and allowed the user to click the box to play again.
A problem I encountered while inverting the colors at the end of the game was that only the player’s color would invert, and not the background color. I had to write a separate line to invert the background as well.
30530f1
Here is one of my key commits, where the colors successfully inverted at the end of the game.
814af32
When I was adding the WASD controls, I forgot to specify the boundaries, as a result, the player was going through the wall instead of stopping. This was a fix to the problem, and the game is now compatible with both WASD and arrow keys.
Sai. I worked on the color conversion functions and the translation of the Pygame to JavaScript. In order to change the color we first take the hex values of the colors present and then convert them to binary. After that, the inversion process starts where 0’s go to 1’s and 1’s go to 0’s. For example, 01101000 goes to 10010111. Finally, we convert the new binary number back to hexadecimal and change the colors of the corresponding objects in the game. When translating the main game from Python to javascript I used Aditya’s help in understanding what function did what. Then, with the help of chatGPT, I was able to figure out the correct syntax to use when changing the game. The main problem was that the main structure of the code wouldn’t easily convert to JavaScript since the languages are almost completely different. After moving multiple parts of the code around it resulted in a dramatic structural difference but a very similar output. From there, my teammates helped with adding all the features and making the project more seamless.
1e93dda#diff-04fce845588755dcd5ae3595a895bf3c532d3bbf3d7bc090cd3e6cb13406b9c5
ffcc403#diff-aea2aa0bdc4179237467f5aa006850937423f84d049be5aae4270a5ee2750cde