File size: 3,905 Bytes
1145229 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<!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);
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> |