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