diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/hill/game.js | 143 | ||||
-rw-r--r-- | js/hill/index.html | 20 |
2 files changed, 163 insertions, 0 deletions
diff --git a/js/hill/game.js b/js/hill/game.js new file mode 100644 index 0000000..b6a43e0 --- /dev/null +++ b/js/hill/game.js @@ -0,0 +1,143 @@ +const canvas = document.getElementById('gameCanvas'); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +const ctx = canvas.getContext('2d'); + +const gravity = 1; +const jumpForce = 14.75; + +const player = { + x: 200, + y: 0, + vx: 2, + vy: 2, + jumpForce: gravity + jumpForce, + onGround: false, + width: 20, + height: 20, + health: 10 +}; + +const terrain = { + start: { x: 0, y: 0 }, + end: { x: canvas.width, y: canvas.height }, + height: 20 +}; + +const objects = []; + +function initialize() { + terrain.start = { x: 0, y: canvas.height - 22 }; + terrain.end = { x: canvas.width, y: canvas.height - 22 }; + + for (let i = 0; i < 50; i++) { + const object = { + x: i * 10 * canvas.width / 10, + y: terrain.start.y - Math.random() * 22, + width: 20, + height: Math.random() * 22 + }; + objects.push(object); + } +} + +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + ctx.save(); + + ctx.translate(-player.x + canvas.width / 4, -player.y + canvas.height / 2); + + ctx.fillStyle = 'blue'; + ctx.fillRect(player.x, player.y, player.width, player.height); + + terrain.start.x = player.x - canvas.width; + terrain.end.x = player.x + canvas.width; + + ctx.fillStyle = 'brown'; + objects.forEach(object => { + ctx.beginPath(); + ctx.arc(object.x, object.y, object.width / 2, 0, Math.PI * 2, true); + ctx.fill(); + }); + + ctx.beginPath(); + ctx.moveTo(terrain.start.x, terrain.start.y); + ctx.lineTo(terrain.end.x, terrain.end.y); + ctx.strokeStyle = 'green'; + ctx.lineWidth = terrain.height; + ctx.stroke(); + + ctx.font = '20px Arial'; + ctx.fillStyle = 'black'; + ctx.fillText('Health: ' + player.health, player.x, player.y - 22); + + ctx.restore(); +} + +const isColliding = (obj1, obj2) => ( + obj1.x < obj2.x + obj2.width && + obj1.x + obj1.width > obj2.x && + obj1.y < obj2.y + obj2.height && + obj1.y + obj1.height > obj2.y +); + +const checkCollision = () => { + objects.forEach(object => { + if (isColliding(player, object)) { + player.health -= 1; + console.log('Collision detected!'); + } + }); +}; + +const gameLoop = () => { + player.vy += gravity; + + player.x += player.vx; + player.y += player.vy; + + 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.y = terrainY - player.height; + player.vy = 0; + } + + checkCollision(); + + initialize(); + draw(); + requestAnimationFrame(gameLoop); +}; + +gameLoop(); + +window.addEventListener('resize', () => { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + draw(); +}); + +canvas.addEventListener('click', () => { + 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; + } +}); + +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; + } +}); + +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 diff --git a/js/hill/index.html b/js/hill/index.html new file mode 100644 index 0000000..d9bcd91 --- /dev/null +++ b/js/hill/index.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>hill</title> + <style> + body { + margin: 0; + padding: 0; + } + #gameCanvas { + display: block; + } + </style> +</head> +<body> + <canvas id="gameCanvas"></canvas> + <script src="game.js"></script> +</body> +</html> |