From f8f196f590f21440c3fce6bcaa1a7b4cfe7036c8 Mon Sep 17 00:00:00 2001 From: elioat Date: Sun, 31 Dec 2023 19:29:39 -0500 Subject: * --- js/hill/game.js | 139 +++++++++++++++++++++++++++++++------------------------- 1 file changed, 77 insertions(+), 62 deletions(-) (limited to 'js') diff --git a/js/hill/game.js b/js/hill/game.js index ef7cd65..094f79f 100644 --- a/js/hill/game.js +++ b/js/hill/game.js @@ -1,6 +1,7 @@ const canvas = document.getElementById('gameCanvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; +canvas.style.backgroundColor = '#F8F6F4'; const ctx = canvas.getContext('2d'); const gravity = 1; @@ -11,6 +12,7 @@ const player = { y: 0, vx: 16, vy: 16, + vm: 32, jumpForce: gravity + jumpForce, onGround: false, width: 20, @@ -20,79 +22,93 @@ const player = { const terrain = { start: { x: 0, y: 0 }, end: { x: canvas.width, y: canvas.height }, - height: 20 + height: 5 }; const objects = []; +let lastObjectX = 0; -function initialize() { - terrain.start = { x: 0, y: 0 }; - terrain.end = { x: canvas.width, y: canvas.height }; +const getRandomInterval = (min, max) => { + return Math.floor(Math.random() * (max - min + 1) + min); +} - for (let i = 0; i < 50; i++) { - const object = { - x: i * 10 * canvas.width / 10, - width: 50, - height: Math.random() * 22 - }; +setInterval(function() { + const object = { + x: lastObjectX + 10 * canvas.width / 10, + width: 50, + height: Math.random() * 22 + }; - let terrainY = ((terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x)) * (object.x - terrain.start.x) + terrain.start.y; + let terrainY = ((terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x)) * (object.x - terrain.start.x) + terrain.start.y; - object.y = terrainY - object.height; + object.y = terrainY - object.height; - objects.push(object); - } -} + objects.push(object); -function draw() { - ctx.clearRect(0, 0, canvas.width, canvas.height); + lastObjectX = object.x; +}, getRandomInterval(1000, 3000)); - ctx.save(); +const initialize = () => { + terrain.start = { x: 0, y: 0 }; + terrain.end = { x: canvas.width, y: canvas.height }; +}; - ctx.translate(-player.x + canvas.width / 4, -player.y + canvas.height / 2); +const drawPlayer = () => { - ctx.fillStyle = '#b6daf9'; - ctx.fillRect(player.x, player.y, player.width, player.height); + /* + ctx.fillStyle = 'lightgrey'; + ctx.font = '22px Arial'; + const text = `vx: ${player.vx.toFixed(2)}, vy: ${player.vy.toFixed(2)}`; + ctx.fillText(text, player.x, player.y - 12); + */ - terrain.start.x = player.x - canvas.width; - terrain.end.x = player.x + canvas.width; + ctx.fillStyle = '#C4DFDF'; + ctx.fillRect(player.x, player.y, player.width, player.height); +}; - ctx.fillStyle = '#aaa'; +const drawObjects = () => { + ctx.fillStyle = '#D2E9E9'; objects.forEach(object => { ctx.beginPath(); ctx.arc(object.x, object.y, object.width / 2, 0, Math.PI * 2, true); ctx.fill(); }); +}; +const drawTerrain = () => { ctx.beginPath(); ctx.moveTo(terrain.start.x, terrain.start.y); ctx.lineTo(terrain.end.x, terrain.end.y); - ctx.strokeStyle = '#ddd'; + ctx.strokeStyle = '#E3F4F4'; ctx.lineWidth = terrain.height; ctx.stroke(); +}; - // ctx.font = '20px Arial'; - // ctx.fillStyle = 'black'; - // ctx.fillText('Health: ' + player.health, player.x, player.y - 22); - - ctx.fillStyle = '#a2a2f2'; - for (let i = particles.length - 1; i >= 0; i--) { - let particle = particles[i]; - - ctx.fillRect(particle.x, particle.y, 5, 5); - - particle.x += particle.vx; - particle.y += particle.vy; - - particle.lifespan--; - - if (particle.lifespan === 0) { - particles.splice(i, 1); - } - } +const drawParticles = () => { + ctx.fillStyle = '#C4DFDF'; + particles.forEach((particle, index) => { + ctx.fillRect(particle.x, particle.y, 5, 5); + particle.x += particle.vx; + particle.y += particle.vy; + particle.lifespan--; + if (particle.lifespan === 0) { + particles.splice(index, 1); + } + }); +}; +const draw = () => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.save(); + ctx.translate(-player.x + canvas.width / 4, -player.y + canvas.height / 2); + drawPlayer(); + terrain.start.x = player.x - canvas.width; + terrain.end.x = player.x + canvas.width; + drawObjects(); + drawTerrain(); + drawParticles(); ctx.restore(); -} +}; const isColliding = (obj1, obj2) => ( obj1.x < obj2.x + obj2.width && @@ -104,8 +120,10 @@ const isColliding = (obj1, obj2) => ( const checkCollision = () => { objects.forEach(object => { if (isColliding(player, object)) { - player.health -= 1; - console.log('Collision detected!'); + if (player.vx >= 1) { + player.vx -= 0.5; + player.vy -= 0.5; + } } }); }; @@ -157,25 +175,22 @@ window.addEventListener('resize', () => { draw(); }); -canvas.addEventListener('click', () => { +const playerDoJump = () => { const terrainY = (terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x) * (player.x - terrain.start.x) + terrain.start.y; if (player.y + player.height >= terrainY) { player.vy = player.jumpForce * -1; + if (player.vx < player.vm) { + player.vx += 0.5; + } } -}); +}; -canvas.addEventListener('touchstart', () => { - const terrainY = (terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x) * (player.x - terrain.start.x) + terrain.start.y; - if (player.y + player.height >= terrainY) { - player.vy = player.jumpForce * -1; +const handleKeyDown = event => { + if (event.key === 'Enter' || event.key === ' ') { + playerDoJump(); } -}); +}; -window.addEventListener('keydown', event => { - if (event.key === 'Enter') { - const terrainY = (terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x) * (player.x - terrain.start.x) + terrain.start.y; - if (player.y + player.height >= terrainY) { - player.vy = player.jumpForce * -1; - } - } -}); \ No newline at end of file +canvas.addEventListener('click', playerDoJump); +canvas.addEventListener('touchstart', playerDoJump); +window.addEventListener('keydown', handleKeyDown); -- cgit 1.4.1-2-gfad0