Spaces:

awacke1
/

HTML5-Javascript-3D-Breakout-Game

Running

App Files Files Community

awacke1 commited on Jul 30, 2023

Commit

41150bb

1 Parent(s): 0bd0040

Update index.html

Browse files

Files changed (1) hide show

index.html +14 -195

index.html CHANGED Viewed

@@ -1,202 +1,21 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <title>🤓🕹️📱 3D Breakout Game</title>
-    <style>
-        body {
-            margin: 0;
-        }
-        canvas {
-            width: 100%;
-            height: 100%;
-        }
-        #score {
-            position: absolute;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: 24px;
-            font-weight: bold;
-            color: white;
-            text-shadow: 1px 1px 1px black;
-        }
-    </style>
-    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
 </head>
 <body>
-    <canvas id="gameCanvas"></canvas>
-    <div id="score">Score: 0</div>
-    <script>
-        // 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();
-        // Setting up renderer
-        setupRenderer();
-        // 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);
-        }
-        function setupRenderer() {
-            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
-            renderer.setClearColor(0x000000);
-            renderer.setPixelRatio(window.devicePixelRatio);
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        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 = createMesh(ballGeometry, ballMaterial);
-            ball.velocity = getRandomVelocity();
-            balls.push(ball);
-        }
-        function addBrick() {
-            var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
-            var brick = createMesh(brickGeometry, brickMaterial);
-            bricks.push(brick);
-        }
-        function addLight() {
-            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);
-        }
-        function createMesh(geometry, material) {
-            var mesh = new THREE.Mesh(geometry, material);
-            mesh.position.set(getRandomPosition());
-            scene.add(mesh);
-            return mesh;
-        }
-        function getRandomPosition() {
-            return new THREE.Vector3((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
-        }
-        function getRandomVelocity() {
-            return new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
-        }
-        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);
-        }
-        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);
-                        }
-                    }
-                });
-            });
-        }
-        function animate() {
-            // Rest of your animate function
-        }
-        function onMouseDown(event) {
-            // Your mouse down event
-        }
-        function onKeyDown(event) {
-            keys[event.keyCode] = true;
-        }
-        function onKeyUp(event) {
-            keys[event.keyCode] = false;
-        }
-        function onMouseMove(event) {
-            mouseX = event.clientX;
-            mouseY = event.clientY;
-        }
-        function onMouseLeave(event) {
-            mouseX = null;
-            mouseY = null;
-        }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
 </head>
 <body>
+  <a-scene background="color: #ECECEC">
+    <a-entity id="camera" position="0 1.6 3">
+      <a-camera></a-camera>
+    </a-entity>
+    <a-box id="paddle" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
+    <a-sphere id="ball" position="0 1.25 -5" radius="0.25" color="#EF2D5E" shadow></a-sphere>
+    <!-- Creating bricks -->
+    <a-box id="brick1" position="-1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
+    <a-box id="brick2" position="0 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
+    <a-box id="brick3" position="1 0.5 -6" rotation="0 0 0" color="#7BC8A4" shadow></a-box>
+  </a-scene>
 </body>
 </html>