|
|
<!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.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 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); |
|
|
paddle.position.y = -5; |
|
|
scene.add(paddle); |
|
|
|
|
|
var keys = {}; |
|
|
var mouseX = null; |
|
|
var mouseY = null; |
|
|
document.addEventListener('mousemove', function(event) { |
|
|
mouseX = event.clientX; |
|
|
mouseY = event.clientY; |
|
|
}); |
|
|
document.addEventListener('mouseleave', function(event) { |
|
|
mouseX = null; |
|
|
mouseY = null; |
|
|
}); |
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
if (mouseX !== null && mouseY !== null) { |
|
|
paddle.position.x = (mouseX / window.innerWidth) * 50 - 25; |
|
|
paddle.position.z = (mouseY / window.innerHeight) * 50 - 25; |
|
|
} |
|
|
|
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
|
|
|
animate(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
