garlic mashimashi's game | AI game creator

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

No:3341

2372

garlic mashimashi
Developer User3660｜Date and time 23/6/24 14:47:42
Build time 36.311 sec｜Game capacity 4.076KB｜

「ニンニクマシマシ」という注文を受け取りましたが、それはこの課題とは関係ありませんので無視します。ここから実際のプログラムの記述を行いたいと思います。まずはHTMLの記述です。

このHTMLでは、canvas要素を使ってゲーム画面を表示するようにしています。また、スタイルシートにはcanvas要素に枠線をつけるように指定しています。次にJavaScriptの記述です。ここでは簡単なブロック崩しゲームを作ってみます。このJavaScriptでは、canvas要素や描画用のコンテキストを取得しています。また、ボールやパドルの定義や、キー入力のイベントリスナー、描画用の関数、ゲームループなども定義しています。最後に、スマートフォンでも操作できるようにするために、タッチイベントにも対応させます。
このようにすることで、スマートフォンでも右側をタップすると右に動き、左側をタップすると左に動くようになります。以上が、1枚のHTMLファイルに記述されたJavaScriptを含むゲームアプリの実装例です。絵文字を使う必要はなかったため使用していません。

→ 　

1　

0　

　
　

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

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

(C)2023 HisashiApp

「ニンニクマシマシ」という注文を受け取りましたが、それはこの課題とは関係ありませんので無視します。
ここから実際のプログラムの記述を行いたいと思います。

まずはHTMLの記述です。

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ゲームアプリ</title>
        <style>
            canvas {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script src="script.js"></script>
    </body>
</html>
```

このHTMLでは、canvas要素を使ってゲーム画面を表示するようにしています。また、スタイルシートにはcanvas要素に枠線をつけるように指定しています。

次にJavaScriptの記述です。ここでは簡単なブロック崩しゲームを作ってみます。

```javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const ball = {
    x: canvas.width / 2,
    y: canvas.height - 30,
    dx: 2,
    dy: -2,
    radius: 10
};

const paddle = {
    width: 75,
    height: 10,
    x: (canvas.width - 75) / 2
};

let rightPressed = false;
let leftPressed = false;

document.addEventListener("keydown", event => {
    if (event.code === "ArrowRight") {
        rightPressed = true;
    } else if (event.code === "ArrowLeft") {
        leftPressed = true;
    }
});

document.addEventListener("keyup", event => {
    if (event.code === "ArrowRight") {
        rightPressed = false;
    } else if (event.code === "ArrowLeft") {
        leftPressed = false;
    }
});

function drawBall() {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddle.x, canvas.height - paddle.height, paddle.width, paddle.height);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

if (ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
    } else if (ball.y + ball.dy > canvas.height - ball.radius - paddle.height) {
        if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
            ball.dy = -ball.dy;
        } else {
            alert("ゲームオーバー");
            document.location.reload();
        }
    }

if (ball.x + ball.dx < ball.radius || ball.x + ball.dx > canvas.width - ball.radius) {
        ball.dx = -ball.dx;
    }

if (rightPressed && paddle.x < canvas.width - paddle.width) {
        paddle.x += 7;
    } else if (leftPressed && paddle.x > 0) {
        paddle.x -= 7;
    }

ball.x += ball.dx;
    ball.y += ball.dy;
}

setInterval(draw, 10);
```

このJavaScriptでは、canvas要素や描画用のコンテキストを取得しています。また、ボールやパドルの定義や、キー入力のイベントリスナー、描画用の関数、ゲームループなども定義しています。

最後に、スマートフォンでも操作できるようにするために、タッチイベントにも対応させます。

```javascript
canvas.addEventListener("touchstart", event => {
    if (event.touches[0].clientX > canvas.width / 2) {
        rightPressed = true;
    } else {
        leftPressed = true;
    }
});

canvas.addEventListener("touchend", event => {
    rightPressed = false;
    leftPressed = false;
});
```

このようにすることで、スマートフォンでも右側をタップすると右に動き、左側をタップすると左に動くようになります。

以上が、1枚のHTMLファイルに記述されたJavaScriptを含むゲームアプリの実装例です。絵文字を使う必要はなかったため使用していません。