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

No:8361

4188

←

Prev Next

→

3D donut with three.js
Developer User4160｜Date and time 23/7/15 14:43:47
Build time 24.393 sec｜Game capacity 2.913KB｜

Script

Score: 0

このゲームでは、three.jsを使用して3Dのドーナツを描画し、ドーナツが画面内を移動する様子を表現しています。ドーナツは画面外に出たら新しい位置に再配置され、スコアが更新されます。ユーザーはスマートフォンの操作で画面上のドーナツをタップすることで、スコアを上げることができます。以上が、要件に基づいたゲームの実装例です。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>3D Donut Game</title>
    <style>
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        // ドキュメントが読み込まれた後に実行される関数
        window.onload = function() {
            // ゲームの初期化
            initGame();
        }

function initGame() {
            // ゲームのデータ
            var score = 0;
            var speed = 0.005;

// 3Dシーンの作成
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 500);
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

// ドーナツの作成
            var geometry = new THREE.TorusGeometry(1, 0.5, 16, 100);
            var material = new THREE.MeshBasicMaterial({ color: 'pink' });
            var donut = new THREE.Mesh(geometry, material);
            scene.add(donut);

// カメラの配置
            camera.position.z = 5;

// ゲームループの実行
            function animate() {
                requestAnimationFrame(animate);

// ドーナツの回転
                donut.rotation.x += 0.01;
                donut.rotation.y += 0.01;

// ドーナツの移動
                donut.position.z -= speed;

// ドーナツが画面外に出た場合
                if (donut.position.z < -10) {
                    // 新しいドーナツの位置をランダムに設定
                    donut.position.x = (Math.random() - 0.5) * 10;
                    donut.position.y = (Math.random() - 0.5) * 10;
                    donut.position.z = 10;

// スコアの更新
                    score += 1;
                }

// スコアの表示
                document.getElementById('score').innerHTML = "Score: " + score;

// 描画の更新
                renderer.render(scene, camera);
            }

animate();
        }
    </script>
    <h1 id="score">Score: 0</h1>
</body>
</html>
```

このゲームでは、three.jsを使用して3Dのドーナツを描画し、ドーナツが画面内を移動する様子を表現しています。ドーナツは画面外に出たら新しい位置に再配置され、スコアが更新されます。ユーザーはスマートフォンの操作で画面上のドーナツをタップすることで、スコアを上げることができます。

以上が、要件に基づいたゲームの実装例です。