Spaces:

awacke1
/

ChatGPTGeniusWriter-HTML5-Output-1

Running

App Files Files Community

awacke1 commited on Jul 30, 2023

Commit

53012d5

1 Parent(s): dadc545

Update index.html

Browse files

Files changed (1) hide show

index.html +181 -36

index.html CHANGED Viewed

@@ -2,59 +2,204 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>3D Typing Game</title>
     <style>
         body {
             margin: 0;
         }
         canvas {
             width: 100%;
             height: 100%;
         }
     </style>
-    <script src="https://threejs.org/build/three.min.js"></script>
-    <script src="https://threejs.org/examples/js/loaders/FontLoader.js"></script>
 </head>
 <body>
-<canvas id="gameCanvas"></canvas>
-<script>
-    var scene = new THREE.Scene();
-    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    camera.position.z = 30;
-    var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    var light = new THREE.PointLight(0xffffff, 1, 100);
-    light.position.set(0, 0, 30);
-    scene.add(light);
-    var loader = new THREE.FontLoader();
-    loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
         document.addEventListener('keydown', function(event) {
-            if (event.keyCode >= 65 && event.keyCode <= 90) {
-                var letter = String.fromCharCode(event.keyCode);
-                var letterGeometry = new THREE.TextGeometry(letter, {
-                    font: font,
-                    size: 1,
-                    height: 0.5,
-                    curveSegments: 12,
-                    bevelEnabled: false
-                });
-                var letterMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
-                var letterMesh = new THREE.Mesh(letterGeometry, letterMaterial);
-                letterMesh.position.set((Math.random() - 0.5) * 20, (Math.random() - 0.5) * 20, 0);
-                scene.add(letterMesh);
             }
         });
-    });
-    function animate() {
-        requestAnimationFrame(animate);
-        renderer.render(scene, camera);
-    }
-    animate();
-</script>
 </body>
 </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/[email protected]/build/three.min.js"></script>
 </head>
 <body>
+    <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);
+        var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
+        renderer.setClearColor(0x000000);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
+        var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+        var balls = [];
+        var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
+        var bricks = [];
+        var score = 0;
+        var scoreElement = document.getElementById('score');
+        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);
+            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);
+            bricks.push(brick);
+        }
+        for (var i = 0; i < 50; i++) {
+            addBrick();
+        }
+        var light = new THREE.PointLight(0xffffff, 1, 100);
+        light.position.set(0, 30, 0);
+        scene.add(light);
+        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 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"]) { // s or down arrow
+                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;
+                }
+                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);
+                }
+                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;
+                    }
+                }
+            }
+            renderer.render(scene, camera);
+        }
+        var keys = {};
+        var mouseX = null;
+        var mouseY = null;
+        document.addEventListener('mousedown', function(event) {
+            if (event.button === 0) {
+                addBrick();
+            }
+            if (event.button === 2) {
+                addBall();
+            }
+        });
         document.addEventListener('keydown', function(event) {
+            keys[event.keyCode] = true;
+        });
+        document.addEventListener('keyup', function(event) {
+            keys[event.keyCode] = false;
+        });
+        document.addEventListener('mousemove', function(event) {
+            mouseX = event.clientX;
+            mouseY = event.clientY;
+        });
+        document.addEventListener('mouseleave', function(event) {
+            mouseX = null;
+            mouseY = null;
+        });
+        animate();
+        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);
+            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: 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);
+                }
             }
         });
+    </script>
 </body>
 </html>