Pixel Battle on Flow blockchain: Draw. Battle. Earn. Own pixels in the Web3 world!
Pixel Battle is a decentralized Web3 game built on the Flow blockchain. It features a 100x100 pixel canvas where each pixel can be individually colored by players. The first time a pixel is colored, it has a fixed base price. Each time the pixel is repainted, the price doubles, and the payment goes to the previous owner of that pixel. This creates an exciting gameplay loop where players are motivated to capture and protect valuable territory, create pixel art, and earn coins. The system encourages both artistic expression and strategic thinking, blending creativity with real economic incentives in a competitive, blockchain-powered environment
What to upgrade?
The project consists of a smart contract that handles the core game logic and a frontend interface for visualization and interaction. The frontend is built using React with TypeScript and is fully responsive, ensuring a smooth experience across both desktop and mobile devices. It connects to MetaMask and communicates directly with the smart contract to perform key actions such as querying the current price of a specific pixel, repainting it, and loading the transaction history related to pixel updates. This transaction data is then used to render the canvas and visualize pixel ownership and changes in real time.
The smart contract itself is written in Solidity and deployed on the Flow EVM Testnet. This choice allowed us to leverage Solidity’s mature ecosystem while building on Flow’s growing Web3 infrastructure. Integrating the frontend with the Flow EVM required some workarounds, particularly for event listening and gas optimization. Despite these challenges, the result is a tightly integrated dApp where on-chain game logic and off-chain rendering work seamlessly to deliver an interactive, rewarding pixel battle experience.