Click here for free DL of the app version that can save data.

No:40955

128

←

Prev Next

→

Create a game that you need to click and will be a..ALL
Developer User18332｜Date and time 24/2/4 23:36:18
Build time 11.296 sec｜Game capacity 3.085KB｜

Script

Sure! Here's an example of a simple clicker game implemented as a single HTML file using JavaScript. The game allows you to click on a cookie to earn points, and it also displays a leaderboard with the number of clicks made by the player. Pictograms are used for visual representation.

Cookie Clicker

Clicks: 0

Leaderboard

Rank	Player	Clicks

To use the code, create a new HTML file and paste the above code inside it. Save the file with a `.html` extension (e.g., `cookie_clicker.html`). Then, you can open the file in a web browser (preferably on a smartphone) to play the game. Clicking on the cookie image will increase your score, and the leaderboard will show the rank of players based on the number of clicks they have made.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cookie Clicker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    
    #cookie {
      width: 200px;
      height: 200px;
      background-image: url('cookie.png');
      background-size: cover;
      margin: 50px auto;
      cursor: pointer;
    }
    
    #score {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    
    #leaderboard {
      text-align: left;
      margin: 0 auto;
      width: 300px;
    }
    
    #leaderboard tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    
    #leaderboard th,
    #leaderboard td {
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Cookie Clicker</h1>
  <div id="cookie"></div>
  <p id="score">Clicks: 0</p>
  <h2>Leaderboard</h2>
  <table id="leaderboard">
    <thead>
      <tr>
        <th>Rank</th>
        <th>Player</th>
        <th>Clicks</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  
  <script>
    // Cookie Clicker Game
    var clicks = 0;
    var leaderboard = [
      { player: "Player 1", clicks: 0 },
      { player: "Player 2", clicks: 0 },
      { player: "Player 3", clicks: 0 },
    ];
    
    // Update score and leaderboard
    function updateStats() {
      document.getElementById("score").textContent = "Clicks: " + clicks;
      
      var leaderboardBody = document.querySelector("#leaderboard tbody");
      leaderboardBody.innerHTML = "";
      
      leaderboard.sort(function(a, b) {
        return b.clicks - a.clicks;
      });
      
      for (var i = 0; i < leaderboard.length; i++) {
        var row = document.createElement("tr");
        
        var rank = document.createElement("td");
        rank.textContent = i + 1;
        row.appendChild(rank);
        
        var player = document.createElement("td");
        player.textContent = leaderboard[i].player;
        row.appendChild(player);
        
        var clicks = document.createElement("td");
        clicks.textContent = leaderboard[i].clicks;
        row.appendChild(clicks);
        
        leaderboardBody.appendChild(row);
      }
    }
    
    // Handle cookie click event
    document.getElementById("cookie").addEventListener("click", function() {
      clicks++;
      updateStats();
    });
    
    updateStats(); // Initial stats update
  </script>
</body>
</html>
```