Spaces:

awacke1
/

HTML5-Javascript-3D-Breakout-Game

Running

App Files Files Community

awacke1 commited on Jul 30, 2023

Commit

e011b85

1 Parent(s): 321b959

Update index.html

Browse files

Files changed (1) hide show

index.html +183 -135

index.html CHANGED Viewed

@@ -1,142 +1,190 @@
 <!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>
-		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;
-});
-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>

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