AI game creator

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

No:139

300

←

Prev Next

→

Frame games
Developer ひさひさ｜Date and time 23/5/25 20:14:27
Build time 147.515 sec｜Game capacity 5.029KB｜

Script

[GAME SUMMARY The games to be framed are、Draw a line around the frame that appears on the screen.、You win the game if you enclose more area by yourself than your opponent. In this game、By using the mouse to draw a line outside the screen frame.、You can enclose the inside of the frame. The more area you enclose, the more your score is added, and、You win when you reach a certain score before your opponent. Now also playable on mobile devices、Touch operation is used to control the screen. Also、The use of many cute pictograms and、It makes the game more fun.

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>枠で囲むゲーム</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-size: 20px;
        text-align: center;
    }
    #gameCanvas {
        width: 100%;
        height: 100%;
        background: #ffffff;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// ゲームオブジェクト
    const game = {
        score: 0,
        isPlaying: false,
        mouseX: 0,
        mouseY: 0,
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        lines: []
    };

const canvas = document.getElementById('gameCanvas');
    canvas.width = settings.canvasWidth;
    canvas.height = settings.canvasHeight;

const ctx = canvas.getContext('2d');

// マウスイベントの設定
    canvas.addEventListener('mousedown', function(e) {
        game.isPlaying = true;
        game.startX = e.clientX;
        game.startY = e.clientY;
    });

canvas.addEventListener('mouseup', function(e) {
        game.isPlaying = false;
        game.endX = e.clientX;
        game.endY = e.clientY;
        checkWin();
    });

canvas.addEventListener('mousemove', function(e) {
        game.mouseX = e.clientX;
        game.mouseY = e.clientY;
    });

// スコアの表示
    function showScore() {
        ctx.font = 'bold 30px sans-serif';
        ctx.fillStyle = '#000000';
        ctx.fillText('Score: ' + game.score, 20, 50);
    }

// 枠の描画
    function drawOutline() {
        ctx.beginPath();
        ctx.rect(20, 120, settings.canvasWidth - 40, settings.canvasHeight - 200);
        ctx.lineWidth = settings.lineWidth;
        ctx.strokeStyle = settings.color;
        ctx.stroke();
    }

// 線の描画
    function drawLines() {
        ctx.beginPath();
        ctx.moveTo(game.startX, game.startY);
        ctx.lineTo(game.mouseX, game.mouseY);
        ctx.lineWidth = settings.lineWidth;
        ctx.strokeStyle = settings.color;
        ctx.stroke();
    }

// ゲームのリセット
    function resetGame() {
        game.score = 0;
        game.isPlaying = false;
        game.startX = 0;
        game.startY = 0;
        game.endX = 0;
        game.endY = 0;
        game.lines = [];
        ctx.clearRect(0, 0, settings.canvasWidth, settings.canvasHeight);
    }

// 勝敗の判定
    function checkWin() {
        const line = {
            startX: game.startX,
            startY: game.startY,
            endX: game.endX,
            endY: game.endY
        };
        game.lines.push(line);
        const outlineLeft = 20;
        const outlineRight = settings.canvasWidth - 20;
        const outlineTop = 120;
        const outlineBottom = settings.canvasHeight - 80;
        if (line.startX < outlineLeft && line.endX < outlineLeft) {
            game.score += 1;
        } else if (line.startX > outlineRight && line.endX > outlineRight) {
            game.score += 1;
        } else if (line.startY < outlineTop && line.endY < outlineTop) {
            game.score += 1;
        } else if (line.startY > outlineBottom && line.endY > outlineBottom) {
            game.score += 1;
        }
        if (game.score >= settings.winScore) {
            alert('おめでとう！あなたの勝ちです！');
            resetGame();
        }
    }

// ゲームループ
    function gameLoop() {
        ctx.clearRect(0, 0, settings.canvasWidth, settings.canvasHeight);
        showScore();
        drawOutline();
        for (let i = 0; i < game.lines.length; i++) {
            const line = game.lines[i];
            ctx.beginPath();
            ctx.moveTo(line.startX, line.startY);
            ctx.lineTo(line.endX, line.endY);
            ctx.lineWidth = settings.lineWidth;
            ctx.strokeStyle = settings.color;
            ctx.stroke();
        }
        if (game.isPlaying) {
            drawLines();
        }
        requestAnimationFrame(gameLoop);
    }

// ゲーム開始
    resetGame();
    gameLoop();
    </script>
</body>
</html>

【ゲームの概要】
枠で囲むゲームは、画面に表示される枠の中を線で囲い、相手よりも多くの面積を自分で囲めば勝利となる競技です。このゲームでは、マウスを使って画面の枠の外へ線を引くことで、枠の内側を囲むことができます。自分が囲んだ面積が多ければスコアが加算され、相手よりも先に一定のスコアに達すると勝利となります。モバイル端末でも遊べるように、画面の操作にはタッチ操作を使用しています。また、可愛い絵文字を多用し、ゲームをより楽しいものにしています。