にゃんこ大戦争's game

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

No:27868

←

Prev Next

→

にゃんこ大戦争
Developer User13904｜Date and time 23/12/9 21:50:47
Build time 20.536 sec｜Game capacity 1.905KB｜

Script

了解しました。以下にゃんこ大戦争のゲームを実装したhtmlファイルの例を示します。

スコア: 0

🐱

この例では、スタートボタンをクリックするとゲームが開始され、にゃんこの絵文字をクリックすることでスコアが上昇します。スコアはスクリーンに表示され、スタートをクリックするとスコアがリセットされます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にゃんこ大戦争のゲームを実装したhtmlファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>にゃんこ大戦争</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: lightblue;
    }
    
    #game {
      width: 300px;
      height: 400px;
      background-color: white;
      border: 2px solid black;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    #start {
      margin-bottom: 20px;
      font-size: 20px;
      background-color: lightgreen;
      padding: 10px 20px;
      border-radius: 5px;
    }
    
    #score {
      font-size: 18px;
      margin-bottom: 10px;
    }
    
    #cat {
      font-size: 50px;
      padding: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game">
    <button id="start">スタート</button>
    <div id="score">スコア: 0</div>
    <div id="cat" onclick="increaseScore()">🐱</div>
  </div>
  
  <script>
    let score = 0;

function increaseScore() {
      score++;
      document.getElementById("score").innerText = "スコア: " + score;
    }

function startGame() {
      score = 0;
      document.getElementById("score").innerText = "スコア: " + score;
    }

document.getElementById("start").addEventListener("click", startGame);
  </script>
</body>
</html>
```