Nature of Code – Final Project


We spend a lot of time on web browser every day. But sometimes it makes me feel boring about tons of words and images there. So what if there is a game to that can take advantages of those elements in the web like links, divs, or images? Therefore, I want to create a chrome extension that can interact with those elements in the browser.

Three steps for creating this chrome extension
  • Create a game with Matter.js (a library to create physic world)
  • Make a chrome extension that I can implement this game to webpage.
  • Combine them together

For nature of code part

I use Matter.js library which is able for user to create a physic world by javascript. It can add velocity, collision, friction and lots of circles, rectangles with physics. So the character in this game can shoot, walk, jump, crouch, as well as grab and drop objects.

But I am not able to get the location of bullets, if I can do that, I will have more possibilities to interact with the elements in the webpage. For example, shooting a link and it will rotate. Besides, this game can go further like when this character jumps onto a picture, it will zoom in or direct to the link.






Grabbing and Dropping


For Chrome extension part

I use activeTab in permissions of manifest.json file to get permission of chrome tabs. So it can be executed to each chrome tabs.


And then, separating the scripts with background script which will send the message to content script. If the content script gets the message, it execute the script of my game.


The first version of my game is only creating a game in web browser. So the users only have to go as further as they can, but it does not really interact with the web page.

As a result, there is second version that users can walk on elements that have link (url). Although it is not the final version my goals, it still give me feedback that it is interesting to go further. As mentioned above, I will try to make user can interact all the elements in the webpage.
Last but not least, for building this game in the future. I want to make it for multiple users and continued to play this game beginning from last time. Perhaps they can shoot each other to get scores, or this game will create maps depending on the webpage they visit and store they data like scores, character features, and so on.

Leave a Reply

Your email address will not be published. Required fields are marked *