From 57467640944f2714b80237e67b143e95be6a34d1 Mon Sep 17 00:00:00 2001 From: elioat Date: Sat, 6 Jan 2024 19:56:01 -0500 Subject: * --- js/starting-place/game.js | 111 +++++++++++++++++++++++++++++++++++++++++++ js/starting-place/index.html | 21 ++++++++ 2 files changed, 132 insertions(+) create mode 100644 js/starting-place/game.js create mode 100644 js/starting-place/index.html (limited to 'js') 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 @@ + + + + + + starting place + + + + + + + \ No newline at end of file -- cgit 1.4.1-2-gfad0 ' href='#n19'>19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37