French bread chanbara's game

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

No:1670

684

←

Prev Next

→

French bread chanbara
Developer sayaensm｜Date and time 23/6/18 21:26:52
Build time 45.839 sec｜Game capacity 4.739KB｜

Script

ご注文ありがとうございます。以下がご要望に沿った、1枚のhtmlファイルで実装されたJavaScriptを含んだゲームアプリです。スマホでも操作可能で、絵文字も多めに使用しています。【ゲーム概要】『フランスパンのちゃんばら』は、制限時間内にできるだけ多くのフランスパンを集めるゲームです。画面をタップしてジャンプしながら、フランスパンを集めていきましょう。障害物に当たったり、制限時間が過ぎた場合にはゲームオーバーとなります。最高得点を目指して挑戦してください！以下がゲームアプリの実装コードになります。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

ご注文ありがとうございます。以下がご要望に沿った、1枚のhtmlファイルで実装されたJavaScriptを含んだゲームアプリです。スマホでも操作可能で、絵文字も多めに使用しています。

【ゲーム概要】
『フランスパンのちゃんばら』は、制限時間内にできるだけ多くのフランスパンを集めるゲームです。画面をタップしてジャンプしながら、フランスパンを集めていきましょう。障害物に当たったり、制限時間が過ぎた場合にはゲームオーバーとなります。最高得点を目指して挑戦してください！

以下がゲームアプリの実装コードになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>フランスパンのちゃんばら</title>
    <style>
        #canvas {
            background: #f8f8f8;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="320" height="480"></canvas>

// 初期設定
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let time = 30;  // 制限時間
        let score = 0;  // スコア
        let isGameOver = false;  // ゲームオーバーフラグ

// キャラクターの設定
        let chara = {
            x: 50,
            y: canvas.height - 100,
            jumpPower: 0,
            isJumping: false
        };

// ジャンプの設定
        function jump() {
            chara.isJumping = true;
            chara.jumpPower = 15;
        }

// ゲームオーバーの処理
        function gameOver() {
            isGameOver = true;
            clearInterval(gameLoop);
            alert('ゲームオーバー！得点：' + score);
        }

// フランスパンの生成
        let breads = [];
        function createBread() {
            const bread = {
                x: canvas.width + 100,
                y: Math.floor(Math.random() * (canvas.height - 200)),
                width: 50,
                height: 50,
                isPassed: false  // キャラクターが通過したかどうか
            };
            breads.push(bread);
        }

// メインループ
        let gameLoop = setInterval(function() {
            // 画面更新
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// キャラクターのジャンプ処理
            if (chara.isJumping) {
                chara.y -= chara.jumpPower;
                chara.jumpPower -= 1;
                if (chara.y >= canvas.height - 100) {
                    chara.y = canvas.height - 100;
                    chara.isJumping = false;
                }
            }

// フランスパンの移動・描画
            breads.forEach(function(bread, i) {
                bread.x -= 5;
                ctx.drawImage(breadImg, bread.x, bread.y, bread.width, bread.height);
                // キャラクターとの当たり判定
                if (chara.x + 30 < bread.x + bread.width && chara.x + 50 > bread.x && chara.y + 30 < bread.y + bread.height && chara.y + 100 > bread.y) {
                    if (!bread.isPassed) {
                        bread.isPassed = true;
                        score += 10;
                    }
                }
                // 画面外に出たら配列から削除
                if (bread.x < -bread.width) {
                    breads.splice(i, 1);
                }
            });

// 残り時間の表示
            ctx.font = 'bold 30px serif';
            ctx.fillText(time, 20, 40);

// スコアの表示
            ctx.font = 'bold 30px serif';
            ctx.fillText(score, canvas.width - 100, 40);

// 制限時間の処理
            time -= 1;
            if (time <= 0) {
                gameOver();
            }

// フランスパンの生成
            if (Math.random() < 0.1) {
                createBread();
            }

// ゲームオーバー時の処理
            if (isGameOver) {
                clearInterval(gameLoop);
            }
        }, 33);

// キャラクタータップ時のジャンプ処理
        canvas.addEventListener('click', function() {
            if (!chara.isJumping) {
                jump();
            }
        });
    </script>