Make crispy sticky potatoes. Choose the correct option to make a crispy glutinous potato. Crunchy Mochi Mochi Potato is a 3D model rendered by Three.js. Each time you make a choice, the appearance of the crispy glutinous potato will change according to your choice.'s game

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

No:9425

211

←

Prev Next

→

Make crispy sticky potatoes. Choose the correct op..ALL
Developer もちきなこ｜Date and time 23/7/24 19:54:51
Build time 32.999 sec｜Game capacity 3.622KB｜

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>
        body {
            margin: 0;
            overflow: hidden;
        }
        #canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // ポテトの見た目を変えるための選択肢を用意する
        const choices = [
            {
                name: "普通のポテト",
                texture: "🍟",
                color: "#ff9933"
            },
            {
                name: "サクサクポテト",
                texture: "🍠",
                color: "#ffcc11"
            },
            {
                name: "もちもちポテト",
                texture: "🥔",
                color: "#ff0000"
            }
        ];
        
        // ポテトの選択肢を表示する関数
        function displayChoices() {
            const choicesContainer = document.createElement("div");
            
            choices.forEach((choice, index) => {
                const button = document.createElement("button");
                button.textContent = choice.texture + " " + choice.name;
                button.style.backgroundColor = choice.color;
                button.addEventListener("click", () => {
                    selectChoice(index);
                });
                choicesContainer.appendChild(button);
            });
            
            document.body.appendChild(choicesContainer);
        }
        
        // 選択された選択肢に応じてポテトの見た目を変える関数
        function selectChoice(index) {
            // 3Dモデルを描画するキャンバスを準備
            const canvas = document.getElementById("canvas");
            
            // レンダラーを作成
            const renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(canvas.clientWidth, canvas.clientHeight);
            canvas.appendChild(renderer.domElement);
            
            // シーンを作成
            const scene = new THREE.Scene();
            
            // カメラを作成
            const camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 1, 1000);
            camera.position.set(0, 0, 5);
            camera.lookAt(0, 0, 0);
            
            // ライトを作成
            const light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(2, 2, 2);
            scene.add(light);
            
            // 選択されたポテトの見た目を設定
            const choice = choices[index];
            const potato = new THREE.Mesh(
                new THREE.BoxGeometry(1, 1, 1),
                new THREE.MeshStandardMaterial({ color: choice.color })
            );
            potato.position.set(0, 0, 0);
            scene.add(potato);
            
            // アニメーションループ
            function animate() {
                requestAnimationFrame(animate);
                potato.rotation.x += 0.01;
                potato.rotation.y += 0.01;
                renderer.render(scene, camera);
            }
            
            animate();
        }
        
        // ゲームを開始する関数
        function startGame() {
            displayChoices();
        }
        
        // ゲームを開始する
        startGame();
    </script>
</body>
</html>