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

No:3670

387

←

Prev Next

→

Compare the sizes of various animals in a circle
Developer User1006｜Date and time 23/6/26 2:44:05
Build time 40.135 sec｜Game capacity 3.346KB｜

Script

するゲームを作りましょう。

動物サイズ比較ゲーム

このゲームでは、さまざまな動物の大きさを比較できます。

マウスで円をドラッグして、動物を移動させてください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

するゲームを作りましょう。

<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動物サイズ比較ゲーム</title>
<style>
canvas {
    display: block;
}
</style>
</head>
<body onload="init()">
<h1>動物サイズ比較ゲーム</h1>
<p>このゲームでは、さまざまな動物の大きさを比較できます。</p>
<p>マウスで円をドラッグして、動物を移動させてください。</p>
<canvas id="canvas"></canvas>
<script>
// キャンバスの設定
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight - 100;

// 動物のリスト
var animals = [
    {
        name: "象🐘",
        size: 100,
        x: 100,
        y: 100
    },
    {
        name: "馬🐴",
        size: 70,
        x: canvas.width - 100,
        y: 100
    },
    {
        name: "犬🐶",
        size: 30,
        x: canvas.width / 2,
        y: canvas.height / 2
    },
    {
        name: "ネズミ🐭",
        size: 10,
        x: canvas.width / 2,
        y: canvas.height / 2
    }
];

// 円を描く関数
function drawCircle(x, y, size) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, 2 * Math.PI);
    ctx.stroke();
}

// 動物を描く関数
function drawAnimal(animal) {
    drawCircle(animal.x, animal.y, animal.size);
    ctx.font = "20px serif";
    ctx.fillText(animal.name, animal.x - animal.size / 2, animal.y - animal.size - 5);
}

// 全ての動物を描く関数
function drawAnimals() {
    for (var i = 0; i < animals.length; ++i) {
        drawAnimal(animals[i]);
    }
}

// 円が選択されているかどうか判定する関数
function isCircleSelected(circle, mouseX, mouseY) {
    var dx = circle.x - mouseX;
    var dy = circle.y - mouseY;
    return dx * dx + dy * dy <= circle.size * circle.size;
}

// マウスがドラッグされた時に呼び出される関数
function onCanvasMousedown(event) {
    var mouseX = event.clientX;
    var mouseY = event.clientY - 100;
    for (var i = animals.length - 1; i >= 0; --i) {
        if (isCircleSelected(animals[i], mouseX, mouseY)) {
            var selectedAnimal = animals[i];
            animals.splice(i, 1);
            animals.push(selectedAnimal);
            canvas.addEventListener("mousemove", onCanvasMousemove);
            canvas.addEventListener("mouseup", onCanvasMouseup);
            break;
        }
    }
}

// マウスが動いた時に呼び出される関数
function onCanvasMousemove(event) {
    var mouseX = event.clientX;
    var mouseY = event.clientY - 100;
    animals[animals.length - 1].x = mouseX;
    animals[animals.length - 1].y = mouseY;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawAnimals();
}

// マウスが離された時に呼び出される関数
function onCanvasMouseup(event) {
    canvas.removeEventListener("mousemove", onCanvasMousemove);
    canvas.removeEventListener("mouseup", onCanvasMouseup);
}

// 初期化関数
function init() {
    // クリックイベントの設定
    canvas.addEventListener("mousedown", onCanvasMousedown);

// 描画ループ
    setInterval(function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawAnimals();
    }, 30);
}
</script>
</body>
</html>