AI game creator

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

No:7598

3770

←

Prev Next

→

100Sunny
Developer もちきなこ｜Date and time 23/7/8 23:45:30
Build time 18.884 sec｜Game capacity 4.932KB｜

Script

了解しました。以下にスマホで遊べるゲームの例を示します。

この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>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        canvas {
            background-color: #f1f1f1;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

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

let score = 0;
        let isGameOver = false;
        const playerRadius = 20;
        const enemyRadius = 10;
        const playerSpeed = 5;
        const enemySpeed = 2;
        const enemyMaxCount = 10;
        const enemySpawnInterval = 1000;
        const gameOverMessage = "ゲームオーバー";

const player = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            radius: playerRadius,
            color: "blue",
            dx: 0,
            dy: 0
        };

const enemies = [];

function spawnEnemy() {
            if (enemies.length < enemyMaxCount) {
                const enemy = {
                    x: Math.random() * (canvas.width - enemyRadius * 2) + enemyRadius,
                    y: Math.random() * (canvas.height - enemyRadius * 2) + enemyRadius,
                    radius: enemyRadius,
                    color: "red",
                    dx: (Math.random() - 0.5) * enemySpeed,
                    dy: (Math.random() - 0.5) * enemySpeed
                };

enemies.push(enemy);
            }
        }

function update() {
            if (!isGameOver) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
                ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
                ctx.fillStyle = player.color;
                ctx.fill();

for (let i = 0; i < enemies.length; i++) {
                    const enemy = enemies[i];

ctx.beginPath();
                    ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
                    ctx.fillStyle = enemy.color;
                    ctx.fill();

if (getDistance(player.x, player.y, enemy.x, enemy.y) < player.radius + enemy.radius) {
                        isGameOver = true;
                        break;
                    }

enemy.x += enemy.dx;
                    enemy.y += enemy.dy;

if (
                        enemy.x + enemy.radius > canvas.width ||
                        enemy.x - enemy.radius < 0
                    ) {
                        enemy.dx *= -1;
                    }

if (
                        enemy.y + enemy.radius > canvas.height ||
                        enemy.y - enemy.radius < 0
                    ) {
                        enemy.dy *= -1;
                    }
                }

player.x += player.dx;
                player.y += player.dy;

if (
                    player.x + player.radius > canvas.width ||
                    player.x - player.radius < 0
                ) {
                    player.dx *= -1;
                }

if (
                    player.y + player.radius > canvas.height ||
                    player.y - player.radius < 0
                ) {
                    player.dy *= -1;
                }

score++;
            } else {
                ctx.font = "bold 30px Arial";
                ctx.fillText(gameOverMessage, canvas.width / 2 - ctx.measureText(gameOverMessage).width / 2, canvas.height / 2);
                clearInterval(gameInterval);
            }
        }

function getDistance(x1, y1, x2, y2) {
            const xDistance = x2 - x1;
            const yDistance = y2 - y1;

return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
        }

function movePlayer(event) {
            player.dx = event.gamma / 10;
            player.dy = event.beta / 10;
        }

canvas.addEventListener("mousemove", movePlayer);

let gameInterval = setInterval(() => {
            update();
            spawnEnemy();
        }, enemySpawnInterval);
    </script>
</body>
</html>
```