Hugging Face's logo

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

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

Create v1-index.html

Browse files
Files changed (1) hide show
  1. v1-index.html +101 -0
v1-index.html ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>