AI game creator

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

No:3189

947

←

Prev Next

→

thermograph
Developer User3660｜Date and time 23/6/24 4:34:35
Build time 22.737 sec｜Game capacity 2.75KB｜

Script

ィックカメラのシミュレーションゲームを作ってみました！以下がプログラムになります。

Score: 0

このゲームでは、サーモグラフィックカメラで物体を探すという設定になっています。赤色の円を移動させ、ランダムに生成される物体を探し出し、10点集めたらゲームクリアとなります。物体はどこにあるかわからず、それを探すために円を移動させる必要があります。円の色が変わるのは、ランダムに色を生成しているためです。楽しんでプレイしてください！

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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 {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

let score = 0;
        let timerId;

const ball = {
            x: 250,
            y: 250,
            radius: 25,
            color: "red"
        }

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

function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

function updateScore() {
            score++;
            document.getElementById("score").innerText = "Score: " + score;
        }

function endGame() {
            clearInterval(timerId);
            alert("Game over!");
        }

function gameLoop() {
            clearCanvas();
            drawBall();
            
            if (score === 10) {
                endGame();
                return;
            }

ball.x = Math.floor(Math.random() * (canvas.width - ball.radius * 2) + ball.radius);
            ball.y = Math.floor(Math.random() * (canvas.height - ball.radius * 2) + ball.radius);
            ball.color = "#" + Math.floor(Math.random()*16777215).toString(16);

timerId = setTimeout(gameLoop, 1000);            
        }

function startGame() {
            score = 0;
            document.getElementById("score").innerText = "Score: " + score;
            gameLoop();
        }

document.addEventListener("DOMContentLoaded", function() {
            canvas.width = window.innerWidth * 0.9;
            canvas.height = window.innerHeight * 0.9;

startGame();
        });
    </script>
    <p id="score">Score: 0</p>
</body>
</html>