File size: 3,459 Bytes
f511e5e |
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 |
<!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 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> |