Spaces:

awacke1
/

ChatGPTGeniusWriter-HTML5-Output-1

Running

App Files Files Community

awacke1 commited on Jul 30, 2023

Commit

88425fd

1 Parent(s): d92817a

Update index.html

Browse files

Files changed (1) hide show

index.html +181 -57

index.html CHANGED Viewed

@@ -1,66 +1,190 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-  <title>Aframe and Three.js Keyboard Interaction Demo</title>
-  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-  <script src="https://threejs.org/build/three.js"></script>
 </head>
 <body>
-  <a-scene keyboard-shortcuts>
-    <a-entity position="0 1.6 0">
-      <a-entity id="camera" camera look-controls wasd-controls></a-entity>
-    </a-entity>
-    <a-sky color="#0000ff"></a-sky>
-    <a-entity id="objectsContainer"></a-entity>
-  </a-scene>
-  <script>
-    AFRAME.registerComponent('keyboard-shortcuts', {
-      init: function () {
-        window.addEventListener('keydown', (event) => {
-          const key = event.key.toLowerCase();
-          if (key.length === 1 && /^[a-z]+$/.test(key)) {
-            this.generateObject(key);
-          }
         });
-      },
-      generateObject: function (key) {
-        const objectsContainer = document.querySelector('#objectsContainer');
-        const object = document.createElement('a-entity');
-        // Set object properties and components
-        object.setAttribute('geometry', {
-          primitive: 'box',
-          width: 1,
-          height: 1,
-          depth: 1
         });
-        object.setAttribute('material', { color: getRandomColor() });
-        object.setAttribute('position', getRandomPosition());
-        objectsContainer.appendChild(object);
-      }
-    });
-    // Helper function to generate random color
-    function getRandomColor() {
-      const letters = '0123456789ABCDEF';
-      let color = '#';
-      for (let i = 0; i < 6; i++) {
-        color += letters[Math.floor(Math.random() * 16)];
-      }
-      return color;
-    }
-    // Helper function to generate random position
-    function getRandomPosition() {
-      const x = Math.random() * 10 - 5;
-      const y = Math.random() * 10 - 5;
-      const z = Math.random() * 10 - 5;
-      return `${x} ${y} ${z}`;
-    }
-  </script>
 </body>
 </html>

 <!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/[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>