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

No:6995

202

←

Prev Next

→

Emoji Smash Bros.
Developer User3958｜Date and time 23/7/4 21:59:58
Build time 18.222 sec｜Game capacity 2.025KB｜

Script

了解です。では、「絵文字スマブラ」というゲームを作成してみましょう。以下に実装例を示します。

絵文字スマブラ

😀

このプログラムは、矢印キーに応じてプレイヤーオブジェクト（顔文字「😀」）を操作するゲームです。プレイヤーオブジェクトは上下左右に移動することができます。矢印キーを押すと、プレイヤーオブジェクトが指定された方向に10ピクセルずつ移動します。実際にブラウザでこのHTMLファイルを開いてプレイしてみてください。お楽しみください！

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。では、「絵文字スマブラ」というゲームを作成してみましょう。以下に実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>絵文字スマブラ</title>
  <style>
    #player {
      font-size: 50px;
    }
  </style>
</head>
<body>
  <h1>絵文字スマブラ</h1>
  <div id="player">😀</div>
  
  <script>
    // プレイヤーオブジェクトの初期位置
    let playerX = 50;
    let playerY = 300;
    
    // プレイヤーオブジェクトの移動関数
    function movePlayer(direction) {
      const stepSize = 10;
      
      if (direction === 'left') {
        playerX -= stepSize;
      } else if (direction === 'right') {
        playerX += stepSize;
      } else if (direction === 'up') {
        playerY -= stepSize;
      } else if (direction === 'down') {
        playerY += stepSize;
      }
      
      // 移動した位置にプレイヤーを描画
      document.getElementById('player').style.left = playerX + 'px';
      document.getElementById('player').style.top = playerY + 'px';
    }
    
    // キー入力時の処理
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowLeft') {
        movePlayer('left');
      } else if (event.key === 'ArrowRight') {
        movePlayer('right');
      } else if (event.key === 'ArrowUp') {
        movePlayer('up');
      } else if (event.key === 'ArrowDown') {
        movePlayer('down');
      }
    });
  </script>
</body>
</html>
```

このプログラムは、矢印キーに応じてプレイヤーオブジェクト（顔文字「😀」）を操作するゲームです。プレイヤーオブジェクトは上下左右に移動することができます。矢印キーを押すと、プレイヤーオブジェクトが指定された方向に10ピクセルずつ移動します。

実際にブラウザでこのHTMLファイルを開いてプレイしてみてください。お楽しみください！