AI game creator that incorporates the functionality of AI to draw illustrations's game

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

No:10104

←

Prev Next

→

AI game creator that incorporates the functionalit..ALL
Developer User4479｜Date and time 23/7/29 2:51:30
Build time 26.395 sec｜Game capacity 3.196KB｜

Script

了解です。以下に、イラストを描くAIの機能を取り込んだAIゲームクリエーターの実装例を示します。 HTMLファイルの中身:

このプログラムは、画面上に表示されたキャンバス上で自由に描画することができます。また、円や正方形を描くボタンも用意されており、クリックすることでそれぞれの図形を描画することもできます。キャンバスをクリアするボタンもあります。このプログラムを実行することで、遊べるAIゲームクリエーターが完成します。ご自身で操作してさまざまな図形を描いたり、ボタンを押したりすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、イラストを描くAIの機能を取り込んだAIゲームクリエーターの実装例を示します。

HTMLファイルの中身:
```html
<!DOCTYPE html>
<html>
<head>
  <title>AI Game Creator</title>
  <style>
    #canvas {
      width: 100%;
      height: 80vh;
      border: 1px solid black;
    }
    #buttons {
      text-align: center;
      margin-top: 20px;
    }
    button {
      padding: 10px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <div id="buttons">
    <button onclick="drawCircle()">Draw Circle</button>
    <button onclick="drawSquare()">Draw Square</button>
    <button onclick="clearCanvas()">Clear Canvas</button>
  </div>

canvas.addEventListener('touchstart', startDrawing);
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('touchmove', draw);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('touchend', stopDrawing);
    canvas.addEventListener('mouseup', stopDrawing);

function startDrawing(event) {
      isDrawing = true;
      startPoint = getCoordinates(event);
    }

function draw(event) {
      if (!isDrawing) return;
      const currentPoint = getCoordinates(event);
      context.beginPath();
      context.moveTo(startPoint.x, startPoint.y);
      context.lineTo(currentPoint.x, currentPoint.y);
      context.stroke();
      startPoint = currentPoint;
    }

function stopDrawing() {
      isDrawing = false;
    }

function drawCircle() {
      const centerX = canvas.width / 2;
      const centerY = canvas.height / 2;
      const radius = Math.min(canvas.width, canvas.height) / 3;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      context.stroke();
    }

function drawSquare() {
      const size = Math.min(canvas.width, canvas.height) / 3;
      const startX = (canvas.width - size) / 2;
      const startY = (canvas.height - size) / 2;
      context.strokeRect(startX, startY, size, size);
    }

function clearCanvas() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
  </script>
</body>
</html>
```

このプログラムは、画面上に表示されたキャンバス上で自由に描画することができます。また、円や正方形を描くボタンも用意されており、クリックすることでそれぞれの図形を描画することもできます。キャンバスをクリアするボタンもあります。

このプログラムを実行することで、遊べるAIゲームクリエーターが完成します。ご自身で操作してさまざまな図形を描いたり、ボタンを押したりすることができます。