diff options
| author | elioat <hi@eli.li> | 2024-01-06 19:56:01 -0500 |
|---|---|---|
| committer | elioat <hi@eli.li> | 2024-01-06 19:56:01 -0500 |
| commit | 57467640944f2714b80237e67b143e95be6a34d1 (patch) | |
| tree | 16a5e258bed3491abe785dc9c11b08a83783dd17 /js | |
| parent | e0c4b62252b3a507ac0dd4272cd37a255dd4c9ba (diff) | |
| download | tour-57467640944f2714b80237e67b143e95be6a34d1.tar.gz | |
*
Diffstat (limited to 'js')
| -rw-r--r-- | js/starting-place/game.js | 111 | ||||
| -rw-r--r-- | js/starting-place/index.html | 21 |
2 files changed, 132 insertions, 0 deletions
diff --git a/js/starting-place/game.js b/js/starting-place/game.js new file mode 100644 index 0000000..4c9fe74 --- /dev/null +++ b/js/starting-place/game.js @@ -0,0 +1,111 @@ +// Get the canvas and context +const canvas = document.getElementById('game'); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +canvas.style.backgroundColor = '#f0f0f0'; +const ctx = canvas.getContext('2d'); + +(function(){ + + // Define game colors + const COLORS = { + player: '#2d2d2d', + particles: '#2d2d2d', + objects: '#2d2d2d', + terrain: '#2d2d2d' + }; + + // Define game physics + const physics = { + gravity: 1, + jumpForce: 0.5 + }; + + // Define player properties + const player = { + x: 200, + y: 0, + vx: 0, + vy: 10, + vm: 32, + jumpForce: physics.gravity + physics.jumpForce, + onGround: false, + width: 20, + height: 20, + distanceTraveled: 0 + }; + + // Define terrain properties + const terrain = { + start: { x: 0, y: canvas.height - 40 }, + end: { x: canvas.width, y: canvas.height }, + height: 8 + }; + + // Define game objects + const objects = []; + + // Update game state + function update() { + // Update player + player.x += player.vx; + player.y += player.vy; + + // Check collision with terrain + if (player.y + player.height >= terrain.start.y) { + player.y = terrain.start.y - player.height; + player.vy = 0; + player.onGround = true; + } else { + player.onGround = false; + } + + // Update objects + for (let object of objects) { + object.y += physics.gravity; + } + } + + // Render game state + function draw() { + // Clear canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Draw player + ctx.fillStyle = COLORS.player; + ctx.fillRect(player.x, player.y, player.width, player.height); + + // Draw terrain + ctx.fillStyle = COLORS.terrain; + ctx.fillRect(terrain.start.x, terrain.start.y, terrain.end.x - terrain.start.x, terrain.height); + + // Draw objects + for (let object of objects) { + ctx.fillStyle = COLORS.objects; + ctx.fillRect(object.x, object.y, object.width, object.height); + } + } + + // Handle keydown event + document.addEventListener('keydown', function(event) { + if (event.code === 'Space' || event.code === 'ArrowUp') { + if (player.onGround) { + player.vy = -player.jumpForce; + player.onGround = false; + } + } + }); + + // Game loop + function gameLoop() { + update(); + draw(); + + // Request next frame + requestAnimationFrame(gameLoop); + } + + // Start game loop + gameLoop(); + +})(); \ No newline at end of file diff --git a/js/starting-place/index.html b/js/starting-place/index.html new file mode 100644 index 0000000..060666a --- /dev/null +++ b/js/starting-place/index.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>starting place</title> + <style> + body { + margin: 0; + padding: 0; + } + #game { + display: block; + } + </style> +</head> +<body> + <canvas id="game"></canvas> + <script src="game.js"></script> +</body> +</html> \ No newline at end of file |