| <!DOCTYPE html> |
| <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/three@0.132.2/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); |
| 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"]) { |
| paddle.position.z -= paddleSpeed; |
| } |
| if (keys["83"] || keys["40"]) { |
| paddle.position.z += paddleSpeed; |
| } |
| if (keys["65"] || keys["37"]) { |
| paddle.position.x -= paddleSpeed; |
| } |
| if (keys["68"] || keys["39"]) { |
| 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 - 3 && balls[i].position.x - 0.5 < paddle.position.x + 3 && 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(); |
| } |
| } |
| } |
| 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> |
