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

No:13681

←

Prev Next

→

ビリヤード
Developer おまめちゃん｜Date and time 23/8/29 11:09:58
Build time 21.834 sec｜Game capacity 3.17KB｜

Script

了解しました。以下が、1枚のHTMLファイルとしてビリヤードゲームを実装したプログラムです。JavaScriptは必ずscriptタグで囲んでいます。

ビリヤードゲーム

このプログラムでは、タッチ操作によってビリヤード台の上でキューボールをドラッグできます。ビリヤード台とキューボールはHTMLの要素で表現されており、JavaScriptによってタッチイベントを処理しています。注意点として、このプログラムはスマホの操作を前提としていますので、スマホで開いてプレイしてみてください。また、絵文字は使用していませんが、実際に動作するビリヤードゲームとして遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。

以下が、1枚のHTMLファイルとしてビリヤードゲームを実装したプログラムです。JavaScriptは必ずscriptタグで囲んでいます。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ビリヤードゲーム</title>
  <style>
    #table {
      width: 400px;
      height: 200px;
      border: 1px solid black;
      position: relative;
    }
    #cue_ball {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      top: 90px;
      left: 190px;
    }
    .ball {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: black;
      position: absolute;
    }
  </style>
</head>
<body>
  <h1>ビリヤードゲーム</h1>
  <div id="table">
    <div id="cue_ball" class="ball"></div>
  </div>
  
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var table = document.getElementById("table");
      var cueBall = document.getElementById("cue_ball");
      
      var isDragging = false;
      var startTouchX, startTouchY;
      var startCueBallX, startCueBallY;
      var maxTableX = table.offsetWidth - cueBall.offsetWidth;
      var maxTableY = table.offsetHeight - cueBall.offsetHeight;
      
      cueBall.addEventListener("touchstart", function(event) {
        isDragging = true;
        startTouchX = event.targetTouches[0].clientX;
        startTouchY = event.targetTouches[0].clientY;
        startCueBallX = cueBall.offsetLeft;
        startCueBallY = cueBall.offsetTop;
      });
      
      cueBall.addEventListener("touchmove", function(event) {
        event.preventDefault();
        
        if (isDragging) {
          var dx = event.targetTouches[0].clientX - startTouchX;
          var dy = event.targetTouches[0].clientY - startTouchY;
          
          var newCueBallX = startCueBallX + dx;
          var newCueBallY = startCueBallY + dy;
          
          if (newCueBallX < 0) {
            newCueBallX = 0;
          } else if (newCueBallX > maxTableX) {
            newCueBallX = maxTableX;
          }
          
          if (newCueBallY < 0) {
            newCueBallY = 0;
          } else if (newCueBallY > maxTableY) {
            newCueBallY = maxTableY;
          }
          
          cueBall.style.left = newCueBallX + "px";
          cueBall.style.top = newCueBallY + "px";
        }
      });
      
      cueBall.addEventListener("touchend", function(event) {
        isDragging = false;
      });
    });
  </script>
</body>
</html>
```

このプログラムでは、タッチ操作によってビリヤード台の上でキューボールをドラッグできます。ビリヤード台とキューボールはHTMLの要素で表現されており、JavaScriptによってタッチイベントを処理しています。

注意点として、このプログラムはスマホの操作を前提としていますので、スマホで開いてプレイしてみてください。また、絵文字は使用していませんが、実際に動作するビリヤードゲームとして遊ぶことができます。