Spaces:

awacke1
/

ChatGPTGeniusWriter-HTML5-Output-1

Running

App Files Files Community

awacke1 commited on Jul 30, 2023

Commit

dadc545

1 Parent(s): 88425fd

Update index.html

Browse files

Files changed (1) hide show

index.html +28 -158

index.html CHANGED Viewed

@@ -2,189 +2,59 @@
 <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"]) {
-                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;
             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) {
-            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();
-    </script>
 </body>
-</html>

 <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>