How to Create a Simple Crypto Clicker Game

<div style="font-family: 'Open Sans' !important"><div style="font-family: 'Open Sans' !important">Creating a simple crypto clicker game is a fun way to learn the basics of <a href="https://blockchain.oodles.io/cryptocurrency-development-services/">crypto development</a>. In this tutorial, we build a basic crypto clicker game where users can earn cryptocurrency by clicking a button. We will use HTML, CSS, and JavaScript for the front end and a simple Ethereum smart contract to handle the blockchain logic. <h2>Project Structure</h2> Let's start by setting up the project structure. Create a new folder for your project and inside it, create the following files: <ul><li>index.html</li><li>styles.css</li><li>script.js</li><li>contract.sol (for the Ethereum smart contract)</li></ul> <h3>Step 1: HTML Structure</h3> We'll start by creating a simple HTML structure. Open index.html and add the following code: <pre><code class="language-plaintext"><!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Crypto Clicker Game</title>   <link rel="stylesheet" href="styles.css"> </head> <body>   <div class="game-container">       <h1>Crypto Clicker</h1>       <div id="crypto-account">Connect Wallet</div>       <div id="crypto-count">0</div>       <button id="click-button">Click me!</button>   </div>   <script src="script.js"></script> </body> </html></code></pre> Also, Explore |  <a href="https://blockchain.oodles.io/blog/develop-a-crypto-swap-aggregator-platform/">How to Develop a Crypto Swap Aggregator Platform</a> <h3>Step 2: Styling with CSS</h3> Next, we'll add some basic styles to make our game look nicer. Open styles.css and add the following code: <pre><code class="language-plaintext">body {   display: flex;   justify-content: center;   align-items: center;   height: 100vh;   margin: 0;   font-family: Arial, sans-serif;   background-color: #f0f0f0; } .game-container {   text-align: center;   background: white;   padding: 20px;   border-radius: 10px;   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);   width:300px;   max-width: 100%; } #crypto-account{   padding:8px 12px;   background-color: #f2f2f2;   border-radius: 2px;   max-width:100%;   word-break: break-all; } #crypto-count {   font-size: 2em;   margin: 20px 0; } #click-button {   padding: 10px 20px;   font-size: 1em;   cursor: pointer; }</code></pre> You may also like |<a href="https://blockchain.oodles.io/blog/crypto-staking-platform/"> Staking Platform Development: A Step-by-Step Guide</a> <h3>Step 3: JavaScript Functionality</h3> Now, let's add the game logic. Open script.js and add the following code: <pre><code class="language-plaintext">document.addEventListener('DOMContentLoaded', (event) => { let count = 0; const cryptoCountElement = document.getElementById('crypto-count'); const clickButton = document.getElementById('click-button'); clickButton.addEventListener('click', () => {     count++;     cryptoCountElement.innerText = count; }); }); </code></pre> <h2>Step 4: Ethereum Smart Contract</h2> We'll create a simple Ethereum smart contract to handle the blockchain logic. Open contract.sol and add the following code: <pre><code class="language-plaintext">// SPDX-License-Identifier: MIT pragma solidity ^0.8.0; contract CryptoClicker {   mapping(address => uint256) public balances;   function earnCrypto() public {       balances[msg.sender] += 1;   }   function getBalance() public view returns (uint256) {       return balances[msg.sender];   } } </code></pre> This contract allows users to earn cryptocurrency by calling the earnCrypto function and to check their balance using the getBalance function. <h3>Step 5: Interacting with the Smart Contract</h3> To interact with the Ethereum smart contract, we will use the Web3.js library. Add the following script tag to the end of your index.html file to include Web3.js: <pre><code class="language-plaintext"><script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script> </code></pre> Update your script.js to include Web3.js integration: <pre><code class="language-plaintext">document.addEventListener('DOMContentLoaded', async (event) => {   let count = 0;   const cryptoCountElement = document.getElementById('crypto-count');   const cryptoAccountElement = document.getElementById('crypto-account');   const clickButton = document.getElementById('click-button');   if (typeof web3 !== 'undefined') {       console.log('Web3 Detected! Using provider:', web3.currentProvider.constructor.name);       window.web3 = new Web3(web3.currentProvider);   } else {       console.log('No Web3 Detected... using HTTP Provider');       window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545")); // Replace with your provider URL if needed   }   console.log('web3 initiated', window.web3);    const eth = window?.web3?.eth; // Utilize optional chaining for safety   let accounts = [];    if (!eth) {     console.error('Web3 not available, functionality limited.');   } else {     accounts = await eth.getAccounts();     if (accounts.length) {       cryptoAccountElement.textContent = accounts[0];     } else {       cryptoAccountElement.addEventListener('click', async () => {         const requestedAccounts = await eth.requestAccounts();         if (requestedAccounts.length) {           cryptoAccountElement.textContent = requestedAccounts[0];         } else {           console.warn('User denied access to accounts.');         }       });     }   }    // Contract initialization (replace placeholders with actual values)   const contractAddress = "YOUR_CONTRACT_ADDRESS";   const abi = [     // The ABI of your smart contract   ];    let contract = null;   if (contractAddress && abi.length) {     contract = new web3.eth.Contract(abi, contractAddress);   }    // Button click handler with error handling   clickButton.addEventListener('click', async () => {     count++;     cryptoCountElement.innerText = count;      if (!eth || !contract) {       console.error('Web3 or contract not initialized. Functionality limited.');       return;     }      const accounts = await eth.getAccounts();     if (!accounts.length) {       console.warn('No accounts found. Please connect a wallet.');       return;     }     const account = accounts[0];       contract?.methods.earnCrypto().send({ from: account })           .then(() => {               console.log('Crypto earned!');           })           .catch((error) => {               console.error('Error earning crypto:', error);           });   }); });</code></pre> Replace YOUR_CONTRACT_ADDRESS with the address of your deployed contract and include the ABI of your contract in the abi array. Also, Check | <a href="https://blockchain.oodles.io/blog/crypto-launchpad/">Building a Crypto Launchpad: From Concept to Launch</a> <h2>Conclusion</h2> Congratulations! You have created a simple crypto clicker game that integrates with the Ethereum blockchain. This project covered the basics of HTML, CSS, JavaScript, and blockchain integration using Web3.js. You can expand this game by adding more features, such as upgrades, leaderboards, or additional game mechanics. Have fun coding! If you are looking for crypto development services to build and launch your crypto project, connect with our skilled <a href="https://blockchain.oodles.io/about-us/">crypto developers</a> for a quick discussion.  </div></div>