Hugging Face's logo

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

App Files Community
awacke1 commited on
Commit
61a2c7e
·
verified ·
1 Parent(s): a47e5c7

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +120 -54
index.html CHANGED
@@ -1,62 +1,128 @@
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
- var light = new THREE.PointLight(0xffffff, 1, 100);
27
- light.position.set(0, 30, 0);
28
- scene.add(light);
29
-
30
- var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
31
- var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
32
- var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
33
- paddle.position.y = -5; // Adjust the paddle's vertical position if necessary
34
- scene.add(paddle);
35
-
36
- var keys = {};
37
- var mouseX = null;
38
- var mouseY = null;
39
- document.addEventListener('mousemove', function(event) {
40
- mouseX = event.clientX;
41
- mouseY = event.clientY;
42
- });
43
- document.addEventListener('mouseleave', function(event) {
44
- mouseX = null;
45
- mouseY = null;
46
- });
47
-
48
- function animate() {
49
- requestAnimationFrame(animate);
50
-
51
- if (mouseX !== null && mouseY !== null) {
52
- paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
53
- paddle.position.z = (mouseY / window.innerHeight) * 50 - 25; // Corrected for mouse movement
54
- }
55
-
56
- renderer.render(scene, camera);
57
- }
58
-
59
- animate();
60
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  </body>
62
- </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
+ var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
27
+ var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
28
+ var balls = [];
29
+ var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
30
+ var bricks = [];
31
+ function addBall() {
32
+ var ball = new THREE.Mesh(ballGeometry, ballMaterial);
33
+ ball.position.set((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25);
34
+ ball.velocity = new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
35
+ scene.add(ball);
36
+ balls.push(ball);
37
+ }
38
+ function addBrick() {
39
+ var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
40
+ var brick = new THREE.Mesh(brickGeometry, brickMaterial);
41
+ brick.position.set((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
42
+ scene.add(brick);
43
+ bricks.push(brick);
44
+ }
45
+ for (var i = 0; i < 50; i++) {
46
+ addBrick();
47
+ }
48
+ var light = new THREE.PointLight(0xffffff, 1, 100);
49
+ light.position.set(0, 30, 0);
50
+ scene.add(light);
51
+ var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
52
+ var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
53
+ var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
54
+ scene.add(paddle);
55
+ function animate() {
56
+ requestAnimationFrame(animate);
57
+ var paddleSpeed = 1.5;
58
+ if (keys["87"] || keys["38"]) { // w or up arrow
59
+ paddle.position.z -= paddleSpeed;
60
+ }
61
+ if (keys["83"] || keys["40"]) {
62
+ paddle.position.z += paddleSpeed;
63
+ }
64
+ if (keys["65"] || keys["37"]) { // a or left arrow
65
+ paddle.position.x -= paddleSpeed;
66
+ }
67
+ if (keys["68"] || keys["39"]) { // d or right arrow
68
+ paddle.position.x += paddleSpeed;
69
+ }
70
+ var mouseSpeed = 0.1;
71
+ if (mouseX !== null && mouseY !== null) {
72
+ paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
73
+ paddle.position.z = -(mouseY / window.innerHeight) * 50 + 25;
74
+ }
75
+ for (var i = 0; i < balls.length; i++) {
76
+ balls[i].position.add(balls[i].velocity);
77
+ if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
78
+ balls[i].velocity.x = -balls[i].velocity.x;
79
+ }
80
+ if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
81
+ balls[i].velocity.y = -balls[i].velocity.y;
82
+ }
83
+ if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
84
+ balls[i].velocity.z = -balls[i].velocity.z;
85
+ }
86
+ 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) {
87
+ balls[i].velocity.y = Math.abs(balls[i].velocity.y);
88
+ }
89
+ for (var j = 0; j < bricks.length; j++) {
90
+ if (balls[i].position.distanceTo(bricks[j].position) <= 2) {
91
+ scene.remove(bricks[j]);
92
+ bricks.splice(j, 1);
93
+ balls[i].velocity.negate();
94
+ addBrick();
95
+ }
96
+ }
97
+ }
98
+ renderer.render(scene, camera);
99
+ }
100
+ var keys = {};
101
+ var mouseX = null;
102
+ var mouseY = null;
103
+ document.addEventListener('mousedown', function(event) {
104
+ if (event.button === 0) {
105
+ addBrick();
106
+ }
107
+ if (event.button === 2) {
108
+ addBall();
109
+ }
110
+ });
111
+ document.addEventListener('keydown', function(event) {
112
+ keys[event.keyCode] = true;
113
+ });
114
+ document.addEventListener('keyup', function(event) {
115
+ keys[event.keyCode] = false;
116
+ });
117
+ document.addEventListener('mousemove', function(event) {
118
+ mouseX = event.clientX;
119
+ mouseY = event.clientY;
120
+ });
121
+ document.addEventListener('mouseleave', function(event) {
122
+ mouseX = null;
123
+ mouseY = null;
124
+ });
125
+ animate();
126
+ </script>
127
  </body>
128
+ </html>