File size: 6,694 Bytes
d2ce9b2 adf7ffb e011b85 adf7ffb e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 e011b85 0bd0040 adf7ffb 0bd0040 e011b85 adf7ffb 0bd0040 |
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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
<!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>
// Variable declarations
var scene, camera, renderer, ballGeometry, ballMaterial, balls = [], brickGeometry, bricks = [], score = 0, scoreElement, light, paddleGeometry, paddleMaterial, paddle, keys = {}, mouseX = null, mouseY = null;
// Setting up scene and camera
setupScene();
// Setting up renderer
setupRenderer();
// Adding balls
createGeometry();
for (var i = 0; i < 50; i++) {
addBall();
}
// Adding bricks
for (var i = 0; i < 50; i++) {
addBrick();
}
// Adding light
addLight();
// Adding paddle
addPaddle();
// Registering event listeners
registerEvents();
// Fetching data for 3D letters
fetchLetters();
// Starting animation
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() {
// Rest of your animate function
}
function onMouseDown(event) {
// Your mouse down 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>
|