///////////////////////////////////// //// Information //////////////////// ///////////////////////////////////// /* NAME : LEAP TO LIVE [ GAME ] 2.0 DATE : 29 - 04 - 2019 AUTHOR : ARB */ ///////////////////////////////////// //// Components ///////////////////// ///////////////////////////////////// let h = window.innerHeight; let w = window.innerWidth; let platform_images = []; let map = [ 'd p x xxxx x ', 'xxxxxxx x # #### #x xxx xx xx', '#######ww#x#ww####x##xx x### xxxx##www##', '#######################ww####ww###########', '##########################################' ]; let x = 45; let y = 45; let bg; let polish; let polishes = []; let grass; let grasses = []; let water; let waters = []; let VELOCITY = 3; let backgrounds_img = []; let backgrounds = []; let player; let player_images = []; let player_x = 0; let player_y = 0; let game_over = true; let dom_show = false; let coin_img; let coins = []; let coin_num = 20; let scores = 0; ///////////////////////////////////// //// Classes //////////////////////// ///////////////////////////////////// class Player{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.velX = 0; this.velY = 0; this.jumping = false; this.grounded = false; this.speed = 3; this.gravity = 0.5; this.jumping = true; this.grounded = false; this.index = 0; this.running_speed = 0.3; this.img = player_images; this.runningAble = false; } jump(){ if (!this.jumping && this.grounded){ this.jumping = true; this.grounded = false; this.velY = - this.speed * 3; this.runningAble = false; } } display(){ let index = floor(this.index) % this.img.length; image(this.img[index] ,this.x, this.y, this.w, this.h); if (game_over == false){ if(this.runningAble == true){ this.index += this.running_speed; } } } update(){ if (game_over == false){ this.velY += this.gravity; this.y += this.velY; } if(this.y < (w - this.height - 1)){ this.grounded = false; } } handle(){ let c = document.querySelector('canvas'); c.addEventListener('touchstart', e => { player.jump(); }); } } function collided(){ game_over = true; restart.style.display = 'inline'; } class Tiles{ constructor(x, y, w, h, index){ this.x = x; this.y = y; this.w = w; this.h = h; this.index = index; this.img = platform_images; this.vel = VELOCITY; } display(){ image(this.img[this.index], this.x, this.y, this.w, this.h); } update(){ if (this.x > - ((map[0].length * this.w) - w)){ if (game_over == false){ this.x -= this.vel; } } else { this.x = w - 7; } } } class Background{ constructor(x, y, w, h, index){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = bg; this.vel = 1; } display(){ image(this.img, this.x, this.y, this.w, this.h); } update(){ if (this.x > - this.w){ if (game_over == false){ this.x -= this.vel; } } else { this.x = w; } } } class Coin{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = coin_img; this.vel = VELOCITY; } display(){ image(this.img, this.x, this.y, this.w, this.h); } update(){ if (game_over == false){ if (this.x > - this.w){ this.x -= this.vel; } else { this.x = w; this.y = random(20, h - (x * map.length + 5)); this.vel = random(2, 4); this.display = function (){ image(this.img, this.x, this.y, this.w, this.h); } } } } collidedWith(op){ let w1 = this.x + this.w; let w2 = op.x + op.w - 7; let h1 = this.y + this.h; let h2 = op.y + op.h; if (w1 < w2 && w1 > op.x - 5 && h1 < h2 && h1 > op.y){ this.display = function (){} scores++; score.innerText = scores; } if (w1 > w2 && w2 > this.x && h1 < h2 && h1 > op.y){ this.display = function (){} scores++; score.innerText = scores; } if (w1 > w2 && w2 > this.x && h1 > h2 && h2 > this.y + 10){ this.display = function (){} scores++; score.innerText = scores; } if (w1 < w2 && w1 > op.x - 5 && h2 < h1 && h2 > this.y + 10){ this.display = function (){} scores++; score.innerText = scores; } } } ///////////////////////////////////// //// Game Functions ///////////////// ///////////////////////////////////// function gameFunctions(){ createCanvas(w, h); if (dom_show == true){ load.style.display = 'none'; splash.style.display = 'flex'; point_div.style.display = 'flex'; } splash.addEventListener('click', e => { splash.style.display = 'none'; game_over = false; }); ////////////[ Game Functions ]////////////// for (let i = 0; i < map.length; i++){ for (let j = 0; j < map[i].length; j++){ if (map[i][j] == '#'){ polish = new Tiles( j * x, i * y + (h - (y * map.length)), x, y, map[i][j]); polishes.push(polish); //console.log(map[i][j]) } else if (map[i][j] == 'x'){ grass = new Tiles( j * x, i * y + (h - (x * map.length)), x, y, map[i][j]); grasses.push(grass); } else if (map[i][j] == 'w'){ water = new Tiles( j * x, i * y + (h - (x * map.length)), x, y, map[i][j]); waters.push(water); } else if (map[i][j] == 'p'){ player = new Player( j * x, i * y + (h - (x * map.length)), 35, 60); player_x = j * x; player_y = i * y + (h - (x * map.length)); } else if (map[i][j] == ' '){ } } } //console.log(w / 30) backgrounds[0] = new Background(0, 0, w * 3, h); backgrounds[1] = new Background(w * 3, 0, w * 3, h); for (let d = 0; d < coin_num; d++){ coins[d] = new Coin(random(w / 2, w), random(20, h - (y * map.length)), 20, 20); } player.handle(); } ///////////////////////////////////// //// Control //////////////////////// ///////////////////////////////////// function gameUpdate(){ background(255); for (k = 0; k < backgrounds.length ; k++){ backgrounds[k].display(); backgrounds[k].update(); } //////////////////[ Update ]///////////////// for (let i = 0; i < polishes.length; i++){ polishes[i].display(); polishes[i].update(); } for (let j = 0; j < grasses.length; j++){ grasses[j].display(); grasses[j].update(); } for (let k = 0; k < waters.length; k++){ waters[k].display(); waters[k].update(); } for (let x = 0; x < coins.length; x++){ coins[x].display(); coins[x].update(); coins[x].collidedWith(player); } player.display(); player.update(); for (let a = 0; a < grasses.length; a++){ let dir = colCheck(player, grasses[a]); if (dir === 'b'){ player.jumping = false; player.grounded = true; player.velY = 0; player.runningAble = true; } } for (let b = 0; b < polishes.length; b++){ let dir = colCheck(player, polishes[b]); if (dir === 'b'){ player.jumping = false; player.grounded = true; player.velY = 0; player.runningAble = true; } } if (player.x < - player.w){ game_over = true; restart.style.display = 'inline'; } restart.addEventListener('click', e => { restart.style.display = 'none'; game_over = false; player.x = 80; player.y = 100; scores = 0; score.innerText = scores; }); } ///////////////////////////////////// //// Collision ////////////////////// ///////////////////////////////////// function colCheck(shapeA, shapeB) { // get the vectors to check against var vX = (shapeA.x + (shapeA.w / 2)) - (shapeB.x + (shapeB.w / 2)), vY = (shapeA.y + (shapeA.h / 2)) - (shapeB.y + (shapeB.h / 2)), // add the half widths and half heights of the objects hWidths = (shapeA.w / 2) + (shapeB.w / 2), hHeights = (shapeA.h / 2) + (shapeB.h / 2), colDir = null; // if the x and y vector are less than the half width or half height, they we must be inside the object, causing a collision if (Math.abs(vX) < hWidths && Math.abs(vY) < hHeights) { // figures out on which side we are colliding (top, bottom, left, or right) var oX = hWidths - Math.abs(vX), oY = hHeights - Math.abs(vY); if (oX >= oY) { if (vY > 0) { colDir = "t"; shapeA.y += oY; } else { colDir = "b"; shapeA.y -= oY; } } else { if (vX > 0) { colDir = "l"; shapeA.x += oX; } else { colDir = "r"; shapeA.x -= oX; } } } return colDir; } function preloadAll(){ ////////////[ Preload All ]///////////////// platform_images['#'] = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/y662DCd/polish.png'); //platform_images['#'] = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/dQvmfhC/01.png'); platform_images['x'] = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/FnQHhCH/main-ground.png'); platform_images['w'] = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/YQ1HjcP/water.png'); platform_images['r'] = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/VNC1qcN/forest-pack-03.png'); platform_images['l'] = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/FW4gBmb/forest-pack-07.png'); player_images[0] = loadImage('https://i.imgur.com/zCXCGBm.jpg'); player_images[1] = loadImage('https://i.imgur.com/DCzLIQc.jpg'); player_images[2] = loadImage('https://i.imgur.com/m7m19va.png'); player_images[3] = loadImage('https://i.imgur.com/a3fQyRW.jpg'); player_images[4] = loadImage('https://i.imgur.com/nYoYe9e.jpg'); player_images[5] = loadImage('https://i.imgur.com/8ADaYGr.jpg'); bg = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/kcq2Tbz/game-background-1.png'); coin_img = loadImage('http://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/VBVTqQr/Gold-11.png'); dom_show = true; } ///////////////////////////////////// //// Making Engine ////////////////// ///////////////////////////////////// const Engine = { start : gameFunctions, update : gameUpdate, preload : preloadAll } ///////////////////////////////////// //// Loop and Setup ///////////////// ///////////////////////////////////// function setup(){ //////////////////[ Start ]///////////////// Engine.start(); //////////////////[ End ]/////////////////// } function draw(){ //////////////////[ Start ]///////////////// Engine.update(); //////////////////[ End ]/////////////////// } function preload(){ //////////////////[ Start ]///////////////// Engine.preload(); //////////////////[ End ]/////////////////// }