Hugging Face's logo

Spaces:
awacke1
/
NodachiSwordFightGame
Running

App Files Community
awacke1 commited on
Commit
b1dd6d8
·
verified ·
1 Parent(s): fb7c232

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +197 -19
index.html CHANGED
@@ -1,19 +1,197 @@
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 lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>2D Sword Duel Game (No Well)</title>
7
+ <style>
8
+ body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
9
+ canvas { display: block; }
10
+ </style>
11
+ </head>
12
+ <body>
13
+ <canvas id="gameCanvas"></canvas>
14
+ <script>
15
+ const canvas = document.getElementById('gameCanvas');
16
+ const ctx = canvas.getContext('2d');
17
+
18
+ canvas.width = window.innerWidth;
19
+ canvas.height = window.innerHeight;
20
+
21
+ let playerScore = 0;
22
+ let enemyScore = 0;
23
+
24
+ function createCharacter(x, y, color) {
25
+ return {
26
+ x: x,
27
+ y: y,
28
+ color: color,
29
+ velocity: { x: 0, y: 0 },
30
+ parts: [
31
+ { x: 0, y: -30, radius: 15, color: color },
32
+ { x: 0, y: 0, radius: 20, color: color },
33
+ { x: -20, y: 0, radius: 10, color: color },
34
+ { x: 20, y: 0, radius: 10, color: color },
35
+ { x: -10, y: 40, radius: 10, color: color },
36
+ { x: 10, y: 40, radius: 10, color: color }
37
+ ],
38
+ sword: {
39
+ length: 50,
40
+ angle: 0,
41
+ color: 'gray',
42
+ extending: false,
43
+ extendProgress: 0
44
+ }
45
+ };
46
+ }
47
+
48
+ const player = createCharacter(canvas.width / 4, canvas.height / 2, 'blue');
49
+ const enemy = createCharacter(canvas.width * 3 / 4, canvas.height / 2, 'red');
50
+
51
+ function drawCharacter(character) {
52
+ character.parts.forEach(part => {
53
+ ctx.beginPath();
54
+ ctx.arc(character.x + part.x, character.y + part.y, part.radius, 0, Math.PI * 2);
55
+ ctx.fillStyle = part.color;
56
+ ctx.fill();
57
+ });
58
+ }
59
+
60
+ function drawSword(character) {
61
+ const extendedLength = character.sword.length + character.sword.extendProgress * 50;
62
+ ctx.beginPath();
63
+ ctx.moveTo(character.x, character.y);
64
+ ctx.lineTo(
65
+ character.x + Math.cos(character.sword.angle) * extendedLength,
66
+ character.y + Math.sin(character.sword.angle) * extendedLength
67
+ );
68
+ ctx.strokeStyle = character.sword.color;
69
+ ctx.lineWidth = 5;
70
+ ctx.stroke();
71
+ }
72
+
73
+ function drawScores() {
74
+ ctx.font = '20px Arial';
75
+ ctx.fillStyle = 'black';
76
+ ctx.fillText(`Player: ${playerScore}`, 10, 30);
77
+ ctx.fillText(`Enemy: ${enemyScore}`, canvas.width - 150, 30);
78
+ }
79
+
80
+ function moveCharacter(character) {
81
+ character.x += character.velocity.x;
82
+ character.y += character.velocity.y;
83
+ character.velocity.x *= 0.9;
84
+ character.velocity.y *= 0.9;
85
+
86
+ // Keep character within canvas bounds
87
+ character.x = Math.max(0, Math.min(canvas.width, character.x));
88
+ character.y = Math.max(0, Math.min(canvas.height, character.y));
89
+ }
90
+
91
+ function moveEnemy() {
92
+ const dx = player.x - enemy.x;
93
+ const dy = player.y - enemy.y;
94
+ const distance = Math.sqrt(dx*dx + dy*dy);
95
+ if (distance > 100) {
96
+ enemy.velocity.x += dx / distance * 0.5;
97
+ enemy.velocity.y += dy / distance * 0.5;
98
+ }
99
+ enemy.sword.angle = Math.atan2(dy, dx);
100
+ }
101
+
102
+ function extendSword(character) {
103
+ if (character.sword.extending) {
104
+ character.sword.extendProgress += 0.1;
105
+ if (character.sword.extendProgress >= 1) {
106
+ character.sword.extending = false;
107
+ }
108
+ } else {
109
+ character.sword.extendProgress = Math.max(0, character.sword.extendProgress - 0.1);
110
+ }
111
+ }
112
+
113
+ function getSwordTip(character) {
114
+ const extendedLength = character.sword.length + character.sword.extendProgress * 50;
115
+ return {
116
+ x: character.x + Math.cos(character.sword.angle) * extendedLength,
117
+ y: character.y + Math.sin(character.sword.angle) * extendedLength
118
+ };
119
+ }
120
+
121
+ function checkSwordCollision(char1, char2) {
122
+ const sword1Tip = getSwordTip(char1);
123
+ const sword2Tip = getSwordTip(char2);
124
+
125
+ const distance = Math.sqrt(
126
+ Math.pow(sword1Tip.x - sword2Tip.x, 2) +
127
+ Math.pow(sword1Tip.y - sword2Tip.y, 2)
128
+ );
129
+
130
+ return distance < 10; // Assuming sword tips are within 10 pixels
131
+ }
132
+
133
+ function handleCollision(attacker, defender) {
134
+ const angle = Math.atan2(defender.y - attacker.y, defender.x - attacker.x);
135
+ attacker.velocity.x += Math.cos(angle) * 5;
136
+ attacker.velocity.y += Math.sin(angle) * 5;
137
+ defender.velocity.x -= Math.cos(angle) * 15;
138
+ defender.velocity.y -= Math.sin(angle) * 15;
139
+
140
+ if (attacker === player) {
141
+ playerScore++;
142
+ } else {
143
+ enemyScore++;
144
+ }
145
+ }
146
+
147
+ function update() {
148
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
149
+
150
+ moveCharacter(player);
151
+ moveCharacter(enemy);
152
+ moveEnemy();
153
+ extendSword(player);
154
+ extendSword(enemy);
155
+
156
+ drawCharacter(player);
157
+ drawCharacter(enemy);
158
+ drawSword(player);
159
+ drawSword(enemy);
160
+ drawScores();
161
+
162
+ if (checkSwordCollision(player, enemy)) {
163
+ handleCollision(player, enemy);
164
+ }
165
+ if (checkSwordCollision(enemy, player)) {
166
+ handleCollision(enemy, player);
167
+ }
168
+
169
+ requestAnimationFrame(update);
170
+ }
171
+
172
+ canvas.addEventListener('mousemove', (event) => {
173
+ player.sword.angle = Math.atan2(event.clientY - player.y, event.clientX - player.x);
174
+ });
175
+
176
+ canvas.addEventListener('mousedown', () => {
177
+ player.sword.extending = true;
178
+ });
179
+
180
+ canvas.addEventListener('mouseup', () => {
181
+ player.sword.extending = false;
182
+ });
183
+
184
+ document.addEventListener('keydown', (event) => {
185
+ if (event.key === 'd' || event.key === 'D') {
186
+ player.velocity.x += Math.cos(player.sword.angle) * 2;
187
+ player.velocity.y += Math.sin(player.sword.angle) * 2;
188
+ } else if (event.key === 'a' || event.key === 'A') {
189
+ player.velocity.x -= Math.cos(player.sword.angle) * 2;
190
+ player.velocity.y -= Math.sin(player.sword.angle) * 2;
191
+ }
192
+ });
193
+
194
+ update();
195
+ </script>
196
+ </body>
197
+ </html>