/////////////////////////////////////////// // Information //////////////////////////// /////////////////////////////////////////// /* NAME : KEY TO LEAD [ GAME ] AUTHOR : ARB DATE : 25 - 04 - 2019 */ /////////////////////////////////////////// // What's New - V2.0 ////////////////////// /////////////////////////////////////////// // 1. Control Problem Fixed // 2. Gravity and Force Improved // 3. Level 4 Added // 4. Level 5 Added // 5. And various bugs fixed /////////////////////////////////////////// // Note /////////////////////////////////// /////////////////////////////////////////// // Assests are collected // Thanks dog for being a beta tester 😁 /////////////////////////////////////////// // Game Comp.////////////////////////////// /////////////////////////////////////////// let h = window.innerHeight; let w = window.innerWidth; let control_box; let bg; let game_over = false; let key_collected = false; let level_selected = false; let dom_show = false; /////////////////////////////////////////// // Wall and cell.////////////////////////// /////////////////////////////////////////// let cell; let cells = []; let wall; let walls = []; let brick_img; let wall_height = 45; let wall_width = 45; /////////////////////////////////////////// // Player ///////////////////////////////// /////////////////////////////////////////// let player; let player_height = Math.floor(210 / 4) - 12; let player_width = Math.floor(105 / 3) - 5; let psht; let left_img = []; let right_img = []; let pPos = { frames : [ [ { x : 0, y : 210 - Math.floor(210 / 4) - 8 }, { x : Math.floor(105 / 3), y : 210 - Math.floor(210 / 4) - 8 }, { x : Math.floor(105 / 3) * 2, y : 210 - Math.floor(210 / 4) - 8 } ], [ { x : 0, y : Math.floor(210 / 4) }, { x : Math.floor(105 / 3), y : Math.floor(210 / 4) }, { x : Math.floor(105 / 3) * 2, y : Math.floor(210 / 4) } ] ] } /////////////////////////////////////////// // Enemy ////////////////////////////////// /////////////////////////////////////////// let enemy; let enemies = []; let enemy_height = 10; let enemy_width = 10; let enemy_vel = 2; /////////////////////////////////////////// // Key /////////////////////////////////// /////////////////////////////////////////// let key_img; let key; let key_h = 30; let key_w = 20; /////////////////////////////////////////// // Door /////////////////////////////////// /////////////////////////////////////////// let door; let door_img; let door_h = 45; let door_w = 45; /////////////////////////////////////////// // Level Design /////////////////////////// /////////////////////////////////////////// let level = prompt('Enter Level : 1, 2, 3, 4, 5', 4); let levels = [ [], // Level 1 ['xxxxxxxx', // X is wall 'x xxkx', // space ( ) is free place 'x x x', // p is player 'xxx * x', // * is enemy 'x xxxx', // k is key 'x x ', // d is door 'x x xxxx', 'x x', 'xdx px', 'xxxxxxxx'], // Level 2 ['xxxxxxxx', 'xx x', 'xk x x', 'xx* xx x', 'x x', 'xxx xxxx', 'x pdx', 'xxxxxxxx'], // Level 3 ['xxxxxxxx', 'x k dx', 'xx x xx', 'x x', 'x x x px', 'x xx', 'xx * x x', 'xxxxxxxx'], // level 4 ['xxxxxxxx', 'xk x', 'x * x x', 'x xx xx', 'x x x', 'xx xx x', 'xx xx x', 'xxpxxdxx', 'xxxxxxxx'], // Level 5 ['xxxxxxxx', 'xk x', 'xxxxxx*x', 'x x', 'x x xxxx', 'x pxdxx', 'xx x', 'xxxxxxxx' ] ]; /////////////////////////////////////////// // Preload //////////////////////////////// /////////////////////////////////////////// function preload(){ brick_img = loadImage('https://i.imgur.com/vL4Jqcs.png'); bg = loadImage('http://cors-anywhere.herokuapp.com/https://i.ibb.co/GMCNMxJ/BG.png'); psht = loadImage('http://cors-anywhere.herokuapp.com/https://i.ibb.co/cY9HQFM/guy.png'); key_img = loadImage('http://cors-anywhere.herokuapp.com/https://i.ibb.co/xXY3y6d/goldenkey.png'); dom_show = true; } /////////////////////////////////////////// // Setup ////////////////////////////////// /////////////////////////////////////////// function setup(){ control_box = parseInt(getComputedStyle(document.getElementById('control')).height) + 45; ////////////////////////// // Dom /////////////////// ////////////////////////// if (dom_show == true){ load.style.display = 'none'; splash_screen.style.display = 'flex'; } createCanvas(w, h); ////////////////////////// // Game start //////////// ////////////////////////// start.addEventListener('click', display); function display(){ splash_screen.style.display = 'none'; //audio.play(); } ////////////////////////// // Cut player left Image / ////////////////////////// for (a = 0; a < pPos.frames[0].length; a++){ let p = psht.get(pPos.frames[0][a].x, pPos.frames[0][a].y, Math.floor(105 / 3), Math.floor(210 / 4) - 5); left_img.push(p); } ////////////////////////// //Cut player right Image / ////////////////////////// for (b = 0; b < pPos.frames[1].length; b++){ let q = psht.get(pPos.frames[1][b].x, pPos.frames[1][b].y, floor(105 / 3), floor(210 / 4) - 5); right_img.push(q); } ////////////////////////// // Drawing /////////////// ////////////////////////// for (i = 0; i < levels[level].length; i++){ for (j = 0; j < levels[level][i].length; j++){ if (levels[level][i][j] == ' '){ // Draw cell cell = new Platform(j * 45, i * 45, 45, 45); cells.push(cell); } // Draw Wall else if (levels[level][i][j] == 'x'){ wall = new Platform((j * 45), (i * 45), wall_width, wall_height); walls.push(wall); } // Draw player else if (levels[level][i][j] == 'p'){ player = new Player(j * 45, i * 45, player_width, player_height); } // Draw enemy else if (levels[level][i][j] == '*'){ enemy = new Enemy((j * 45), (i * 45), enemy_width, enemy_height); enemies.push(enemy); } else if (levels[level][i][j] == 'k'){ key = new Key( j * 45, i * 45, key_h, key_w); } else if (levels[level][i][j] == 'd'){ door = new Door( j * 45, i * 45, door_w, door_h); } } } ////////////////////// /// Show ///////////// ////////////////////// if (dom_show == true){ control.style.display = 'flex'; } /////////////////// // Control///////// /////////////////// leftBtn.addEventListener('touchstart', left); leftBtn.addEventListener('touchend', leftEnded); rightBtn.addEventListener('touchstart', right); rightBtn.addEventListener('touchend', rightEnded); jumpBtn.addEventListener('touchstart', jump); jumpBtn.addEventListener('touchend', jumpEnded); } /////////////////////////////////////////// // Control Functions ////////////////////// /////////////////////////////////////////// function left(){ player.go_left = true; player.go_right = false; player.mass = 0; player.runningAble = true; //player.isJumped = false; player.img = left_img; } function right(){ player.go_right = true; player.go_left = false; player.mass = 0; player.runningAble = true; player.img = right_img; } function leftEnded(){ player.go_left = false; player.vel = 3; player.mass = 3; player.runningAble = false; } function rightEnded(){ player.go_right = false; player.vel = 3; player.mass = 3; player.runningAble = false; } function jump(){ player.isJumped = true; player.mass = 3; } function jumpEnded(){ player.isJumped = false; player.force = 3; player.mass = 3; } /////////////////////////////////////////// // Game Loop ////////////////////////////// /////////////////////////////////////////// function draw(){ background(255); // image(bg, - 100, 0, w + 100 , h); //fill(100,100,100); for (i = 0; i < walls.length; i++){ walls[i].print(); let dir = colCheck(player, walls[i]); if (dir == 'l' || dir == 'r'){ // Right or left collision // So, we need to stop go_right or go_left player.go_left = false; player.go_right = false; } else if (dir == 'b'){ // When collided to bottom // We need to 0 the mass player.mass = 0; } else if (dir == 't'){ // When collided to top player.isJumped = false; //this.force = 0; } let dir1 = enemyColCheck(enemy, walls[i]); if (dir1 == 'b'){ //enemy.mass = 0; //enemy.go_right = true; //enemy.gravity = -0.1; enemy.velY = -enemy_vel; } else if (dir1 == 'r'){ //enemy.go_right = false; //enemy.go_left = true; //enemy.vel = -3; enemy.velX = -enemy_vel; } else if (dir1 == 'l'){ //enemy.go_left = false; //enemy.go_right = true; //enemy.vel = 3; enemy.velX = enemy_vel; } else if (dir1 == 't'){ //enemy.gravity = 0.1; //enemy.vel = -3; enemy.velY = enemy_vel; } } // Draw enemy fill(255, 0, 0); noStroke(); enemy.print(); enemy.go(); player.print(); player.go(); player.collidedWith(enemy); key.collidedWith(player); door.collidedWith(player); fill(100, 255, 100); key.print(); door.print(); if (game_over == true){ go.style.display = 'flex'; } restart.addEventListener('click', restartGame); game_start.addEventListener('click', gameStart); } /////////////////////////////////////////// // Reatart //////////////////////////////// /////////////////////////////////////////// function restartGame(){ go.style.display = 'none'; game_over = false; key.key_collected = false; player.x = random(45 * 2, w / 2); player.y = random(45 * 2, h / 2); enemy.x = random(45 * 2, w / 2); enemy.y = random(45 * 2, h / 2); //audio.play(); } function gameStart(){ you_won.style.display = 'none'; go.style.display = 'none'; game_over = false; key.key_collected = false; player.x = random(45 * 2, w / 2); player.y = random(45 * 2, h / 2); enemy.x = random(45 * 2, w / 2); enemy.y = random(45 * 2, h / 2); //audio.play(); } /////////////////////////////////////////// // Builder //////////////////////////////// /////////////////////////////////////////// // Player class class Player{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.vel = 3; this.speed = 0.1; this.force = 3; this.acc = 0.1; this.friction = 0.1; this.mass = 1.5; this.gravity = 0.3; this.go_left = false; this.go_right = false; this.isJumped = false; this.runningAble = false; this.img = left_img; this.index = 0; } print(){ // Calculate the index for the // sprites let index = floor(this.index) % this.img.length; // Draw Image image(this.img[index], this.x, this.y, this.w, this.h); // Increase index if player is // runningAble if (game_over == false){ if (this.runningAble == true){ this.index += 0.3; } } } go(){ if (game_over == false){ if (this.go_left == true){ this.vel += this.speed; this.x -= this.vel; //this.x *= -this.friction; } if (this.go_right == true){ this.vel += this.speed; this.x += this.vel; //this.x *= this.friction; } if (this.x <= 0){ this.x = 0; } if (this.x >= w - this.w){ this.x = w - (this.w + 45); } if (this.y <= 0){ this.y = 45; } if (this.y >= h - this.h){ this.y = h - (this.h); } if (this.isJumped == true){ this.force += this.acc; this.y -= this.force; } else { this.mass += this.gravity; this.y += this.mass; } } } 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){ collided(); } if (w1 > w2 && w2 > this.x && h1 < h2 && h1 > op.y){ collided(); } if (w1 > w2 && w2 > this.x && h1 > h2 && h2 > this.y + 10){ collided(); } if (w1 < w2 && w1 > op.x - 5 && h2 < h1 && h2 > this.y + 10){ collided(); } } } // Platform class class Platform{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = brick_img; } print(){ image(this.img, this.x, this.y, this.w, this.h); } } // Enemy class class Enemy{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.velX = enemy_vel; this.velY = enemy_vel; } print(){ ellipse(this.x, this.y, this.w, this.h); } go(){ //this.mass += this.gravity; if (game_over == false){ this.y += this.velY; this.x += this.velX; } } } // Key class Key{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = key_img; this.key_collected = false; } print(){ if (this.key_collected == false){ 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){ collected(); } if (w1 > w2 && w2 > this.x && h1 < h2 && h1 > op.y){ collected(); } if (w1 > w2 && w2 > this.x && h1 > h2 && h2 > this.y + 10){ collected(); } if (w1 < w2 && w1 > op.x - 5 && h2 < h1 && h2 > this.y + 10){ collected(); } } } // Door class Door{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = door_img; } print(){ if (key.key_collected == true){ rect(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){ if (key.key_collected == true){ win(); } } if (w1 > w2 && w2 > this.x && h1 < h2 && h1 > op.y){ if (key.key_collected == true){ win(); } } if (w1 > w2 && w2 > this.x && h1 > h2 && h2 > this.y + 10){ if (key.key_collected == true){ win(); } } if (w1 < w2 && w1 > op.x - 5 && h2 < h1 && h2 > this.y + 10){ if (key.key_collected == true){ win(); } } } } /////////////////////////////////////////// // Collision ////////////////////////////// /////////////////////////////////////////// function collided(){ game_over = true; //audio.pause(); //key.key_collected = true; //console.log('Collided!'); } function collected(){ key.key_collected = true; } function win(){ //console.log('You Won!'); you_won.style.display = 'flex'; game_over = true; //audio.pause() go.style.display = 'none'; } //////////////////// // For player ////// //////////////////// // From r8w9's code 😁 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; } /////////////////////////// /// For Enemy ///////////// /////////////////////////// function enemyColCheck(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; } /////////////////////////////////////////// // Happy coding 😂 //////////////////////// ///////////////////////////////////////////

KEY TO LEAD [ GAME ] V2.0