<!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"]) { // w or up arrow
paddle.position.z -= paddleSpeed;
}
if (keys["83"] || keys["40"]) {
paddle.position.z += paddleSpeed;
}
if (keys["65"] || keys["37"]) { // a or left arrow
paddle.position.x -= paddleSpeed;
}
if (keys["68"] || keys["39"]) { // d or right arrow
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);
// Collision detection with the walls and paddle updated for wider paddle
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 - 3 && balls[i].position.x - 0.5 < paddle.position.x + 3 && balls[i].position.z + 0.5 > paddle.position.z - 0.5 && balls[i].position.z - 0.5 < paddle.position.z + 0.5) { // Adjusted for wider paddle
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>