Hugging Face's logo

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

App Files Community
awacke1 commited on
Commit
f074757
·
verified ·
1 Parent(s): 81071a4

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -148
index.html CHANGED
@@ -1,155 +1,67 @@
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
 
14
- <canvas id="gameCanvas"></canvas>
15
-
16
- <script>
17
- var scene = new THREE.Scene();
18
- var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
19
- camera.position.set(0, 30, 0);
20
- camera.lookAt(new THREE.Vector3(0, 0, 0));
21
- scene.add(camera);
22
-
23
- var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
24
- renderer.setClearColor(0x000000);
25
- renderer.setPixelRatio(window.devicePixelRatio);
26
- renderer.setSize(window.innerWidth, window.innerHeight);
27
-
28
- var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
29
- var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
30
- var balls = [];
31
-
32
- var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
33
- var bricks = [];
34
-
35
- function addBall() {
36
- var ball = new THREE.Mesh(ballGeometry, ballMaterial);
37
- ball.position.set((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25);
38
- ball.velocity = new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
39
- scene.add(ball);
40
- balls.push(ball);
41
- }
42
-
43
- function addBrick() {
44
- var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
45
- var brick = new THREE.Mesh(brickGeometry, brickMaterial);
46
- brick.position.set((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
47
- scene.add(brick);
48
- bricks.push(brick);
49
- }
50
-
51
- for (var i = 0; i < 50; i++) {
52
- addBrick();
53
- }
54
-
55
- var light = new THREE.PointLight(0xffffff, 1, 100);
56
- light.position.set(0, 30, 0);
57
- scene.add(light);
58
-
59
- var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
60
- var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
61
- var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
62
- scene.add(paddle);
63
-
64
- function animate() {
65
- requestAnimationFrame(animate);
66
-
67
- var paddleSpeed = 1.5;
68
-
69
- if (keys["87"] || keys["38"]) { // w or up arrow
70
- paddle.position.z -= paddleSpeed;
71
- }
72
- if (keys["83"] || keys["40"]) {
73
- paddle.position.z += paddleSpeed;
74
- }
75
- if (keys["65"] || keys["37"]) { // a or left arrow
76
- paddle.position.x -= paddleSpeed;
77
- }
78
- if (keys["68"] || keys["39"]) { // d or right arrow
79
- paddle.position.x += paddleSpeed;
80
- }
81
-
82
- var mouseSpeed = 0.1;
83
-
84
- if (mouseX !== null && mouseY !== null) {
85
- paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
86
- paddle.position.z = -(mouseY / window.innerHeight) * 50 + 25;
87
- }
88
-
89
- for (var i = 0; i < balls.length; i++) {
90
- balls[i].position.add(balls[i].velocity);
91
-
92
- if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
93
- balls[i].velocity.x = -balls[i].velocity.x;
94
- }
95
-
96
- if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
97
- balls[i].velocity.y = -balls[i].velocity.y;
98
- }
99
-
100
- if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
101
- balls[i].velocity.z = -balls[i].velocity.z;
102
- }
103
-
104
- 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) {
105
- balls[i].velocity.y = Math.abs(balls[i].velocity.y);
106
- }
107
-
108
- for (var j = 0; j < bricks.length; j++) {
109
- if (balls[i].position.distanceTo(bricks[j].position) <= 2) {
110
- scene.remove(bricks[j]);
111
- bricks.splice(j, 1);
112
- balls[i].velocity.negate();
113
- addBrick();
114
- }
115
- }
116
- }
117
-
118
- renderer.render(scene, camera);
119
- }
120
-
121
- var keys = {};
122
- var mouseX = null;
123
- var mouseY = null;
124
-
125
- document.addEventListener('mousedown', function(event) {
126
- if (event.button === 0) {
127
- addBrick();
128
- }
129
- if (event.button === 2) {
130
- addBall();
131
- }
132
- });
133
-
134
- document.addEventListener('keydown', function(event) {
135
- keys[event.keyCode] = true;
136
- });
137
-
138
- document.addEventListener('keyup', function(event) {
139
- keys[event.keyCode] = false;
140
- });
141
-
142
- document.addEventListener('mousemove', function(event) {
143
- mouseX = event.clientX;
144
- mouseY = event.clientY;
145
- });
146
-
147
- document.addEventListener('mouseleave', function(event) {
148
- mouseX = null;
149
- mouseY = null;
150
- });
151
-
152
- animate();
153
- </script>
154
  </body>
155
- </html>
 
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
 
14
+ <canvas id="gameCanvas"></canvas>
15
+
16
+ <script>
17
+ var scene = new THREE.Scene();
18
+ var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
19
+ camera.position.set(0, 30, 0);
20
+ camera.lookAt(new THREE.Vector3(0, 0, 0));
21
+ scene.add(camera);
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
+ // Other game setup code...
28
+
29
+ var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
30
+ var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
31
+ var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
32
+ scene.add(paddle);
33
+
34
+ function animate() {
35
+ requestAnimationFrame(animate);
36
+
37
+ // Keyboard control logic...
38
+
39
+ if (mouseX !== null && mouseY !== null) {
40
+ paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
41
+ // Adjust this line to match the mouse movement direction
42
+ paddle.position.z = (mouseY / window.innerHeight) * 50 - 25;
43
+ }
44
+
45
+ // Other animation code...
46
+
47
+ renderer.render(scene, camera);
48
+ }
49
+
50
+ var keys = {};
51
+ var mouseX = null;
52
+ var mouseY = null;
53
+ document.addEventListener('mousemove', function(event) {
54
+ mouseX = event.clientX;
55
+ mouseY = event.clientY;
56
+ });
57
+ document.addEventListener('mouseleave', function(event) {
58
+ mouseX = null;
59
+ mouseY = null;
60
+ });
61
+
62
+ // Other event listeners...
63
+
64
+ animate();
65
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </body>
67
+ </html>