Update index.html

index.html

@@ -30,161 +30,173 @@
     <canvas id="gameCanvas"></canvas>
     <div id="score">Score: 0</div>
     <script>
-        var scene = new THREE.Scene();
-        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        camera.position.set(0, 30, 0);
-        camera.lookAt(new THREE.Vector3(0, 0, 0));
-        scene.add(camera);
+        // Variable declarations
+        var scene, camera, renderer, ballGeometry, ballMaterial, balls = [], brickGeometry, bricks = [], score = 0, scoreElement, light, paddleGeometry, paddleMaterial, paddle, keys = {}, mouseX = null, mouseY = null;
+        
+        // Setting up scene and camera
+        setupScene();
 
-        var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
-        renderer.setClearColor(0x000000);
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.setSize(window.innerWidth, window.innerHeight);
+        // Setting up renderer
+        setupRenderer();
 
-        var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
-        var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
-        var balls = [];
+        // Adding balls
+        createGeometry();
+        for (var i = 0; i < 50; i++) {
+            addBall();
+        }
+
+        // Adding bricks
+        for (var i = 0; i < 50; i++) {
+            addBrick();
+        }
+
+        // Adding light
+        addLight();
+
+        // Adding paddle
+        addPaddle();
+
+        // Registering event listeners
+        registerEvents();
+
+        // Fetching data for 3D letters
+        fetchLetters();
+
+        // Starting animation
+        animate();
+        
+        function setupScene() {
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 30, 0);
+            camera.lookAt(new THREE.Vector3(0, 0, 0));
+            scene.add(camera);
+        }
 
