// === Joystick ========== function JoystickController(game, radius, threshold) { this.game = game; this.radius = radius; this.anchor = null; this.touchId = null; this.active = false; this.value = { x: 0, y: 0 }; this.sprite = { img: document.getElementById("joystick"), nob: { x: 0, y: 0, width: 79, height: 85 }, bounds: { x: 79, y: 0, width: 255, height: 258 } }; const handleDown = (evt) => { this.active = true; evt.preventDefault(); if (evt.changedTouches) { this.touchId = evt.changedTouches[0].identifier; this.anchor = { x: evt.changedTouches[0].clientX, y: evt.changedTouches[0].clientY }; } else this.anchor = { x: evt.clientX, y: evt.clientY }; }; const handleMove = (evt) => { if (!this.active) return; if (evt.changedTouches) { let found = false; for (const touch of evt.changedTouches) { if (touch.identifier == this.touchId) { found = true; evt.clientX = touch.clientX; evt.clientY = touch.clientY; break; } } if (!found) return; } let diff = { x: evt.clientX - this.anchor.x, y: evt.clientY - this.anchor.y }; const angle = Math.atan2(diff.y, diff.x); let distance = Math.min(radius, Math.hypot(diff.x, diff.y)); distance = (distance < threshold) ? 0 : distance; diff.x = distance * Math.cos(angle); diff.y = distance * Math.sin(angle); this.value = { x: diff.x / radius, y: diff.y / radius }; }; const handleUp = (evt) => { if (!this.active) return; if (evt.changedTouches && this.touchId != evt.changedTouches[0].identifier) return; this.value = { x: 0, y: 0 }; this.touchId = null; this.active = false; }; game.canvas.addEventListener("mousedown", handleDown); game.canvas.addEventListener("touchstart", handleDown); document.addEventListener("mousemove", handleMove, { passive: false }); document.addEventListener("touchmove", handleMove, { passive: false }); document.addEventListener("mouseup", handleUp); document.addEventListener("touchend", handleUp); } JoystickController.prototype.render = function() { if (this.active) { const boundarySize = 2 * this.radius + 30; const boundaryOffset = boundarySize / 2; this.game.ctx.drawImage( this.sprite.img, this.sprite.bounds.x, this.sprite.bounds.y, this.sprite.bounds.width, this.sprite.bounds.height, this.anchor.x - boundaryOffset, this.anchor.y - boundaryOffset, boundarySize, boundarySize ); const nobPos = { x: this.anchor.x + this.value.x * this.radius, y: this.anchor.y + this.value.y * this.radius }; const nobWidth = 0.3 * boundarySize; const nobHeight = nobWidth * (this.sprite.nob.height / this.sprite.nob.width); const nobOffset = nobWidth / 2; this.game.ctx.drawImage( this.sprite.img, this.sprite.nob.x, this.sprite.nob.y, this.sprite.nob.width, this.sprite.nob.height, nobPos.x - nobOffset, nobPos.y - nobOffset, nobWidth, nobHeight ); } }; // ======================= // === Player ============ function Player(game) { this.game = game; this.speed = 320; this.pos = { x: 0, y: 0 }; this.sprite = { img: document.getElementById("player"), width: 86, height: 216, offset: 14, speed: 0.17, currentFrame: 0, totalFrame: 3, timeAcc: 0 }; this.width = 0.2 * this.game.canvas.width; this.height = this.width * this.sprite.height / this.sprite.width; } Player.prototype.update = function(dt) { this.pos.x += this.game.controller.value.x * this.speed * dt; this.pos.y += this.game.controller.value.y * this.speed * dt; if (this.pos.x < 0) this.pos.x = 0; else if (this.pos.x > (this.game.canvas.width - this.width)) this.pos.x = this.game.canvas.width - this.width; if (this.pos.y < 0) this.pos.y = 0; else if (this.pos.y > (this.game.canvas.height - this.height)) this.pos.y = this.game.canvas.height - this.height; this.sprite.timeAcc += dt; if (this.sprite.timeAcc >= this.sprite.speed) { this.sprite.timeAcc = 0; this.sprite.currentFrame = (this.sprite.currentFrame+1) % this.sprite.totalFrame; } }; Player.prototype.render = function() { this.game.ctx.drawImage( this.sprite.img, this.sprite.currentFrame * (this.sprite.width + this.sprite.offset), 0, this.sprite.width, this.sprite.height, this.pos.x, this.pos.y, this.width, this.height ); }; Player.prototype.collidesWith = function(other) { return this.pos.x <= other.pos.x + other.width && this.pos.x + this.width >= other.pos.x && this.pos.y <= other.pos.y + other.height && this.pos.y + this.height >= other.pos.y; }; // ======================= // === Gift ============== function Gift(game, x, y, width, height) { this.game = game; this.speed = Math.floor(Math.random() * 160) + 260; this.pos = { x: x, y: y }; this.width = width || 30; this.height = height || 30; this.sprite = (Math.random() > 0.5) ? { img: document.getElementById("gift1"), x: 16, y: 2, width: 140, height: 157 } : { img: document.getElementById("gift2"), x: 103, y: 28, width: 776, height: 885 }; Object.defineProperties( this, { outOfScreen: { get: function() { return this.pos.y >= this.game.canvas.height; } } } ); } Gift.prototype.update = function(dt) { this.pos.y += this.speed * dt; }; Gift.prototype.render = function() { this.game.ctx.drawImage( this.sprite.img, this.sprite.x, this.sprite.y, this.sprite.width, this.sprite.height, this.pos.x, this.pos.y, this.width, this.height ); }; // ======================= // === Obstacle ========== function Obstacle(game, x, y, width, height) { this.game = game; this.speedX = Math.floor(Math.random() * 50); this.speedY = Math.floor(Math.random() * 160) + 260; this.scoreEffect = -5 this.pos = { x: x, y: y }; this.width = width || 30; this.height = height || 30; this.sprite = (Math.random() > 0.5) ? { img: document.getElementById("obs1"), x: 0, y: 0, width: 1668, height: 1866 } : { img: document.getElementById("obs2"), x: 0, y: 0, width: 800, height: 1000 } Object.defineProperties( this, { outOfScreen: { get: function() { return this.pos.y >= this.game.canvas.height; } } } ); } Obstacle.prototype.update = function(dt) { this.pos.x += this.speedX * dt; this.pos.y += this.speedY * dt; }; Obstacle.prototype.render = function() { this.game.ctx.drawImage( this.sprite.img, this.sprite.x, this.sprite.y, this.sprite.width, this.sprite.height, this.pos.x, this.pos.y, this.width, this.height ); }; // ======================= // === Particle ========== function Particle(game, x, y, xv, yv, radius, color, timer){ this.game = game; this.x = x; this.y = y; this.xv = xv; this.yv = yv; this.color = color; this.timer = timer; this.radius = radius; this.decayRate = this.radius/this.timer; } Particle.prototype.update = function(dt){ this.x += this.xv * dt; this.y += this.yv * dt; this.radius -= this.decayRate; } Particle.prototype.render = function(){ this.game.ctx.fillStyle = this.color; this.game.ctx.beginPath(); this.game.ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); this.game.ctx.closePath(); this.game.ctx.fill(); } // ======================= // === Game ============== function Game() { this.canvas = document.getElementById("game-canvas"); this.ctx = this.canvas.getContext("2d"); this.running = false; this.paused = false; this.prevFrame = 0; this.player = new Player(this); this.controller = new JoystickController(this, this.canvas.width/8, 3); this.gifts = new Array(); this.obstacles = new Array(); this.particles = new Array(); this.nextGift = 0; this.giftTimeAcc = 0; this.totalTime = 60; this.progress = this.totalTime; this.score = 0; window.onresize = () => { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; }; window.onresize(); } Game.prototype.run = function() { if (!this.running) { this.restart(); this.running = true; const loop = () => { if (!this.paused) { const now = performance.now() / 1000; const dt = now - this.prevFrame; this.prevFrame = now; this.update(dt); this.render(); } if (this.running) requestAnimationFrame(loop); }; loop(); } }; Game.prototype.resume = function() { this.paused = false; this.prevFrame = performance.now() / 1000; }; Game.prototype.pause = function() { this.paused = true; }; Game.prototype.stop = function() { this.running = false; }; Game.prototype.restart = function() { this.score = 0; this.prevFrame = performance.now() / 1000; this.player.pos = { x: this.canvas.width / 2 - this.player.sprite.width / 2, y: this.canvas.height - this.player.sprite.height }; this.gifts = new Array(); this.obstacles = new Array(); this.particles = new Array(); this.nextGift = 0; this.giftTimeAcc = 0; this.progress = this.totalTime; this.paused = false; }; Game.prototype.createParticles = function( x, y, radius, width =[1,1], height = [1,1], xv=[1,1], yv=[1.1], timer = [30, 70], color='white', amount=1) { for(let i = 0; i < amount; ++i){ let x_ = rand(x - width/2, x + width/2) let y_ = rand(y - height/2, y + height/2) let xv_ = rand(xv[0], xv[1]) let yv_ = rand(yv[0], yv[1]) let timer_ = rand(timer[0], timer[1]) let color_ = color; let radius_ = rand(radius[0], radius[1]); let particle = new Particle(this, x_, y_, xv_, yv_, radius_, color_ , timer_) this.particles.push(particle) } }; Game.prototype.update = function(dt) { this.progress -= dt; if (this.progress < 0) { this.progress = 0; this.pause(); document.getElementById("score").innerHTML = this.score ; changeSection("game-over"); } this.giftTimeAcc += dt; if (this.giftTimeAcc >= this.nextGift) { this.giftTimeAcc = 0; this.nextGift = Math.random() * 0.23 + 0.29; if (Math.random() < 0.8) this.gifts.push( new Gift(this, Math.floor(Math.random() * (this.canvas.width - 30)), -30) ); else this.obstacles.push( new Obstacle(this, Math.floor(Math.random() * (this.canvas.width - 30)), -30) ); } this.player.update(dt); for (const gift of this.gifts) { gift.update(dt); if (this.player.collidesWith(gift)) { ++this.score; this.createParticles( this.canvas.width / 2, 50, [5, 10], 30, 30, [-300, 300], [-300, 300], [10, 40], "#22ff11", 10 ); gift.pos.y = this.canvas.height; } } for (const obstacle of this.obstacles) { obstacle.update(dt); if (this.player.collidesWith(obstacle)) { this.score += obstacle.scoreEffect; this.score = this.score < 0 ? 0 : this.score ; this.createParticles( this.canvas.width / 2, 50, [5, 10], 30, 30, [-20, 20], [-50, 10], [20, 40], "white", 20 ); this.createParticles( obstacle.pos.x, obstacle.pos.y, [3, 7], 30, 30, [-20, 20], [-50, 10], [50, 80], "red", 15 ); this.createParticles( obstacle.pos.x, obstacle.pos.y, [5, 10], 30, 30, [-20, 20], [-50, 10], [50, 80], "black", 10 ); obstacle.pos.y = this.canvas.height; } } for (const particle of this.particles) { particle.update(dt); } this.gifts = this.gifts.filter((gift) => !gift.outOfScreen); this.obstacless = this.obstacles.filter((obs) => !obs.outOfScreen); this.particles = this.particles.filter((particle) => !(particle.radius <= 0)); }; Game.prototype.render = function() { this.ctx.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight); for (const gift of this.gifts) gift.render(); for (const obstacle of this.obstacles) obstacle.render(); this.player.render(); for (const particle of this.particles) particle.render(); this.controller.render(); this.ctx.fillStyle = "#FFF"; this.ctx.font = "48px Cairo"; this.ctx.textAlign = "center"; this.ctx.textBaseline = "middle"; this.ctx.fillText( this.score.toString(), this.canvas.width / 2, 48 ); const progress = this.progress / this.totalTime; const red = Math.floor(200 * (1 - progress) + 12); const green = Math.floor(157 * progress + 55); this.ctx.fillStyle = `rgb(${red}, ${green}, 0)`; this.ctx.fillRect( 0, 0, this.canvas.width * progress, 3 ); }; // ======================= function rand(min, max) { return min + Math.random() * (max - min) } function changeSection(id) { let sections = document.getElementsByTagName("section"); for (let section of sections) { if (section.id == id) section.classList.remove("hide"); else section.classList.add("hide"); } } function init() { document.addEventListener( "contextmenu", (evt) => evt.preventDefault() ); const bgm = document.getElementById("bgm"); bgm.volume = document.getElementById("bgm-volume").value; document.onclick = () => { if (document.getElementById("bgm-mute").checked) document.getElementById("bgm").play(); document.onclick = null; }; document.getElementById("bgm-volume").addEventListener( "change", (evt) => { bgm.volume = evt.target.value; } ); document.getElementById("bgm-mute").addEventListener( "change", (evt) => { if (evt.target.checked) bgm.play(); else bgm.pause(); } ); let game = new Game(); document.getElementById("play-button").addEventListener( "click", () => { changeSection("game"); game.run(); } ); document.getElementById("settings-button").addEventListener( "click", () => { changeSection("settings"); } ); document.getElementById("guide-button").addEventListener( "click", () => { changeSection("guide"); } ); document.getElementById("about-button").addEventListener( "click", () => { changeSection("about"); } ); document.getElementById("pause-button").addEventListener( "click", () => { game.pause(); changeSection("game-pause"); } ); document.getElementById("resume-button").addEventListener( "click", () => { changeSection("game"); game.resume(); } ); document.getElementById("retry-button").addEventListener( "click", () => { changeSection("game"); game.restart(); } ); document.getElementById("quit-button").addEventListener( "click", () => { game.stop(); changeSection("main-menu"); } ); document.getElementById("go-retry-button").addEventListener( "click", () => { changeSection("game"); game.restart(); } ); document.getElementById("go-quit-button").addEventListener( "click", () => { game.stop(); changeSection("main-menu"); } ); for (const e of document.getElementsByClassName("back-button")) e.addEventListener( "click", () => { changeSection("main-menu"); } ); setTimeout( () => { let loader = document.getElementById("loader"); loader.style.display = "none"; gsap.timeline() .from("#main-menu>div", {opacity: 0, y: 200, duration: 0.6}) .from("#main-title", {y: -200, rotate: 90, opacity: 0}) .from("#play-button", {rotate: 90, opacity: 0}) .from("#guide-button", {rotate: -90, opacity: 0}) .from("#settings-button", {rotate: 90, opacity: 0}) .from("#about-button", {rotate: -90, opacity: 0}); changeSection("main-menu"); }, 4000 - performance.now() ); }

❄️ Elf Jetpack Game 🚀 ✨ [Curious Coders]