/** * * @Author Luis Calderón * 2019 copyRight, Luis Calderon. * */ const config = { gravity: 9.8, world: { width: 9000, height: innerHeight }, lvl: { width: 900, height: 1000 } }, $ = element => document.querySelector(element), sleep = millis => new Promise(resolve => setTimeout(resolve, millis)), random = (max, min, fix = 0) => Number((Math.random() * (max - min) + min).toFixed(fix)), colors = ["#3dff3d", "#2afffd", "#673ab7", "#2196f3", "#ffeb3b", "#ff5722", "#9e9e9e", "#009688"]; let //game effect nieve = [], effects = [], trees = [], activeEffect = false, bg3d = {}, nieveSpawn = null, timer_120 = null, timer_4x_frame= null, animation = null, //game game = null, player = null, boxes_npc = [], stars = [], MAP = [], dt = 0, gameOverSheet = null, attempts = 0, bestScore = 0, santa = null, bg_context = null, space = null, bg = null, bg_scene = null, //screen screen = null, context = null, compositor = null, camera = null, //media graphics = null, audio = null; //colide functions function intersection(subject, obstacles, func) { obstacles.filter(obstacle => overlap(subject, obstacle)).forEach(func); } function aabb(subject, x, y, arr = game.map) { //evalua cada obstaculo con el objetivo y devuelve el lado con el que colisiono subject.x += x; if (x > 0) { this.intersection(subject, arr, rect => { if (rect.type == "box") return; if (subject.right > rect.left) { subject.right = rect.left subject.velocity.x /= -10; for (let i in player.boxes) { const box = player.boxes[i]; if (box == subject) { if (player.boxes.length != 1) { player.boxes.splice(i, 1) boxes_npc.push(subject); if (activeEffect) effects.push(new CollisionEffect("right", subject.right - 16, subject.top)); game.giveScore(random(1, 5), subject.right, subject.y) audio.play("hit", 0) break; } else { gameOver() player.velocity.x = 0; } } } } }); } subject.y += y; if (y > 0) { intersection(subject, arr, rect => { if (subject.bottom > rect.top) { if (subject.velocity.y > 5) { audio.play("snow_hit", 1) if (activeEffect) effects.push(new CollisionEffect("bottom", subject.right + random(-22, -30), subject.bottom + random(-8, -18), 16, 16)); } if (subject == player.boxes[0]) { if (activeEffect) effects.push(new CollisionEffect("bottom", subject.right + random(-22, -30), subject.bottom + random(-8, -18), 16, 16)); } rectY = rect; subject.bottom = rect.top if (subject.velocity.y <= 0) { subject.velocity.y = 0; } else { subject.velocity.y /= -2; } } }); } } function overlap(a, b) { return a.bottom > b.top && a.top < b.bottom && a.right > b.left && a.left < b.right; } //game funtions function createLayer(width, height) { const buffer = document.createElement("canvas"); buffer.width = width; buffer.height = height; return { render: buffer, context: buffer.getContext("2d") }; } function spawnBox() { if (player.boxes.length >= player.max_boxes) return game.taps++; player.boxes.push(new Box(player.boxes[player.boxes.length - 1].x, player.boxes[player.boxes.length - 1].y - 62)) } async function createGameOverSheeet() { gameOverSheet = document.createElement("div"); gameOverSheet.classList.add("gmos"); const starsCV = document.createElement("canvas") starsCV.width = 68; starsCV.height = 27; const starsCVCtx = starsCV.getContext("2d"); for (let i = 0; i < 3; i++) { starsCVCtx.drawImage(graphics[`star${i < game.stars ? "" : "_void"}`].img, i * 22, 0, 22, 23) } if (bestScore < game.score) bestScore = game.score; let valoration = "" switch (game.stars) { case 0: valoration = "Bad"; break; case 1: valoration = "Good"; break; case 2: valoration = "perfect"; break; case 3: valoration = "Just Amazing"; } gameOverSheet.innerHTML = `

Game Over

That was ${valoration}

Score : ${game.score}

Taps : ${game.taps}

attempt : ${attempts}

HI : ${bestScore}