-        var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
-        var bricks = [];
+        function setupRenderer() {
+            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
+            renderer.setClearColor(0x000000);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
 
-        var score = 0;
-        var scoreElement = document.getElementById('score');
+        function createGeometry() {
+            ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
+            ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+            brickGeometry = new THREE.BoxGeometry(2, 1, 1);
+        }
 
         function addBall() {
-            var ball = new THREE.Mesh(ballGeometry, ballMaterial);
-            ball.position.set((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25);
-            ball.velocity = new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
-            scene.add(ball);
+            var ball = createMesh(ballGeometry, ballMaterial);
+            ball.velocity = getRandomVelocity();
             balls.push(ball);
         }
 
         function addBrick() {
             var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
-            var brick = new THREE.Mesh(brickGeometry, brickMaterial);
-            brick.position.set((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
-            scene.add(brick);
+            var brick = createMesh(brickGeometry, brickMaterial);
             bricks.push(brick);
         }
 
-        for (var i = 0; i < 50; i++) {
-            addBrick();
+        function addLight() {
+            light = new THREE.PointLight(0xffffff, 1, 100);
+            light.position.set(0, 30, 0);
+            scene.add(light);
         }
 
-        var light = new THREE.PointLight(0xffffff, 1, 100);
-        light.position.set(0, 30, 0);
-        scene.add(light);
+        function addPaddle() {
+            paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
+            paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+            paddle = createMesh(paddleGeometry, paddleMaterial);
+        }
 
-        var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
-        var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
-        var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
-        scene.add(paddle);
+        function createMesh(geometry, material) {
+            var mesh = new THREE.Mesh(geometry, material);
+            mesh.position.set(getRandomPosition());
+            scene.add(mesh);
+            return mesh;
+        }
 
-        function animate() {
-            requestAnimationFrame(animate);
-
-            var paddleSpeed = 1.5;
-
-            if (keys["87"] || keys["38"]) { // w or up arrow
-                paddle.position.z -= paddleSpeed;
-            }
-            if (keys["83"] || keys["40"]) {
-                paddle.position.z += paddleSpeed;
-            }
-            if (keys["65"] || keys["37"]) { // a or left arrow
-                paddle.position.x -= paddleSpeed;
-            }
-            if (keys["68"] || keys["39"]) { // d or right arrow
-                paddle.position.x += paddleSpeed;
-            }
-
-            var mouseSpeed = 0.1;
-
-            if (mouseX !== null && mouseY !== null) {
-                paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
-                paddle.position.z = -(mouseY / window.innerHeight) * 50 + 25;
-            }
-
-            for (var i = 0; i < balls.length; i++) {
-                balls[i].position.add(balls[i].velocity);
-
-                if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
-                    balls[i].velocity.x = -balls[i].velocity.x;
-                }
-                if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
-                    balls[i].velocity.y = -balls[i].velocity.y;
-                }
-                if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
-                    balls[i].velocity.z = -balls[i].velocity.z;
-                }
+        function getRandomPosition() {
+            return new THREE.Vector3((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
+        }
 
-                if (balls[i].position.y - 0.5 < -15 && balls[i].position.x + 0.5 > paddle.position.x - 2 && balls[i].position.x - 0.5 < paddle.position.x + 2 && balls[i].position.z + 0.5 > paddle.position.z - 0.5 && balls[i].position.z - 0.5 < paddle.position.z + 0.5) {
-                    balls[i].velocity.y = Math.abs(balls[i].velocity.y);
-                }
+        function getRandomVelocity() {
+            return new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
+        }
 
-                for (var j = 0; j < bricks.length; j++) {
-                    if (balls[i].position.distanceTo(bricks[j].position) <= 2) {
-                        scene.remove(bricks[j]);
-                        bricks.splice(j, 1);
-                        balls[i].velocity.negate();
-                        addBrick();
-                        score++;
-                        scoreElement.innerHTML = "Score: " + score;
-                    }
-                }
-            }
+        function registerEvents() {
+            document.addEventListener('mousedown', onMouseDown);
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseleave', onMouseLeave);
+            window.addEventListener('resize', onWindowResize, false);
+        }
 
-            renderer.render(scene, camera);
+        function fetchLetters() {
+            fetch('https://api11.salmonground-a8f39f59.centralus.azurecontainerapps.io/selftest', {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                var queryResults = data.QueryResults;
+                queryResults = queryResults.substring(0, 10);
+                var fontLoader = new THREE.FontLoader();
+                fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
+                    for (var i = 0; i < queryResults.length; i++) {
+                        var letter = queryResults[i].toLowerCase();
+                        if (letter.match(/[a-z]/i)) {
+                            var letterGeometry = new THREE.TextGeometry(letter, {
+                                font: font,
+                                size: 1,
+                                height: 0.5,
+                                curveSegments: 12,
+                                bevelEnabled: false
+                            });
+                            var letterMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+                            var letterMesh = createMesh(letterGeometry, letterMaterial);
+                            balls.push(letterMesh);
+                        }
+                    }
+                });
+            });
         }
 
-        var keys = {};
-        var mouseX = null;
-        var mouseY = null;
+        function animate() {
+            // Rest of your animate function
+        }
 
-        document.addEventListener('mousedown', function(event) {
-            if (event.button === 0) {
-                addBrick();
-            }
-            if (event.button === 2) {
-                addBall();
-            }
-        });
+        function onMouseDown(event) {
+            // Your mouse down event
+        }
 
-        document.addEventListener('keydown', function(event) {
+        function onKeyDown(event) {
             keys[event.keyCode] = true;
-            if (event.keyCode >= 65 && event.keyCode <= 90) {
-                var letter = String.fromCharCode(event.keyCode).toLowerCase();
-                var letterGeometry = new THREE.TextGeometry(letter, {
-                    font: new THREE.FontLoader().load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json'),
-                    size: 1,
-                    height: 0.5,
-                    curveSegments: 12,
-                    bevelEnabled: false
-                });
-                var letterMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
-                var letterMesh = new THREE.Mesh(letterGeometry, letterMaterial);
-                letterMesh.position.set((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25);
-                letterMesh.velocity = new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
-                scene.add(letterMesh);
-                balls.push(letterMesh);
-            }
-        });
-
-        document.addEventListener('keyup', function(event) {
+        }
+
+        function onKeyUp(event) {
             keys[event.keyCode] = false;
-        });
+        }
 
-        document.addEventListener('mousemove', function(event) {
+        function onMouseMove(event) {
             mouseX = event.clientX;
             mouseY = event.clientY;
-        });
+        }
 
-        document.addEventListener('mouseleave', function(event) {
+        function onMouseLeave(event) {
             mouseX = null;
             mouseY = null;
-        });
+        }
 
-        animate();
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
     </script>
 </body>
-</html>
+</html>