Partiblock
Designer & Programmer | HTML, CSS, JavaScript | 20 weeks | Group Project (8)
Project Description
Partiblock is a game that is made in collaboration with Kulturhuset which will be displayed on their screen on Sergels Torg in Stockholm. Partiblock is a 4 in-a-row collaboration game that will be played on a 4×60 blocked canvas where the participants could through a website choose between four different colors and vote on a spot to place the next box. The game is played with rounds that are one minute long and a box would be placed for each color depending on which one had the most votes.
You can play the game here:
My focus points
Implementing the gameboard
With the help of AI I designed and implemented the game board which will be displayed on Kulturhusets screen making sure it is clear and visable for everyone.
Integrating the database
Connecting all the different websites we have created and making it so that all the bricks places by the players will be the same on their mobile screen and on the big screen.
Implementing the canvas
Goal
My goal for this project was to make sure the screen would fit Kulturhuset’s wide screen as well as making sure that the gameplay worked and that the player through a website could vote on a desired position to place on the screen. One important point is to make sure the QR-code will be scannable from any device as well as being able to scan it from anywhere on Sergels torg since this was the only way the player could play the game.
Solution
My solution to this was to make sure that the boxes that fit a color would be as big as possible and to make them brightly colored so that it could be visible from anywhere. This was especially important since the screen was outside. To get the QR-code right was also important where we had to test the game with different devices to make sure it works. One issue that was discovered when we tried to make everything look more aesthetic was that Android devices need to have a high contrast between the black and white of the QR-code. When we have a more transparent black Androids could not scan the code so we made the decision to make it not look as esthetic to have the preferred functionality.
Iterations for the future
The current solution works, although there could be some changes made. First of all, as can be seen in the GIF above, we have a very nice background that fades between different colors. Although this is something that cannot be seen on the big screen at Kulturhuset. This means that we use unnecessary resources for the computer that hosts this website. To solve this we could either adjust it so that the colors only show in the middle of the screen where the grid is, or we could simply remove it so that the grid will be easier to see. Furthermore we have created the colors of the different blocks with the thought that they should be bright and visible from everywhere. Although the grid that the blocks can be placed on aren’t as easy to see outside which can make it more difficult for the player to know where they will place the block. To improve this we have to compensate for the aesthetics and make the grid a more white-ish color.
Integrating the database
Goal
The goal with the database integration is that all the moves that the players do and their votes will be saved at one place to make sure that everyone will see the same board. One important thing here is also that the voting will be smooth and that people cannot exploit the voting by example reloading the website.
Solution
To make sure that this works we implemented our code with firebase, which is a free database site. There we saved what color were on what row and column, and that both the script for the big screen and the mobile version will be able to get information from this database and add information. More important things that had to be implemented was a global timer, this since everyone need to have the same window that they could cast their votes. To make sure that people cannot exploit the voting system we also save anonymous codes connected to IP devices to make sure that you cannot vote again if you were to reload the site. Another important thing that we implemented so that people do not exploit the voting is to generate a QR-code that updates so that no one can take a picture of the QR-code and send to their friends. This is important since we want to limit the risk of players writing out bad words or symbols on the screen. For this case a third site was also created in case something bad is starting to write out on the screen there is a button which will reset the whole database and thus restart the game.
Iterations for the future
The created solution works, but some changes could be applied. One large change is regarding the security around the project. Right now we have some rules to make sure that a player cannot vote on a block that is already picked and to give the user a cooldown. Although to make the system more robust it would be better to move user cooldown and all other game logic to Firebase Cloud Function to make it more robust against cheating and sabotaging.
You can play the game here: