Ramen noodle making game ①Make the dough. Cut the dough. Boil the dough. Finish! The series of operations are line-drawn by JavaScripts canvas. The color of the noodle is light yellow.'s game

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

No:5871

993

←

Prev Next

→

Ramen noodle making game ①Make the dough. Cut the ..ALL
Developer もちきなこ｜Date and time 23/7/1 0:45:11
Build time 24.992 sec｜Game capacity 2.905KB｜

Script

以下は、スマホで遊べるラーメンの麺を作るゲームの実装例です。JavaScriptのcanvasを使用して、麺の線画を描画し、指でスワイプすることで生地を作り、切り、茹でることができます。

このプログラムでは、指で画面をスワイプすることで生地を切ることができます。生地の初期位置とサイズは変数 `doughX`、`doughY`、`doughWidth`、`doughHeight`で定義されており、指でスワイプすると生地が切られ、幅が半分になります。生地の描画色は "#FFE266"、つまり薄い黄色になっています。

←

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>
        canvas {
            background-color: #FFFFFF;
            touch-action: manipulation;
        }
    </style>
</head>
<body>
    <canvas id="game-canvas"></canvas>
    <script>
        const canvas = document.getElementById("game-canvas");
        const ctx = canvas.getContext("2d");
        
        // 生地の初期位置とサイズ
        let doughX = 100;
        let doughY = 100;
        let doughWidth = 300;
        let doughHeight = 20;
        
        // タッチ座標
        let touchX = null;
        let touchY = null;
        
        // ゲームループ
        function gameLoop() {
            // canvasの解像度をデバイスピクセル比に合わせる
            const dpr = window.devicePixelRatio || 1;
            canvas.width = canvas.clientWidth * dpr;
            canvas.height = canvas.clientHeight * dpr;
            ctx.scale(dpr, dpr);
            
            // canvasをクリアする
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 生地を描画する
            ctx.fillStyle = "#FFE266";
            ctx.fillRect(doughX, doughY, doughWidth, doughHeight);
            
            // 生地を切る
            if (touchX !== null && touchY !== null) {
                const cutY = touchY - doughY;
                if (cutY > 0 && cutY < doughHeight) {
                    doughWidth = doughWidth / 2;
                }
                touchX = null;
                touchY = null;
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        // イベントリスナーを設定する
        canvas.addEventListener("touchstart", (event) => {
            event.preventDefault();
            touchX = event.touches[0].pageX;
            touchY = event.touches[0].pageY;
        });
        
        canvas.addEventListener("touchmove", (event) => {
            event.preventDefault();
            touchX = event.touches[0].pageX;
            touchY = event.touches[0].pageY;
        });
        
        // ゲームを開始する
        gameLoop();
    </script>
</body>
</html>
```