Hugging Face's logo

Spaces:
awacke1
/
HTML5-Tower-Building-3D-Game
Running

App Files Community
awacke1 commited on
Commit
7fdb281
·
1 Parent(s): c486c3c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +98 -16
index.html CHANGED
@@ -1,19 +1,101 @@
1
  <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>Tower Building Game</title>
5
+ <meta charset="utf-8">
6
+ <style>
7
+ body {
8
+ margin: 0;
9
+ overflow: hidden;
10
+ }
11
+ canvas {
12
+ display: block;
13
+ }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
18
+ <script>
19
+ let scene, camera, renderer;
20
+ let blocks = [];
21
+ let currentBlock = null;
22
+
23
+ init();
24
+ animate();
25
+
26
+ function init() {
27
+ // Create a Three.js scene
28
+ scene = new THREE.Scene();
29
+
30
+ // Create a camera
31
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
32
+ camera.position.set(0, 50, 100);
33
+ camera.lookAt(0, 0, 0);
34
+
35
+ // Create a renderer
36
+ renderer = new THREE.WebGLRenderer({ antialias: true });
37
+ renderer.setSize(window.innerWidth, window.innerHeight);
38
+ document.body.appendChild(renderer.domElement);
39
+
40
+ // Add lights to the scene
41
+ let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
42
+ scene.add(ambientLight);
43
+
44
+ let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
45
+ directionalLight.position.set(0, 100, 100);
46
+ scene.add(directionalLight);
47
+
48
+ // Add ground plane to the scene
49
+ let planeGeometry = new THREE.PlaneGeometry(100, 100);
50
+ let planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
51
+ let plane = new THREE.Mesh(planeGeometry, planeMaterial);
52
+ plane.rotation.x = -Math.PI / 2;
53
+ scene.add(plane);
54
+
55
+ // Add event listeners for input
56
+ document.addEventListener('mousedown', onMouseDown, false);
57
+ document.addEventListener('touchstart', onTouchStart, false);
58
+ document.addEventListener('keydown', onKeyDown, false);
59
+ }
60
+
61
+ function animate() {
62
+ requestAnimationFrame(animate);
63
+ renderer.render(scene, camera);
64
+ }
65
+
66
+ function createBlock() {
67
+ let blockGeometry = new THREE.BoxGeometry(10, 10, 10);
68
+ let blockMaterial = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load('block_texture.jpg') });
69
+ let block = new THREE.Mesh(blockGeometry, blockMaterial);
70
+ block.position.set(0, 5, 0);
71
+ scene.add(block);
72
+ blocks.push(block);
73
+ currentBlock = block;
74
+ }
75
+
76
+ function placeBlock() {
77
+ if (currentBlock) {
78
+ currentBlock.position.y = 5;
79
+ currentBlock = null;
80
+ }
81
+ }
82
+
83
+ function onMouseDown(event) {
84
+ event.preventDefault();
85
+ createBlock();
86
+ }
87
+
88
+ function onTouchStart(event) {
89
+ event.preventDefault();
90
+ createBlock();
91
+ }
92
+
93
+ function onKeyDown(event) {
94
+ if (event.keyCode === 32) {
95
+ event.preventDefault();
96
+ placeBlock();
97
+ }
98
+ }
99
+ </script>
100
+ </body>
101
  </html>