Try Again

Merry Christmas and Happy New Year.

` $("body").appendChild(gameOverSheet); $("#cv_stars").appendChild(starsCV) await sleep(500); gameOverSheet.classList.add("active"); for (let box of player.boxes) box.velocity.x = 0; for (let box of boxes_npc) box.velocity.x = 0; } function gameOver() { createGameOverSheeet(); screen.removeEventListener("click", spawnBox) } function createBlock(name, x, y, w, h, coll = true) { bg_context.drawImage(graphics[name].img, x, y); if (coll) MAP.push(new Block("ice", x, y, w, h)) } function createCanvas(element) { const canvas = document.createElement("canvas"); with (canvas.style) { position = "absolute"; top = 0; left = 0; } canvas.width = innerWidth; canvas.height = innerHeight; element.appendChild(canvas); return canvas; } function updateInfo() { context.fillText(" score", innerWidth - 70, 20); context.save() context.textAlign = "center" context.fillText(game.score, innerWidth - 30, 40); context.drawImage(graphics.box_7.img, innerWidth - 65, 75, 16, 16) context.fillText(`${player.boxes.length}/${player.max_boxes}`, innerWidth - 30, 90); context.restore() } async function santaAnimate() { await sleep(5000) santa = new Santa(7800, innerHeight - 85); } async function update(dt) { Promise.all([ camera.follow(player.boxes[player.boxes.length - 1]), compositor.draw(), nieveSpawn.update(dt), timer_120.update(dt), updateInfo(), context.fillText(Math.round(1000 / (dt * 100)) + "fps", 0, 25), function () { for (let effect of effects) effect.update() }(), function () { for (let i = 0; i < 3; i++) { if (i < game.stars) { context.drawImage(graphics.star.img, i * 24, 60, 24, 23) } else { context.drawImage(graphics.star_void.img, i * 24, 60, 24, 23) } } }(), function () { for (let i in player.boxes) { const box = player.boxes[i]; box.update(dt); } }(), function () { for (let i in boxes_npc) { const box = boxes_npc[i]; box.update(dt); if (box.x < camera.x) { boxes_npc.splice(i, 1) } } }(), , function () { if (santa) santa.update(); }(), function () { for (let i in nieve) { const copo = nieve[i]; copo.update(dt); if (copo.x < 0 || copo.y > innerHeight) { nieve.splice(i, 1) } } }(), function () { for (let i in game.map) { const block = game.map[i]; if (block.x < camera.x) { game.map.splice(i, 1) } } }(), function () { for (let i in stars) { const star = stars[i]; star.update(); for (let box of player.boxes) { if (overlap(star, box)) { stars.splice(i, 1); audio.play("star", 0); game.giveScore(100, star.x, star.y) game.stars++; return; } } } }(), function () { if (player.boxes.length == 0) { gameOver(); } else if (player.boxes[0].x >= 7500 && !game.end) { for (let box of player.boxes) box.velocity.x = 0; game.end = true; if (game.stars == 3) { santaAnimate(); audio.transition("bg1", "bg2", 1) screen.removeEventListener("click", spawnBox); } else { gameOver(); } } }() ]) } function rules() { rule = document.createElement("div") with (rule.style) { color = "#000" position = "absolute" width = "100%"; height = "100%"; fontFamily = "sans-serif" } rule.innerHTML = `

How to play

Tap the screen to create a new gif
you can only create five gifts at the same time
jump the ice obstacles to get score
grab the 3 stars, they are on the trees
you lose a gift when you bump into an obstacle,if you only have one gift you lose the game
get hi score
if you finish the game with 3 stars santa claus appears

START

