Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>3D Breakout Game</title> | |
| <style> | |
| body { margin: 0; } | |
| canvas { width: 100%; height: 100%; } | |
| </style> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.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.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 ball = new THREE.Mesh(ballGeometry, ballMaterial); | |
| scene.add(ball); | |
| var paddleGeometry = new THREE.BoxGeometry(4, 1, 1); | |
| var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); | |
| var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial); | |
| paddle.position.y = -15; | |
| scene.add(paddle); | |
| var brickGeometry = new THREE.BoxGeometry(2, 1, 1); | |
| var bricks = []; | |
| for (var i = 0; i < 50; i++) { | |
| var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }); | |
| var brick = new THREE.Mesh(brickGeometry, brickMaterial); | |
| brick.position.x = (Math.random() - 0.5) * 50; | |
| brick.position.y = (Math.random() - 0.5) * 50; | |
| brick.position.z = (Math.random() - 0.5) * 50; | |
| scene.add(brick); | |
| bricks.push(brick); | |
| } | |
| var light = new THREE.PointLight(0xffffff, 1, 100); | |
| light.position.set(0, 30, 0); | |
| scene.add(light); | |
| var speed = 0.1; | |
| var xSpeed = speed; | |
| var ySpeed = speed; | |
| var zSpeed = speed; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| ball.position.x += xSpeed; | |
| ball.position.y += ySpeed; | |
| ball.position.z += zSpeed; | |
| if (ball.position.x + 0.5 > 25 || ball.position.x - 0.5 < -25) { | |
| xSpeed = -xSpeed; | |
| } | |
| if (ball.position.y + 0.5 > 25 || ball.position.y - 0.5 < -25) { | |
| ySpeed = -ySpeed; | |
| } | |
| if (ball.position.z + 0.5 > 25 || ball.position.z - 0.5 < -25) { | |
| zSpeed = -zSpeed; | |
| } | |
| if (ball.position.y - 0.5 < paddle.position.y + 0.5 && ball.position.x + 0.5 > paddle.position.x - 2 && ball.position.x - 0.5 < paddle.position.x + 2 && ball.position.z + 0.5 > paddle.position.z - 0.5 && ball.position.z - 0.5 < paddle.position.z + 0.5) { | |
| ySpeed = -ySpeed; | |
| } | |
| for (var i = 0; i < bricks.length; i++) { | |
| if (ball.position.y + 0.5 > bricks[i].position.y - 0.5 && ball.position.y - 0.5 < bricks[i].position.y + 0.5 && ball.position.x + 0.5 > bricks[i].position.x - 1 && ball.position.x - 0.5 < bricks[i].position.x + 1 && ball.position.z + 0.5 > bricks[i].position.z - 0.5 && ball.position.z - 0.5 < bricks[i].position.z + 0.5) { | |
| scene.remove(bricks[i]); | |
| bricks.splice(i, 1); | |
| ySpeed = -ySpeed; | |
| } | |
| } | |
| renderer.render(scene, camera); | |
| } | |
| document.addEventListener('keydown', function(event) { | |
| if (event.keyCode === 37) { | |
| paddle.position.x -= 1; | |
| } | |
| if (event.keyCode === 39) { | |
| paddle.position.x += 1; | |
| } | |
| if (event.keyCode === 38) { | |
| paddle.position.z -= 1; | |
| } | |
| if (event.keyCode === 40) { | |
| paddle.position.z += 1; | |
| } | |
| }); | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |