Hugging Face's logo

Spaces:
awacke1
/
3d-Breakout-Game-Three.JS
Running

App Files Community
awacke1 commited on
Commit
1145229
·
1 Parent(s): 0ac418d

Create version2-index.html

Browse files
Files changed (1) hide show
  1. version2-index.html +122 -0
version2-index.html ADDED
@@ -0,0 +1,122 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>3D Breakout Game</title>
6
+ <style>
7
+ body { margin: 0; }
8
+ canvas { width: 100%; height: 100%; }
9
+ </style>
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
11
+ </head>
12
+ <body>
13
+ <canvas id="gameCanvas"></canvas>
14
+
15
+ <script>
16
+ var scene = new THREE.Scene();
17
+ var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
18
+ camera.position.set(0, 30, 0);
19
+ camera.lookAt(new THREE.Vector3(0, 0, 0));
20
+ scene.add(camera);
21
+
22
+ var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
23
+ renderer.setClearColor(0x000000);
24
+ renderer.setPixelRatio(window.devicePixelRatio);
25
+ renderer.setSize(window.innerWidth, window.innerHeight);
26
+
27
+ var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
28
+ var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
29
+ var balls = [];
30
+
31
+ var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
32
+ var bricks = [];
33
+
34
+ function addBall() {
35
+ var ball = new THREE.Mesh(ballGeometry, ballMaterial);
36
+ ball.position.set((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25);
37
+ scene.add(ball);
38
+ balls.push(ball);
39
+ }
40
+
41
+ function addBrick() {
42
+ var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
43
+ var brick = new THREE.Mesh(brickGeometry, brickMaterial);
44
+ brick.position.set((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
45
+ scene.add(brick);
46
+ bricks.push(brick);
47
+ }
48
+
49
+ for (var i = 0; i < 50; i++) {
50
+ addBrick();
51
+ }
52
+
53
+ var light = new THREE.PointLight(0xffffff, 1, 100);
54
+ light.position.set(0, 30, 0);
55
+ scene.add(light);
56
+
57
+ var speed = 0.1;
58
+
59
+ function animate() {
60
+ requestAnimationFrame(animate);
61
+
62
+ for (var i = 0; i < balls.length; i++) {
63
+ balls[i].position.x += (Math.random() - 0.5) * speed;
64
+ balls[i].position.y += (Math.random() - 0.5) * speed;
65
+ balls[i].position.z += (Math.random() - 0.5) * speed;
66
+
67
+ if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
68
+ balls[i].position.x = balls[i].position.x > 0 ? 25 - 0.5 : -25 + 0.5;
69
+ }
70
+
71
+ if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
72
+ balls[i].position.y = balls[i].position.y > 0 ? 25 - 0.5 : -25 + 0.5;
73
+ }
74
+ if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
75
+ balls[i].position.z = balls[i].position.z > 0 ? 25 - 0.5 : -25 + 0.5;
76
+ }
77
+
78
+ if (balls[i].position.y - 0.5 < -15 && balls[i].position.x + 0.5 > paddle.position.x - 2 && balls[i].position.x - 0.5 < paddle.position.x + 2 && balls[i].position.z + 0.5 > paddle.position.z - 0.5 && balls[i].position.z - 0.5 < paddle.position.z + 0.5) {
79
+ balls[i].position.y = -15 + 0.5;
80
+ }
81
+
82
+ for (var j = 0; j < bricks.length; j++) {
83
+ if (balls[i].position.y + 0.5 > bricks[j].position.y - 0.5 && balls[i].position.y - 0.5 < bricks[j].position.y + 0.5 && balls[i].position.x + 0.5 > bricks[j].position.x - 1 && balls[i].position.x - 0.5 < bricks[j].position.x + 1 && balls[i].position.z + 0.5 > bricks[j].position.z - 0.5 && balls[i].position.z - 0.5 < bricks[j].position.z + 0.5) {
84
+ scene.remove(bricks[j]);
85
+ bricks.splice(j, 1);
86
+ balls[i].position.y = balls[i].position.y > 0 ? 25 - 0.5 : -25 + 0.5;
87
+ addBrick();
88
+ }
89
+ }
90
+ }
91
+
92
+ renderer.render(scene, camera);
93
+ }
94
+
95
+ document.addEventListener('mousedown', function(event) {
96
+ if (event.button === 0) {
97
+ addBrick();
98
+ }
99
+ if (event.button === 2) {
100
+ addBall();
101
+ }
102
+ });
103
+
104
+ document.addEventListener('keydown', function(event) {
105
+ if (event.keyCode === 37) {
106
+ paddle.position.x -= 1;
107
+ }
108
+ if (event.keyCode === 39) {
109
+ paddle.position.x += 1;
110
+ }
111
+ if (event.keyCode === 38) {
112
+ paddle.position.z -= 1;
113
+ }
114
+ if (event.keyCode === 40) {
115
+ paddle.position.z += 1;
116
+ }
117
+ });
118
+
119
+ animate();
120
+ </script>
121
+ </body>
122
+ </html>