` ; $("body").appendChild(rule); } //classes class Vector { constructor(x = 0, y = 0) { this.x = x; this.y = y; } } class Subject { constructor(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; } get top() { return this.y } get left() { return this.x } get right() { return this.x + this.width } get bottom() { return this.y + this.height } set top(value) { this.y = value } set left(value) { this.x = value } set right(value) { this.x = value - this.width } set bottom(value) { this.y = value - this.height } } class Player extends Subject { constructor(x, y) { super(x, y, 32, 32); this.velocity = new Vector(20, 5); this.max_boxes = 5; this.boxes = []; this.distance = 0; } } class Box extends Subject { constructor(x, y) { super(x, y, player.width, player.height); this.velocity = new Vector(20, 5); this.color = colors[random(0, 7)]; this.type = "box"; this.image = graphics[`box_${random(1, 8)}`].img; } update(dt) { this.velocity.y += dt * config.gravity; if (this.velocity.y > 100) this.velocity.y = 100; const x = this.velocity.x * dt; const y = this.velocity.y * dt; let boxes = [], boxes2 = []; for (let i in player.boxes) { if (player.boxes[i] != this) { boxes.push(player.boxes[i]) } } for (let i in boxes_npc) { if (boxes_npc[i] != this) { boxes2.push(boxes_npc[i]) } } aabb(this, x, y, [...boxes, ...game.map, ...boxes2]); space.context.drawImage(this.image, this.x, this.y, this.width, this.height) } } class SpriteSheet { constructor(img) { this.img = img; this.sprites = new Map() this.width = this.img.width; this.height = this.img.height; this.frame = [] this.length = 0; this.names = [] } define(name, x, y, width, height) { const buffer = document.createElement("canvas"); buffer.width = width == undefined ? this.width : width; buffer.height = height == undefined ? this.height : height; const context = buffer.getContext("2d"); context.drawImage(this.img, x * buffer.width, y * buffer.height, this.width, this.height, 0, 0, this.width, this.height ); this.sprites.set(name, buffer) this.frame.push(buffer); this.names.push(name); } toSprite(json) { let values = [] for (let i = 0; i < json.length; i++) { values = []; for (let j = 0; j < json[i].length; j++) { values.push(json[i][j]) } this.define(...values) this.length++; } return { frame: this.frame }; } } class ImageLoader { constructor(json) { this.json = json; this.urls = []; this.names = []; this.length = 0; for (let i in json) { this.urls.push(json[i]); this.names.push(i); this.length++; } this.buffer = new Map(); this.loaded = 0; } async loadImage(url) { return new Promise(resolve => { const img = new Image(); img.onload = () => { resolve(img); } img.src = "https://coffejs.000webhostapp.com/"+url; }) } async syncLoad() { const loads = []; for (let i = 0; i < this.length; i++) { const url = this.urls[i]; loads.push(this.loadImage(url)) } const loaded = await Promise.all(loads); for (let i in loaded) { const sprite = new SpriteSheet(loaded[i]); this.__proto__[this.names[i]] = sprite; } } } class Block extends Subject { constructor(name, x, y, w, h) { super(x, y, w, h); this.name = name; this.type; } } class RenderLoop { constructor(update) { this.update = update; this.lastTime; this.request; this.min = 20; this.loop = ms => { dt = (ms - this.lastTime) / 100 if (this.lastTime && 1000 / (dt * 100) > this.min) this.update(dt); this.lastTime = ms; this.request = requestAnimationFrame(this.loop); } this.running = false; } stop() { this.running = false; cancelAnimationFrame(this.request) } start() { if (this.running == false) { this.request = requestAnimationFrame(this.loop); this.running = true; } } } class Game { constructor(player, update) { this.player = player; this.map = []; Object.assign(this.map, MAP) this.score = 0; this.level = 1; this.end = false; this.stars = 0; this.taps = 0; this.animation = new RenderLoop(update); } giveScore(value, x, y) { this.score += value; effects.push(new ScoreEffect(value, x, y)); } static create() { if (gameOverSheet) $("body").removeChild(gameOverSheet); camera.x = 0; stars = []; trees = []; santa = null; trees.push(new Tree(1010, config.world.height - 185)) stars.push(new Star(1032, innerHeight - 200)) trees.push(new Tree(3250, config.world.height - 185)) stars.push(new Star(3270, innerHeight - 200)) trees.push(new Tree(5450, config.world.height - 145)) stars.push(new Star(5900, innerHeight - 154)) player = new Player(0, config.world.height - 150) player.boxes.push(new Box(0, config.world.height - 150)) if (game) game.animation.stop() game = new Game(player, update) boxes_npc = []; screen.addEventListener("click", spawnBox) game.animation.start(); attempts++; } } class Compositor { constructor(width, height) { this.width = width; this.height = height; this.layers = new Set; this.renders = new Set; } addLayer(layer) { this.layers.add(layer); this.renders.add(layer.render); layer = null; } draw() { this.renders.forEach(render => { context.drawImage(render, -camera.x, -camera.y) }); space.context.clearRect(camera.x, camera.y, camera.width, camera.height); } } class Camera { constructor(x = 0, y = 0, screenX, screenY, width = window.innerWidth, height = window.innerHeight) { this.size = new Vector(width, height) this.position = new Vector(x, y); this.screenX = screenX; this.screenY = screenY; } follow(target) { for (let img in bg3d) { const bg = bg3d[img]; if (bg == null) continue; let w = -this.x * bg.x[0] + bg.x[1], h = -this.y * bg.y[0] + bg.y[1] if (w > this.x + innerWidth - 100) { continue; } if (h < graphics[bg.name].img.height + -this.y * bg.y[0]) { h = 0 } context.drawImage(graphics[bg.name].img, w, h, bg.size[0], bg.size[1]) } //player if (target.x > this.width / 2) { if (target.x > 0) { this.x = -(-target.x + this.width / 2); } } else { if (target.x < 0) target.x = 0; } if (target.y > this.height / 2) { if (target.y > 0) { this.y = -(-target.y + this.height / 2); } } if (this.y + innerHeight > config.world.height) { this.y = config.world.height - innerHeight } } //se invierte los valores de x,y de la camara get x() { return this.position.x; } get y() { return this.position.y; } get width() { return this.size.x } get height() { return this.size.y } set x(x) { this.position.x = x; } set y(y) { this.position.y = y; } } class CopoNieve extends Subject { constructor() { const size = random(3, 15, 5); super(random(0, innerWidth + innerWidth / 2), random(-15, 0), size, size) this.vel = new Vector(random(-15, -3, 2), random(10, 20, 2)); this.image = graphics.copoNieve.img; } update(dt) { this.x += this.vel.x * dt; this.y += this.vel.y * dt; context.drawImage(this.image, this.x, this.y, this.width, this.height); } } class Timer { constructor(timeout, handleEvent) { this.handleEvent = handleEvent; this.timeout = timeout; this.counter = 0; this.waiting = false; } update(dt) { this.counter += dt * 100; if (!this.waiting) { if (this.counter >= this.timeout) { this.counter = 0; this.handleEvent(); } } } } class CollisionEffect { constructor(side, x, y, w = 32, h = 32) { this.x = x; this.y = y; this.w = w; this.h = h; this.sprites = graphics["effect_" + side].frame; this.max_frames = this.sprites.length; this.frame = 0; } update() { space.context.drawImage(this.sprites[this.frame], this.x, this.y, this.w, this.h) } } class ScoreEffect { constructor(value, x, y) { this.x = x; this.y = y; this.value = value; this.max_frames = 10; this.frame = 0; } update() { space.context.fillText("+" + this.value, this.x, this.y - this.frame * 3); } } class AudioLoader { constructor(json) { this.json = json; this.urls = []; this.names = []; this.length = 0; for (let i in json) { this.urls.push(json[i]); this.names.push(i); this.length++; } this.buffer = new Map(); this.loaded = 0; } play(name, startTime) { try { const song = this[name]; if (startTime != undefined) song.currentTime = startTime; song.play(); } catch (e) { console.log(`"${name}" doesn't exist`); } } async transition(song1, song2, max2, duration = 50) { const a1 = audio[song1], a2 = audio[song2], volume = 0.01; a2.volume = 0; a2.play(); while (a1.volume >= 0.01) { a1.volume -= a1.volume - volume > 0 ? volume : 0 a2.volume + volume < 1 ? a2.volume += volume : a1.volume = 0; a2.volume >= max2 ? a2.volume = max2 : 0; await sleep(duration); } a2.volume = max2; a1.pause() } async loadAudio(url) { return new Promise(resolve => { const audio = new Audio(); audio.oncanplay = () => { resolve(audio) } audio.src = "https://coffejs.000webhostapp.com/"+url; }) } async load() { for (let i = 0; i < this.length; i++) { const url = this.urls[i]; const name = this.names[i]; const audio = await this.loadAudio(url); this.buffer.set(name, audio); this.loaded = i + 1; this.__proto__[name] = audio; } } } class Tree { constructor(x, y) { this.x = x; this.y = y; this.sprite = graphics.bg_tree2.frame; this.max_frames = this.sprite.length; this.frame = 0; } update() { bg_context.drawImage(this.sprite[this.frame], this.x, this.y); } } class Star extends Subject { constructor(x, y) { super(x, y, 44, 43) this.img = graphics.star.img; } update() { space.context.drawImage(this.img, this.x, this.y) } } class Santa extends Subject { constructor(x, y) { super(x, y, 63, 63); this.sprite = graphics.santa.frame; this.frame = 0; this.max_frame = this.sprite.length; this.velocity = new Vector(-5, 5); this.distance = 0; this.end = false; } update() { const x = this.velocity.x * dt; this.distance += Math.abs(x); this.frame = Math.round((this.distance / 5) % 7); this.x += x; if (this.x < 7440) { if (!this.end) gameOver(); this.end = true; this.velocity.x = 0; } else { space.context.fillText("SANTA IS COMMING!!", 7350, innerHeight / 2); } space.context.drawImage(this.sprite[this.frame], this.x, this.y) } } async function main() { activeEffect = confirm("woud you like to add some effects ?\n\nmay cause lag !!") const loading=`

