Snake-Game

A project with functional snake game and front-end prototype for blockchain integration built using React.js and Styled Components.

The Snake game is a single-page personal project designed and developed using only React.js library and Styled components functionality to localize the CSS. The main idea behind the project is to use a widely understood and known snake game to familiarize people with the blockchain ecosystem. In the final version, the user can create a unique snake account in the snake game smart contract using the game console and Metamask connected to a blockchain. The scores obtained by playing the game are redeemed as Snake Tokens (a fungible ERC-20 token) at a fixed exchange rate. The so redeemed tokens simulate a currency and are to be used to change the color, head icon, and various other elements of the game. The project is a continuous learning endeavor that I will keep upgrading as I learn the new technologies. Currently, I have designed the complete UI and developed a working snake game with the front-end required for blockchain integration. Feel free to play the game yourself and interact with the console or look at the code using the buttons below.

Play Game

View Code

The website opens with an instruction popup in the console, and proceeds with the flow as described in the images that follow.

‍

Instruction Screen — The game starts with an instruction screen in the console, user may explore the console or close it and proceed with playing the game.

‍

Game Board — Classic Snake and Mouse game with variable speeds and corresponding scores. Arrow keys are used to control the direction. The user can change speed or access console only in pause mode. Once in play mode, auxiliary buttons disable.

‍

Account Tab, the connected snake account details are displayed here. User can redeem scores or snake token or fetch the snake details from connected blockchain using the buttons. The last redeemed scores and corresponding snake token are listed here.

‍

Transaction Tab — Transact tab, the user can interact with the blockchain here. Transactions like new account creation or updating the snake name, change color and change head icon can be performed here. A transaction record is maintained in this tab.

‍

Gallery

No items found.

Other projects:

Snake-Game

The EVM

Posters and Caricatures