📌  相关文章
📜  cookie clicker (1)

📅  最后修改于: 2023-12-03 15:14:15.053000             🧑  作者: Mango

Cookie Clicker

Cookie Clicker is a popular incremental game developed and published by French programmer Julien Thiennot. It was first released in 2013 and quickly gained a large following.

Gameplay

The objective of Cookie Clicker is to bake as many cookies as possible by clicking on a giant cookie on the screen. Players earn one cookie per click and can use these cookies to purchase upgrades that increase the efficiency of their clicks, such as hiring a grandma to bake cookies automatically. As players progress, they can unlock achievements and reach milestones, which grant bonuses and add new gameplay elements.

Code

Here is an example of the HTML, CSS, and JavaScript code used to create the cookie clicker game:

<!DOCTYPE html>
<html>
  <head>
    <title>Cookie Clicker</title>
    <style>
      #cookie {
        width: 200px;
        height: 200px;
        background-image: url('cookie.png');
        background-repeat: no-repeat;
        background-size: contain;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="cookie"></div>
    <p id="cookies">0 cookies</p>
    <script>
      let cookies = 0;
      let clickRate = 1;
      
      document.getElementById('cookie').addEventListener('click', () => {
        cookies += clickRate;
        document.getElementById('cookies').textContent = `${cookies} cookies`;
      });
    </script>
  </body>
</html>

This code creates an HTML page with a clickable cookie and a counter that displays the number of cookies earned. When the cookie is clicked, the number of cookies is increased by the click rate (which starts at 1) and the counter is updated.

Conclusion

Cookie Clicker is a fun and addictive game with simple gameplay mechanics that make it easy to pick up and play. It also provides a great example of how to create an incremental game using HTML, CSS, and JavaScript.