const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; const player = { x: 50, y: 0, velX: 0, velY: 0, jumping: false, width: 20, height: 20 }; const GRAVITY = 0.5; const JUMP_FORCE = 10; const MAP_WIDTH = 10000; const MAP_HEIGHT = 500; let map = generateMap(MAP_WIDTH, MAP_HEIGHT); function generateMap(width, height) { let map = []; for (let x = 0; x < width; x++) { map[x] = []; for (let y = 0; y < height; y++) { map[x][y] = Math.random() < 0.4 ? 1 : 0; } } return map; } function drawMap(map) { ctx.fillStyle = '#000'; for (let x = 0; x < map.length; x++) { for (let y = 0; y < map[x].length; y++) { if (map[x][y] === 1) { ctx.fillRect(x, y, 1, 1); } } } } function update() { player.velY += GRAVITY; player.x += player.velX; player.y += player.velY; if (player.y + player.height > height) { player.y = height - player.height; player.velY = 0; player.jumping = false; } for (let x = 0; x < map.length; x++) { for (let y = 0; y < map[x].length; y++) { if (map[x][y] === 1) { if (player.x < x + 1 && player.x + player.width > x && player.y < y + 1 && player.y + player.height > y) { player.velY = 0; player.jumping = false; if (player.y + player.height > y && player.y < y) { player.y = y - player.height; } else if (player.x + player.width > x && player.x < x) { player.x = x - player.width; } else if (player.x < x + 1 && player.x + player.width > x + 1) { player.x = x + 1; } } } } } if (player.x < 0) { player.x = 0; } else if (player.x + player.width > MAP_WIDTH) { player.x = MAP_WIDTH - player.width; } if (player.y < 0) { player.y = 0; player.velY = 0; } if (player.jumping) { player.velY = -JUMP_FORCE; player.jumping = false; } } function render() { ctx.clearRect(0, 0, width, height); drawMap(map); ctx.fillStyle = '#f00'; ctx.fillRect(player.x, player.y, player.width, player.height); } function loop() { update(); render(); requestAnimationFrame(loop); } document.addEventListener('keydown', function(event) { if (event.keyCode === 37) { player.velX = -5; } else if (event.keyCode === 39) { player.velX = 5; } else if (event.keyCode === 38) { player.jumping = true; } }); document.addEventListener('keyup', function(event) { if (event.keyCode === 37 || event.keyCode === 39) { player.velX = 0; } }); loop();

GPTgame

Sign up for free tokens!

A platformer that has procedurally generated maps and the maps go on forever and has proper gravity

GPTgame