File size: 2,987 Bytes
089f324 10b277c 3aa6634 |
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 |
<!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.z = 5;
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 = -3;
scene.add(paddle);
var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
var brickMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var bricks = [];
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 6; j++) {
var brick = new THREE.Mesh(brickGeometry, brickMaterial);
brick.position.x = j * 3 - 7;
brick.position.y = i * 2 + 3;
scene.add(brick);
bricks.push(brick);
}
}
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);
var speed = 0.05;
var xSpeed = speed;
var ySpeed = speed;
function animate() {
requestAnimationFrame(animate);
ball.position.x += xSpeed;
ball.position.y += ySpeed;
if (ball.position.x + 0.5 > 10 || ball.position.x - 0.5 < -10) {
xSpeed = -xSpeed;
}
if (ball.position.y + 0.5 > 10) {
ySpeed = -ySpeed;
}
if (ball.position.y - 0.5 < -4) {
alert('Game Over!');
location.reload();
}
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) {
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) {
scene.remove(bricks[i]);
bricks.splice(i, 1);
ySpeed = -ySpeed;
}
}
if (bricks.length === 0) {
alert('You win!');
location.reload();
}
renderer.render(scene, camera);
}
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37) {
paddle.position.x -= 0.5;
}
if (event.keyCode === 39) {
paddle.position.x += 0.5;
}
});
animate();
</script>
</body>
</html> |