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