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 balls = []; | |
| var brickGeometry = new THREE.BoxGeometry(2, 1, 1); | |
| var bricks = []; | |
| 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); | |
| 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 speed = 0.1; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| for (var i = 0; i < balls.length; i++) { | |
| balls[i].position.x += (Math.random() - 0.5) * speed; | |
| balls[i].position.y += (Math.random() - 0.5) * speed; | |
| balls[i].position.z += (Math.random() - 0.5) * speed; | |
| if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) { | |
| balls[i].position.x = balls[i].position.x > 0 ? 25 - 0.5 : -25 + 0.5; | |
| } | |
| if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) { | |
| balls[i].position.y = balls[i].position.y > 0 ? 25 - 0.5 : -25 + 0.5; | |
| } | |
| if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) { | |
| balls[i].position.z = balls[i].position.z > 0 ? 25 - 0.5 : -25 + 0.5; | |
| } | |
| 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].position.y = -15 + 0.5; | |
| } | |
| for (var j = 0; j < bricks.length; j++) { | |
| if (balls[i].position.y + 0.5 > bricks[j].position.y - 0.5 && balls[i].position.y - 0.5 < bricks[j].position.y + 0.5 && balls[i].position.x + 0.5 > bricks[j].position.x - 1 && balls[i].position.x - 0.5 < bricks[j].position.x + 1 && balls[i].position.z + 0.5 > bricks[j].position.z - 0.5 && balls[i].position.z - 0.5 < bricks[j].position.z + 0.5) { | |
| scene.remove(bricks[j]); | |
| bricks.splice(j, 1); | |
| balls[i].position.y = balls[i].position.y > 0 ? 25 - 0.5 : -25 + 0.5; | |
| addBrick(); | |
| } | |
| } | |
| } | |
| renderer.render(scene, camera); | |
| } | |
| document.addEventListener('mousedown', function(event) { | |
| if (event.button === 0) { | |
| addBrick(); | |
| } | |
| if (event.button === 2) { | |
| addBall(); | |
| } | |
| }); | |
| 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> |