|
<!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/[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> |
