Hugging Face's logo

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

App Files Community
awacke1 commited on
Commit
f511e5e
·
1 Parent(s): f78b508

Create version1-index.html

Browse files
Files changed (1) hide show
  1. version1-index.html +113 -0
version1-index.html ADDED
@@ -0,0 +1,113 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 ball = new THREE.Mesh(ballGeometry, ballMaterial);
30
+ scene.add(ball);
31
+
32
+ var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
33
+ var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
34
+ var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
35
+ paddle.position.y = -15;
36
+ scene.add(paddle);
37
+
38
+ var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
39
+ var bricks = [];
40
+
41
+ for (var i = 0; i < 50; i++) {
42
+ var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
43
+ var brick = new THREE.Mesh(brickGeometry, brickMaterial);
44
+ brick.position.x = (Math.random() - 0.5) * 50;
45
+ brick.position.y = (Math.random() - 0.5) * 50;
46
+ brick.position.z = (Math.random() - 0.5) * 50;
47
+ scene.add(brick);
48
+ bricks.push(brick);
49
+ }
50
+
51
+ var light = new THREE.PointLight(0xffffff, 1, 100);
52
+ light.position.set(0, 30, 0);
53
+ scene.add(light);
54
+
55
+ var speed = 0.1;
56
+ var xSpeed = speed;
57
+ var ySpeed = speed;
58
+ var zSpeed = speed;
59
+
60
+ function animate() {
61
+ requestAnimationFrame(animate);
62
+
63
+ ball.position.x += xSpeed;
64
+ ball.position.y += ySpeed;
65
+ ball.position.z += zSpeed;
66
+
67
+ if (ball.position.x + 0.5 > 25 || ball.position.x - 0.5 < -25) {
68
+ xSpeed = -xSpeed;
69
+ }
70
+
71
+ if (ball.position.y + 0.5 > 25 || ball.position.y - 0.5 < -25) {
72
+ ySpeed = -ySpeed;
73
+ }
74
+
75
+ if (ball.position.z + 0.5 > 25 || ball.position.z - 0.5 < -25) {
76
+ zSpeed = -zSpeed;
77
+ }
78
+
79
+ if (ball.position.y - 0.5 < paddle.position.y + 0.5 && ball.position.x + 0.5 > paddle.position.x - 2 && ball.position.x - 0.5 < paddle.position.x + 2 && ball.position.z + 0.5 > paddle.position.z - 0.5 && ball.position.z - 0.5 < paddle.position.z + 0.5) {
80
+ ySpeed = -ySpeed;
81
+ }
82
+
83
+ for (var i = 0; i < bricks.length; i++) {
84
+ if (ball.position.y + 0.5 > bricks[i].position.y - 0.5 && ball.position.y - 0.5 < bricks[i].position.y + 0.5 && ball.position.x + 0.5 > bricks[i].position.x - 1 && ball.position.x - 0.5 < bricks[i].position.x + 1 && ball.position.z + 0.5 > bricks[i].position.z - 0.5 && ball.position.z - 0.5 < bricks[i].position.z + 0.5) {
85
+ scene.remove(bricks[i]);
86
+ bricks.splice(i, 1);
87
+ ySpeed = -ySpeed;
88
+ }
89
+ }
90
+
91
+ renderer.render(scene, camera);
92
+ }
93
+
94
+ document.addEventListener('keydown', function(event) {
95
+ if (event.keyCode === 37) {
96
+ paddle.position.x -= 1;
97
+ }
98
+ if (event.keyCode === 39) {
99
+ paddle.position.x += 1;
100
+ }
101
+ if (event.keyCode === 38) {
102
+ paddle.position.z -= 1;
103
+ }
104
+ if (event.keyCode === 40) {
105
+ paddle.position.z += 1;
106
+ }
107
+ });
108
+
109
+ animate();
110
+ </script>
111
+
112
+ </body>
113
+ </html>