`; const loadingDIV=document.createElement("div"); loadingDIV.style.width="100%"; loadingDIV.style.height="100%"; loadingDIV.style.display="flex"; loadingDIV.innerHTML=loading; $("body").removeChild(rule); $("body").appendChild(loadingDIV); await sleep(1000); let loadText=$("#loadText"); screen = createCanvas($("body")); context = screen.getContext("2d"); context.font = "20px sans-serif"; context.fillStyle = "#fff"; space = createLayer(config.world.width, config.world.height) space.context.font = "30px sans-serif" bg = createLayer(config.world.width, config.world.height); bg_context = bg.context; bg_scene = createLayer(config.world.width, config.world.height); bg_scene_context = bg.context; graphics = new ImageLoader({ bg_lvl_1: "img/bg_navidad.png", block_ice_1: "img/ice-1.png", block_ice_2: "img/ice-2.png", block_ice_3: "img/ice-3.png", block_ice_4: "img/ice-4.png", block_ice_5: "img/ice-5.png", block_ice_6: "img/ice-6.png", block_ground_ice:"img/bg_tierrafria.png", bg_cave: "img/bg_cave.png", bg_tree: "img/bg_arbolnieve.png", bg_tree2: "img/bg_arbolNavidad.png", star: "img/star.png", star_void: "img/star-void.png", copoNieve: "img/copo-1.png", box_1: "img/box-1.png", box_2: "img/box-2.png", box_3: "img/box-3.png", box_4: "img/box-4.png", box_5: "img/box-5.png", box_6: "img/box-6.png", box_7: "img/box-7.png", box_8: "img/box-8.png", santa: "img/santa.png", effect_bottom: "img/effect-coll-bottom.png", effect_right: "img/effect-coll-right.png" }) block_ice_info = { "block_ice_1": { } } audio = new AudioLoader({ bg1: "audio/last christmas.mp3", bg2: "audio/Jingle Bell Rock.mp3", hit: "audio/hit.mp3", snow_hit: "audio/snow-hit.mp3", star: "audio/star.mp3" }) await audio.load(); audio.snow_hit.volume = 0.5 loadText.innerHTML="40%"; await graphics.syncLoad(); loadText.innerHTML="85%"; graphics.santa.toSprite([[1, 0, 0, 63, 63], [2, 0, 1, 63, 63], [3, 0, 2, 63, 63], [4, 0, 3, 63, 63], [5, 0, 4, 63, 63], [6, 0, 5, 63, 63], [7, 0, 6, 63, 63], [8, 0, 7, 63, 63]]) graphics.effect_right.toSprite([[1, 0, 0, 48, 48], [2, 0, 1, 48, 48], [3, 0, 2, 48, 48]]); graphics.effect_bottom.toSprite([[1, 0, 0, 48, 48], [2, 0, 1, 48, 48], [3, 0, 2, 48, 48], [4, 0, 3, 48, 48]]); graphics.bg_tree2.toSprite([[1, 0, 0, 85, 144], [2, 0, 1, 85, 144], [3, 0, 2, 85, 144], [4, 0, 3, 85, 144]]) bg3d = { "bg_2_3": { name: "bg_lvl_1", size: [1150, innerHeight], x: [0.1, 0], y: [0.4, -100] }, "bg_2_3_2": { name: "bg_lvl_1", size: [1150, innerHeight], x: [0.1, 1150], y: [0.4, -100] }, bg_cave: { name: "bg_cave", size: [512 + innerHeight * 0.5, innerHeight], x: [0.3, 500], y: [0, 0] } } bg_context.drawImage(graphics.bg_tree.img, 400, config.world.height - 150) for (let i = 0; i < 20; i++) { createBlock("block_ice_1", i * 32, config.world.height - 64, 48, 48) createBlock("block_ice_2", i * 32, config.world.height - 32, 48, 48) } createBlock("block_ice_3", 300, config.world.height - 96, 16, 32) createBlock("block_ice_4", 500, config.world.height - 112, 48, 48) for (let i = 22; i < 100; i++) { createBlock("block_ice_1", i * 32, config.world.height - 64, 48, 48) createBlock("block_ice_2", i * 32, config.world.height - 32, 48, 48) } createBlock("block_ice_6", 900, config.world.height - 128, 16, 16) createBlock("block_ice_6", 916, config.world.height - 128, 16, 16) createBlock("block_ice_6", 980, config.world.height - 128, 16, 16) createBlock("block_ice_5", 932, config.world.height - 160, 48, 48) createBlock("block_ice_5", 964, config.world.height - 192, 48, 48) createBlock("block_ice_5", 964, config.world.height - 160, 48, 48) createBlock("block_ice_4", 1300, config.world.height - 112, 48, 48) createBlock("block_ice_4", 1420, config.world.height - 112, 48, 48) createBlock("block_ice_4", 1530, config.world.height - 112, 48, 48) createBlock("block_ice_4", 1630, config.world.height - 112, 48, 48) createBlock("block_ice_4", 1630, config.world.height - 160, 48, 48) createBlock("block_ice_3", 1900, config.world.height - 96, 16, 32) //scalera createBlock("block_ice_5", 2100, config.world.height - 96, 32, 32) createBlock("block_ice_5", 2132, config.world.height - 128, 32, 32) createBlock("block_ice_5", 2164, config.world.height - 160, 32, 32) createBlock("block_ice_5", 2196, config.world.height - 192, 32, 32) bg_context.drawImage(graphics.bg_tree.img, 2330, config.world.height - 160) createBlock("block_ice_5", 2500, config.world.height - 96, 32, 32) createBlock("block_ice_5", 2532, config.world.height - 128, 32, 32) createBlock("block_ice_5", 2564, config.world.height - 160, 32, 32) createBlock("block_ice_5", 2596, config.world.height - 192, 32, 32) createBlock("block_ice_5", 2628, config.world.height - 192, 32, 32) createBlock("block_ice_5", 2660, config.world.height - 160, 32, 32) createBlock("block_ice_5", 2692, config.world.height - 128, 32, 32) createBlock("block_ice_5", 2724, config.world.height - 96, 32, 32) createBlock("block_ice_5", 5000, config.world.height - 64, 32, 32) createBlock("block_ice_5", 5100, config.world.height - 64, 32, 32) createBlock("block_ice_5", 5300, config.world.height - 64, 32, 32) createBlock("block_ice_3", 5316, config.world.height - 96, 16, 32) createBlock("block_ice_4", 5600, config.world.height - 150, 48, 48) createBlock("block_ice_5", 5800, config.world.height - 64, 32, 32) createBlock("block_ice_5", 5800, config.world.height - 138, 32, 32) createBlock("block_ice_5", 5800, config.world.height - 240, 32, 32) bg_context.drawImage(graphics.bg_tree.img, 5900, config.world.height - 120) //////////////// for (let i = 102; i < 120; i++) { createBlock("block_ice_1", i * 32, config.world.height - 64, 48, 48) createBlock("block_ice_2", i * 32, config.world.height - 32, 48, 48) } createBlock("block_ice_6", 120 * 32, config.world.height - 100, 16, 16) for (let i = 120; i < 130; i++) { createBlock("block_ice_5", i * 32, config.world.height - 128, 32, 32) } createBlock("block_ice_4", 125 * 32, config.world.height - 200, 48, 48) for (let i = 130; i < 135; i++) { createBlock("block_ice_5", i * 32, config.world.height - 160, 32, 32) } for (let i = 134; i < 140; i++) { createBlock("block_ice_5", i * 32, config.world.height - 192, 32, 32) } createBlock("block_ice_6", 140 * 32, config.world.height - 206, 16, 16) for (let i = 141; i < 150; i++) { createBlock("block_ice_5", i * 32, config.world.height - 256, 32, 32) } createBlock("block_ice_4", 32 * 149, config.world.height - 304, 48, 48) for (let i = 152; i < 250; i++) { createBlock("block_ground_ice", i * 32, config.world.height - 32, 48, 48) } createBlock("block_ice_4", 32 * 195, config.world.height - 90, 48, 48) createBlock("block_ice_6", 32 * 200, config.world.height - 112, 16, 16) createBlock("block_ice_6", 32 * 200, config.world.height - 45, 16, 16) createBlock("block_ice_6", 32 * 205, config.world.height - 112, 16, 16) createBlock("block_ice_6", 32 * 210, config.world.height - 45, 16, 16) createBlock("block_ice_6", 32 * 215, config.world.height - 45, 16, 16) createBlock("block_ice_6", 32 * 217, config.world.height - 112, 16, 16) createBlock("block_ice_6", 32 * 217, config.world.height - 45, 16, 16) createBlock("block_ice_6", 32 * 217, config.world.height - 132, 16, 16) createBlock("block_ice_6", 32 * 220, config.world.height - 45, 16, 16) createBlock("block_ice_6", 32 * 220, config.world.height - 112, 16, 16) for(let i=0;i<20;i++){ bg_context.drawImage(graphics.bg_tree.img, 7100+i*46, config.world.height - 125) } compositor = new Compositor(config.world.width, config.world.height); compositor.addLayer(bg_scene); compositor.addLayer(bg); compositor.addLayer(space); camera = new Camera(0, 0, 0, 0, innerWidth, innerHeight) timer_120 = new Timer(150, () => { for (let i in effects) { const effect = effects[i]; if (effect.frame >= effect.max_frames - 1) { effects.splice(i, 1); } else { effect.frame++; } } }) timer_4x_frame = new Timer(120, () => { for (let i in trees) { const tree = trees[i]; if (tree.x < camera.x + innerWidth && tree.x > camera.x) { tree.update(); } else if (tree.x < camera.x) { trees.shift() } if (tree.frame >= tree.max_frames - 1) { tree.frame = 0; } else { tree.frame++; } } }) animation = new RenderLoop(dt => { Promise.all([ timer_4x_frame.update(dt), timer_120.update(dt) ]) }) nieveSpawn = new Timer(200, () => { nieve.push(new CopoNieve) }); loadText.innerHTML="100%"; await sleep(2000); $("body").removeChild(loadingDIV) context.fillStyle="#000" context.fillText("Tap to start",innerWidth/2,innerHeight/2); screen.addEventListener("click",startGame); context.fillStyle="#fff" } function startGame(){ screen.removeEventListener("click",startGame) animation.start() Game.create(); space.context.fillStyle = "#f00" space.context.font = "30px sans-serif" audio.play("bg1"); audio.bg1.onended = () => { audio.play("bg1"); } } window.onload = () => rules();

a christmas game: Tap the Gift