|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>🤓🕹️📱 3D Breakout Game</title> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
canvas { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
#score { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
font-size: 24px; |
|
|
font-weight: bold; |
|
|
color: white; |
|
|
text-shadow: 1px 1px 1px black; |
|
|
} |
|
|
</style> |
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<canvas id="gameCanvas"></canvas> |
|
|
<div id="score">Score: 0</div> |
|
|
<script> |
|
|
|
|
|
var scene, camera, renderer, ballGeometry, ballMaterial, balls = [], brickGeometry, bricks = [], score = 0, scoreElement, light, paddleGeometry, paddleMaterial, paddle, keys = {}, mouseX = null, mouseY = null; |
|
|
|
|
|
|
|
|
setupScene(); |
|
|
|
|
|
|
|
|
setupRenderer(); |
|
|
|
|
|
|
|
|
createGeometry(); |
|
|
for (var i = 0; i < 50; i++) { |
|
|
addBall(); |
|
|
} |
|
|
|
|
|
|
|
|
for (var i = 0; i < 50; i++) { |
|
|
addBrick(); |
|
|
} |
|
|
|
|
|
|
|
|
addLight(); |
|
|
|
|
|
|
|
|
addPaddle(); |
|
|
|
|
|
|
|
|
registerEvents(); |
|
|
|
|
|
|
|
|
fetchLetters(); |
|
|
|
|
|
|
|
|
animate(); |
|
|
|
|
|
function setupScene() { |
|
|
scene = new THREE.Scene(); |
|
|
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); |
|
|
} |
|
|
|
|
|
function setupRenderer() { |
|
|
renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') }); |
|
|
renderer.setClearColor(0x000000); |
|
|
renderer.setPixelRatio(window.devicePixelRatio); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
} |
|
|
|
|
|
function createGeometry() { |
|
|
ballGeometry = new THREE.SphereGeometry(0.5, 32, 32); |
|
|
ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); |
|
|
brickGeometry = new THREE.BoxGeometry(2, 1, 1); |
|
|
} |
|
|
|
|
|
function addBall() { |
|
|
var ball = createMesh(ballGeometry, ballMaterial); |
|
|
ball.velocity = getRandomVelocity(); |
|
|
balls.push(ball); |
|
|
} |
|
|
|
|
|
function addBrick() { |
|
|
var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }); |
|
|
var brick = createMesh(brickGeometry, brickMaterial); |
|
|
bricks.push(brick); |
|
|
} |
|
|
|
|
|
function addLight() { |
|
|
light = new THREE.PointLight(0xffffff, 1, 100); |
|
|
light.position.set(0, 30, 0); |
|
|
scene.add(light); |
|
|
} |
|
|
|
|
|
function addPaddle() { |
|
|
paddleGeometry = new THREE.BoxGeometry(4, 1, 1); |
|
|
paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); |
|
|
paddle = createMesh(paddleGeometry, paddleMaterial); |
|
|
} |
|
|
|
|
|
function createMesh(geometry, material) { |
|
|
var mesh = new THREE.Mesh(geometry, material); |
|
|
mesh.position.set(getRandomPosition()); |
|
|
scene.add(mesh); |
|
|
return mesh; |
|
|
} |
|
|
|
|
|
function getRandomPosition() { |
|
|
return new THREE.Vector3((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50); |
|
|
} |
|
|
|
|
|
function getRandomVelocity() { |
|
|
return new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize(); |
|
|
} |
|
|
|
|
|
function registerEvents() { |
|
|
document.addEventListener('mousedown', onMouseDown); |
|
|
document.addEventListener('keydown', onKeyDown); |
|
|
document.addEventListener('keyup', onKeyUp); |
|
|
document.addEventListener('mousemove', onMouseMove); |
|
|
document.addEventListener('mouseleave', onMouseLeave); |
|
|
window.addEventListener('resize', onWindowResize, false); |
|
|
} |
|
|
|
|
|
function fetchLetters() { |
|
|
fetch('https://api11.salmonground-a8f39f59.centralus.azurecontainerapps.io/selftest', { |
|
|
method: 'GET', |
|
|
headers: { |
|
|
'Accept': 'application/json' |
|
|
} |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
var queryResults = data.QueryResults; |
|
|
queryResults = queryResults.substring(0, 10); |
|
|
var fontLoader = new THREE.FontLoader(); |
|
|
fontLoader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) { |
|
|
for (var i = 0; i < queryResults.length; i++) { |
|
|
var letter = queryResults[i].toLowerCase(); |
|
|
if (letter.match(/[a-z]/i)) { |
|
|
var letterGeometry = new THREE.TextGeometry(letter, { |
|
|
font: font, |
|
|
size: 1, |
|
|
height: 0.5, |
|
|
curveSegments: 12, |
|
|
bevelEnabled: false |
|
|
}); |
|
|
var letterMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); |
|
|
var letterMesh = createMesh(letterGeometry, letterMaterial); |
|
|
balls.push(letterMesh); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
function animate() { |
|
|
|
|
|
} |
|
|
|
|
|
function onMouseDown(event) { |
|
|
|
|
|
} |
|
|
|
|
|
function onKeyDown(event) { |
|
|
keys[event.keyCode] = true; |
|
|
} |
|
|
|
|
|
function onKeyUp(event) { |
|
|
keys[event.keyCode] = false; |
|
|
} |
|
|
|
|
|
function onMouseMove(event) { |
|
|
mouseX = event.clientX; |
|
|
mouseY = event.clientY; |
|
|
} |
|
|
|
|
|
function onMouseLeave(event) { |
|
|
mouseX = null; |
|
|
mouseY = null; |
|
|
} |
|
|
|
|
|
function onWindowResize() { |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
