Kizuna Eye is back's game | AI game creator

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

No:5906

769

Kizuna Eye is back
Developer User3840｜Date and time 23/7/1 1:47:38
Build time 37.833 sec｜Game capacity 4.21KB｜

了解しました。ゲームの実装に取り掛かります。以下は、JavaScriptを使用して作成したシンプルなスマホゲームです。このゲームでは、タップすることでキャラクターがジャンプします。障害物を避けながら、高得点を目指しましょう。

このプログラムでは、画面上に表示された赤い四角のプレーヤーキャラクターをタップすることで、ジャンプする動作をします。また、青い障害物が左から右に移動してきますので、プレーヤーが障害物に衝突しないよう注意しながらプレイしてください。ゲームオーバーになると、アラートが表示され、ゲームがリロードされて再スタートします。このゲームはスマホで遊ぶことを前提としており、`mousedown`と`mouseup`のイベントも使用しています。また、絵文字は使用していませんが、スタイルでプレーヤーのキャラクターを赤い四角、障害物を青い四角で表現しています。上記のコードをHTMLファイルに保存し、任意のブラウザで開くとゲームをプレイすることができます。

→ 　

0　

0　

　

　
　
　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

了解しました。ゲームの実装に取り掛かります。

以下は、JavaScriptを使用して作成したシンプルなスマホゲームです。このゲームでは、タップすることでキャラクターがジャンプします。障害物を避けながら、高得点を目指しましょう。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ジャンプゲーム</title>
  <style>
    #game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-color: #000;
    }

#player {
      position: absolute;
      left: 50px;
      bottom: 50px;
      width: 50px;
      height: 50px;
      background-color: red;
    }

.obstacle {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-color: blue;
      animation: obstacleMove 2s infinite linear;
    }

@keyframes obstacleMove {
      0% {
        transform: translateX(100vw);
      }
      100% {
        transform: translateX(-100px);
      }
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="player"></div>
    
    <div id="obstacle-container"></div>
  </div>

<script>
  // プレーヤー要素を取得
  const player = document.getElementById('player');

// ジャンプの高さ
  const jumpHeight = 200;

// プレーヤーの位置を設定する関数
  function setPlayerPosition(position) {
    player.style.bottom = position + 'px';
  }

// プレーヤーがジャンプする関数
  function jump() {
    let currentPosition = parseInt(player.style.bottom);
    if (currentPosition < jumpHeight) {
      const newPosition = Math.min(currentPosition + 50, jumpHeight);
      setPlayerPosition(newPosition);
    }
  }

// プレーヤーが地面に戻る関数
  function moveDown() {
    let currentPosition = parseInt(player.style.bottom);
    if (currentPosition > 0) {
      const newPosition = Math.max(currentPosition - 25, 0);
      setPlayerPosition(newPosition);
    }
  }

// ゲームオーバー時の処理を行う関数
  function gameOver() {
    alert('ゲームオーバー');
    location.reload(); // ゲームをリロードして再スタート
  }

// 障害物を生成する関数
  function createObstacle() {
    const obstacle = document.createElement('div');
    obstacle.classList.add('obstacle');
    document.getElementById('obstacle-container').appendChild(obstacle);
  
    // 衝突判定
    const collisionInterval = setInterval(() => {
      const obstaclePosition = parseInt(obstacle.style.transform.split('(')[1].split('px')[0]);
      const playerPosition = parseInt(player.style.bottom);
  
      if (playerPosition === 0 && obstaclePosition < 100 && obstaclePosition > 0) {
        clearInterval(collisionInterval);
        gameOver();
      }
    }, 1);
  }

// ゲーム開始
  function startGame() {
    setInterval(createObstacle, 2000);
    document.addEventListener('keydown', jump);
    document.addEventListener('touchstart', jump);
    document.addEventListener('touchend', moveDown);
  }

startGame();
</script>
</body>
</html>
```

このプログラムでは、画面上に表示された赤い四角のプレーヤーキャラクターをタップすることで、ジャンプする動作をします。また、青い障害物が左から右に移動してきますので、プレーヤーが障害物に衝突しないよう注意しながらプレイしてください。ゲームオーバーになると、アラートが表示され、ゲームがリロードされて再スタートします。

このゲームはスマホで遊ぶことを前提としており、`touchstart`と`touchend`のイベントも使用しています。また、絵文字は使用していませんが、スタイルでプレーヤーのキャラクターを赤い四角、障害物を青い四角で表現しています。

上記のコードをHTMLファイルに保存し、任意のブラウザで開くとゲームをプレイすることができます。