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); | |
| 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(); | |
| } | |
| } | |
| } | |
| 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> |