Hugging Face's logo

Spaces:
awacke1
/
Happy-Valley-Game
Sleeping

App Files Community
awacke1 commited on
Commit
bdf693a
·
verified ·
1 Parent(s): 977e885

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +170 -0
index.html ADDED
@@ -0,0 +1,170 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Basic Three.js 2.5D Scene</title>
5
+ <style>
6
+ body { margin: 0; }
7
+ canvas { display: block; }
8
+ </style>
9
+ </head>
10
+ <body>
11
+ <script type="importmap">
12
+ {
13
+ "imports": {
14
+ "three": "https://unpkg.com/[email protected]/build/three.module.js",
15
+ "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
16
+ }
17
+ }
18
+ </script>
19
+ <script type="module">
20
+ import * as THREE from 'three';
21
+
22
+ let scene, camera, renderer, playerMesh;
23
+ let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
24
+ const playerSpeed = 0.1;
25
+
26
+ function init() {
27
+ // --- Basic Setup ---
28
+ scene = new THREE.Scene();
29
+ scene.background = new THREE.Color(0x87CEEB); // Sky blue background
30
+
31
+ // --- Camera (Orthographic for 2.5D feel) ---
32
+ const aspect = window.innerWidth / window.innerHeight;
33
+ const viewSize = 15; // How many units are visible vertically
34
+ camera = new THREE.OrthographicCamera(
35
+ -viewSize * aspect / 2, viewSize * aspect / 2,
36
+ viewSize / 2, -viewSize / 2,
37
+ 1, 1000
38
+ );
39
+ camera.position.set(5, 10, 5); // Positioned above and looking down
40
+ camera.lookAt(0, 0, 0); // Look at the center of the scene
41
+ scene.add(camera);
42
+
43
+ // --- Lighting ---
44
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
45
+ scene.add(ambientLight);
46
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
47
+ directionalLight.position.set(5, 10, 7.5);
48
+ scene.add(directionalLight);
49
+
50
+
51
+ // --- Ground ---
52
+ const groundGeometry = new THREE.PlaneGeometry(20, 20);
53
+ const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x228B22 }); // Forest green
54
+ const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
55
+ groundMesh.rotation.x = -Math.PI / 2; // Rotate to lie flat
56
+ groundMesh.position.y = -0.5; // Slightly below origin
57
+ scene.add(groundMesh);
58
+
59
+ // --- Player Placeholder (Simple Cube) ---
60
+ // In a real game, you'd load a sprite/texture here
61
+ const playerGeometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);
62
+ const playerMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // Red
63
+ playerMesh = new THREE.Mesh(playerGeometry, playerMaterial);
64
+ playerMesh.position.y = 0; // Place on top of the ground level
65
+ scene.add(playerMesh);
66
+
67
+
68
+ // --- Renderer ---
69
+ renderer = new THREE.WebGLRenderer({ antialias: true });
70
+ renderer.setSize(window.innerWidth, window.innerHeight);
71
+ document.body.appendChild(renderer.domElement);
72
+
73
+ // --- Event Listeners for Movement ---
74
+ document.addEventListener('keydown', onKeyDown);
75
+ document.addEventListener('keyup', onKeyUp);
76
+ window.addEventListener('resize', onWindowResize); // Handle window resizing
77
+
78
+ // --- Start Animation ---
79
+ animate();
80
+ }
81
+
82
+ function onKeyDown(event) {
83
+ switch (event.code) {
84
+ case 'KeyW':
85
+ case 'ArrowUp':
86
+ moveForward = true;
87
+ break;
88
+ case 'KeyS':
89
+ case 'ArrowDown':
90
+ moveBackward = true;
91
+ break;
92
+ case 'KeyA':
93
+ case 'ArrowLeft':
94
+ moveLeft = true;
95
+ break;
96
+ case 'KeyD':
97
+ case 'ArrowRight':
98
+ moveRight = true;
99
+ break;
100
+ }
101
+ }
102
+
103
+ function onKeyUp(event) {
104
+ switch (event.code) {
105
+ case 'KeyW':
106
+ case 'ArrowUp':
107
+ moveForward = false;
108
+ break;
109
+ case 'KeyS':
110
+ case 'ArrowDown':
111
+ moveBackward = false;
112
+ break;
113
+ case 'KeyA':
114
+ case 'ArrowLeft':
115
+ moveLeft = false;
116
+ break;
117
+ case 'KeyD':
118
+ case 'ArrowRight':
119
+ moveRight = false;
120
+ break;
121
+ }
122
+ }
123
+
124
+ function updatePlayerPosition() {
125
+ if (!playerMesh) return;
126
+
127
+ const moveVector = new THREE.Vector3();
128
+ if (moveForward) moveVector.z -= 1;
129
+ if (moveBackward) moveVector.z += 1;
130
+ if (moveLeft) moveVector.x -= 1;
131
+ if (moveRight) moveVector.x += 1;
132
+
133
+ // Normalize diagonal movement and apply speed
134
+ if (moveVector.lengthSq() > 0) { // Check if there's any movement
135
+ moveVector.normalize().multiplyScalar(playerSpeed);
136
+ playerMesh.position.add(moveVector);
137
+ }
138
+
139
+ // Keep camera centered on player (optional basic follow)
140
+ // camera.position.x = playerMesh.position.x;
141
+ // camera.position.z = playerMesh.position.z + 5; // Adjust Z offset as needed
142
+ // camera.lookAt(playerMesh.position);
143
+ }
144
+
145
+
146
+ function onWindowResize() {
147
+ const aspect = window.innerWidth / window.innerHeight;
148
+ const viewSize = 15;
149
+ camera.left = -viewSize * aspect / 2;
150
+ camera.right = viewSize * aspect / 2;
151
+ camera.top = viewSize / 2;
152
+ camera.bottom = -viewSize / 2;
153
+ camera.updateProjectionMatrix();
154
+ renderer.setSize(window.innerWidth, window.innerHeight);
155
+ }
156
+
157
+ function animate() {
158
+ requestAnimationFrame(animate); // Loop the animation
159
+
160
+ updatePlayerPosition(); // Update player based on input
161
+
162
+ renderer.render(scene, camera); // Render the scene
163
+ }
164
+
165
+ // --- Start the app ---
166
+ init();
167
+
168
+ </script>
169
+ </body>
170
+ </html>