Spaces:
Running
Running
Update index.html
Browse files- index.html +7 -77
index.html
CHANGED
|
@@ -104,7 +104,7 @@
|
|
| 104 |
<body>
|
| 105 |
<canvas id="gameCanvas"></canvas>
|
| 106 |
<div id="menu">
|
| 107 |
-
<h1>Stickman
|
| 108 |
<button class="btn" onclick="startGame()">Start Game</button>
|
| 109 |
</div>
|
| 110 |
|
|
@@ -140,7 +140,7 @@
|
|
| 140 |
|
| 141 |
const player1 = {
|
| 142 |
x: 100,
|
| 143 |
-
y:
|
| 144 |
height: 60,
|
| 145 |
width: 20,
|
| 146 |
color: '#FF6B6B',
|
|
@@ -149,7 +149,7 @@
|
|
| 149 |
|
| 150 |
const player2 = {
|
| 151 |
x: 700,
|
| 152 |
-
y:
|
| 153 |
height: 60,
|
| 154 |
width: 20,
|
| 155 |
color: '#4ECDC4',
|
|
@@ -233,80 +233,9 @@
|
|
| 233 |
ctx.save();
|
| 234 |
ctx.translate(x, y);
|
| 235 |
ctx.rotate(angle);
|
| 236 |
-
|
| 237 |
-
// Spear shaft
|
| 238 |
ctx.fillStyle = '#8B4513';
|
| 239 |
-
ctx.fillRect(-
|
| 240 |
-
|
| 241 |
-
// Spear head
|
| 242 |
-
ctx.beginPath();
|
| 243 |
-
ctx.moveTo(30, -8);
|
| 244 |
-
ctx.lineTo(45, 0);
|
| 245 |
-
ctx.lineTo(30, 8);
|
| 246 |
-
ctx.closePath();
|
| 247 |
-
ctx.fillStyle = '#C0C0C0';
|
| 248 |
-
ctx.fill();
|
| 249 |
-
|
| 250 |
-
// Decorative bindings
|
| 251 |
-
ctx.fillStyle = '#FFD700';
|
| 252 |
-
ctx.fillRect(-25, -3, 5, 6);
|
| 253 |
-
ctx.fillRect(-15, -3, 5, 6);
|
| 254 |
-
ctx.fillRect(-5, -3, 5, 6);
|
| 255 |
-
|
| 256 |
ctx.restore();
|
| 257 |
-
|
| 258 |
-
}
|
| 259 |
-
function resizeCanvas() {
|
| 260 |
-
canvas.width = window.innerWidth;
|
| 261 |
-
canvas.height = window.innerHeight;
|
| 262 |
-
}
|
| 263 |
-
|
| 264 |
-
function drawBackground() {
|
| 265 |
-
// Sky gradient
|
| 266 |
-
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
|
| 267 |
-
gradient.addColorStop(0, '#87CEEB');
|
| 268 |
-
gradient.addColorStop(1, '#FFA500');
|
| 269 |
-
ctx.fillStyle = gradient;
|
| 270 |
-
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| 271 |
-
|
| 272 |
-
// Desert ground
|
| 273 |
-
ctx.fillStyle = '#F4A460';
|
| 274 |
-
ctx.fillRect(0, canvas.height - 100, canvas.width, 100);
|
| 275 |
-
|
| 276 |
-
// Draw forts
|
| 277 |
-
drawFort(50, canvas.height - 200, '#8B4513');
|
| 278 |
-
drawFort(canvas.width - 250, canvas.height - 200, '#8B4513');
|
| 279 |
-
|
| 280 |
-
// Draw sand dunes
|
| 281 |
-
for(let i = 0; i < canvas.width; i += 200) {
|
| 282 |
-
drawDune(i, canvas.height - 100);
|
| 283 |
-
}
|
| 284 |
-
}
|
| 285 |
-
|
| 286 |
-
function drawFort(x, y, color) {
|
| 287 |
-
ctx.fillStyle = color;
|
| 288 |
-
|
| 289 |
-
// Main structure
|
| 290 |
-
ctx.fillRect(x, y, 200, 100);
|
| 291 |
-
|
| 292 |
-
// Battlements
|
| 293 |
-
for(let i = 0; i < 200; i += 40) {
|
| 294 |
-
ctx.fillRect(x + i, y - 20, 20, 20);
|
| 295 |
-
}
|
| 296 |
-
|
| 297 |
-
// Windows
|
| 298 |
-
ctx.fillStyle = '#000';
|
| 299 |
-
ctx.fillRect(x + 40, y + 30, 30, 40);
|
| 300 |
-
ctx.fillRect(x + 130, y + 30, 30, 40);
|
| 301 |
-
}
|
| 302 |
-
}
|
| 303 |
-
|
| 304 |
-
function drawDune(x, y) {
|
| 305 |
-
ctx.beginPath();
|
| 306 |
-
ctx.moveTo(x, y);
|
| 307 |
-
ctx.quadraticCurveTo(x + 100, y - 50, x + 200, y);
|
| 308 |
-
ctx.fillStyle = '#DAA520';
|
| 309 |
-
ctx.fill();
|
| 310 |
}
|
| 311 |
|
| 312 |
function handleMouseDown(e) {
|
|
@@ -425,8 +354,9 @@
|
|
| 425 |
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| 426 |
|
| 427 |
// Draw ground
|
| 428 |
-
|
| 429 |
-
|
|
|
|
| 430 |
drawStickman(player1.x, player1.y, player1.color);
|
| 431 |
drawStickman(player2.x, player2.y, player2.color);
|
| 432 |
|
|
|
|
| 104 |
<body>
|
| 105 |
<canvas id="gameCanvas"></canvas>
|
| 106 |
<div id="menu">
|
| 107 |
+
<h1>Stickman Javelin Battle</h1>
|
| 108 |
<button class="btn" onclick="startGame()">Start Game</button>
|
| 109 |
</div>
|
| 110 |
|
|
|
|
| 140 |
|
| 141 |
const player1 = {
|
| 142 |
x: 100,
|
| 143 |
+
y: 550,
|
| 144 |
height: 60,
|
| 145 |
width: 20,
|
| 146 |
color: '#FF6B6B',
|
|
|
|
| 149 |
|
| 150 |
const player2 = {
|
| 151 |
x: 700,
|
| 152 |
+
y: 550,
|
| 153 |
height: 60,
|
| 154 |
width: 20,
|
| 155 |
color: '#4ECDC4',
|
|
|
|
| 233 |
ctx.save();
|
| 234 |
ctx.translate(x, y);
|
| 235 |
ctx.rotate(angle);
|
|
|
|
|
|
|
| 236 |
ctx.fillStyle = '#8B4513';
|
| 237 |
+
ctx.fillRect(-25, -2, 50, 4);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 238 |
ctx.restore();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 239 |
}
|
| 240 |
|
| 241 |
function handleMouseDown(e) {
|
|
|
|
| 354 |
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
| 355 |
|
| 356 |
// Draw ground
|
| 357 |
+
ctx.fillStyle = '#90EE90';
|
| 358 |
+
ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
|
| 359 |
+
|
| 360 |
drawStickman(player1.x, player1.y, player1.color);
|
| 361 |
drawStickman(player2.x, player2.y, player2.color);
|
| 362 |
|