/* NAME : TRAP THE CRAB [ GAME ] AUTHOR : ARB DATE : 07 - 04 - 2019 */ /* /////////////////// NOTE \\\\\\\\\\\\\\\\\\\\ 1. Thanks dog ( Raj-dog-chatralla ) forbeing the beta tester 😉 ! 2. Images are collected and modified ( Roatating ) by me !! 3. Enjoy !! 4. Speciall thanks to coder for his suggetions !! */ /* ///////////////// COMPONENT \\\\\\\\\\\\\\\\\ */ // functions let h = window.innerHeight; let w = window.innerWidth; let turn_right = false; let turn_left = false; let corner_touched = false; let stop = true; let game_over = true; let side = 35; let bg; let check_air = false; let collision_status = false; let dom_show = false; let t; let music = true; let game_sound = new Audio('https://instaud.io/_/3wnW.mp3'); game_sound.loop = true; // Player let player; let player_height = 80; let player_width = 80; let gravity = 0.6; let velocity = 8; let player_mass = 2; let force = 8; let acc = 0.3; let running_speed = 0.2; let left_gap = 25; let links_length = 5; let table_img; let scores; // Player left image let player_left_img = []; let links_left = ['https://i.imgur.com/WGAFmf2.jpg', 'https://i.imgur.com/29PCJ35.jpg', 'https://i.imgur.com/lcGrnyD.jpg', 'https://i.imgur.com/jrLYcka.jpg', 'https://i.imgur.com/eKrkK79.jpg'/*, 'https://i.ibb.co/7W8CGpc/l-f-5.png', 'https://i.ibb.co/5jXsNz2/l-f-7.png', 'https://i.ibb.co/PskBxCB/l-f-8.png', 'https://i.ibb.co/JpMgRQp/l-f-9.png', 'https://i.ibb.co/kcTVTQN/l-f-10.png', 'https://i.ibb.co/h1HWKT7/l-f-11.png', 'https://i.ibb.co/4fjL0vF/l-f-12.png'*/ ]; // Player right image let player_right_img = []; let links_right = [ 'https://i.imgur.com/BL9wJEc.jpg', 'https://i.imgur.com/8NS8Ojj.jpg', 'https://i.imgur.com/K0yhxoL.jpg', 'https://i.imgur.com/20zyQjg.jpg', 'https://i.imgur.com/18l7q2D.jpg'/*, 'https://i.ibb.co/hKF8mnM/r-f-6.png', 'https://i.ibb.co/zVbck6y/r-f-7.png', 'https://i.ibb.co/Yf8C14W/r-f-8.png', 'https://i.ibb.co/pWhxXfp/r-f-9.png', 'https://i.ibb.co/hZF8bJn/r-f-10.png', 'https://i.ibb.co/9nmvydF/r-f-11.png', 'https://i.ibb.co/bFpCFWx/r-f-12.png'*/ ]; // Clouds let clouds = []; let cloud_height = 15; let cloud_width = 25; let cloud_num = 20; let cloud_vel = 2; let cloud_img; // Enemy let enemies = []; let enemy_height = 35; let enemy_width = 35; let enemy_num = 2; let enm_vel = -2; let enemy_img = []; let enemyImg; let enm_added = false; let gravity_e; // Roofs let roofs = []; let roof_height = 20; let roof_width = 30; let roof_num = 2; let roof_speed = 8; let roof_img = []; // Retina let retinas = []; let retina_height = 30; let retina_width = 50; let retina_speed = 4; let retina_img = []; /* ///////////////// PRELOAD \\\\\\\\\\\\\\\\\\\ */ function preload(){ /*roof_img[0] = loadImage('https://i.ibb.co/J5gGfZY/IMG-20190406-074201.jpg');*/ roof_img[0] = loadImage('https://i.imgur.com/6PcWnw3.jpg'); roof_img[1] = loadImage('https://i.imgur.com/37AZjnS.jpg'); bg = loadImage('https://image.ibb.co/bN8nTV/scroll-bg-far.png'); // Enemy img enemyImg = loadImage('https://i.imgur.com/oyNjbma.png'); // Clouds img /*cloud_img = loadImage('https://i.ibb.co/BsH5JXq/cloud1.png');*/ cloud_img = loadImage('https://i.imgur.com/6ArHHlF.png');/* cloud_img = loadImage('https://i.ibb.co/LQggHyc/cloud4.png');*/ // Retina retina_img[0] = loadImage('https://i.imgur.com/wqG2SFc.jpg'); retina_img[1] = loadImage('https://i.imgur.com/GN2mQfR.jpg'); retina_img[2] = loadImage('https://i.imgur.com/j7VsWyg.jpg'); retina_img[3] = loadImage('https://i.imgur.com/ZGlhMEs.jpg'); // Set Player Image for (let i = 0; i < links_length; i++){ player_left_img[i] = loadImage(links_left[i]); player_right_img[i] = loadImage(links_right[i]); } dom_show = true; } /* /////////////////// SETUP \\\\\\\\\\\\\\\\\\\ */ function setup(){ createCanvas(w, h); if (dom_show == true){ loader.style.display = 'none'; splash_screen.style.display = 'flex'; } about.addEventListener('click', e => { alert('Developed by Arb 😉 ! '); }); music_on.addEventListener('click', e => { music_on.style.display = 'none'; music_off.style.display = 'inline'; music = false; }); music_off.addEventListener('click', e => { music_off.style.display = 'none'; music_on.style.display = 'inline'; music = true; }); // Enemy Image enemy_img[0] = enemyImg.get(0, 0, 30, 30); enemy_img[1] = enemyImg.get(30, 0, 30, 30); //console.log(check()); // Player player = new Player( side, h - 200, player_width , player_height); // Roofs roofs = [ new Roof(0, -h , side, h * 2, 0), new Roof(w - side, -h, side, h * 2, 1) ]; // Enemy enemies[0] = new Enemy(random(side, (w - side) - enemy_width), 0, enemy_width, enemy_height, random(-2, -5)); enemies[1] = new Enemy(random(side, (w - side) - enemy_width), 0, enemy_width, enemy_height, random(2,5)); /*enemies[2] = new Enemy( w / 2, 0, enemy_width, enemy_height, random(2,3));*/ // Retina retinas[0] = new Retina(side, 50, retina_width, retina_height, 1); retinas[1] = new Retina(side, h - 300, retina_width, retina_height, 0); retinas[2] = new Retina(side, h - 100, retina_width, retina_height, 1); retinas[3] = new Retina(((w - side) - retina_width), 80, retina_width, retina_height, 2); retinas[4] = new Retina(((w - side) - retina_width), h - 50, retina_width, retina_height, 3); retinas[5] = new Retina(((w - side) - retina_width), h / 2, retina_width, retina_height, 2); // Clouds for (j = 0; j < cloud_num; j++){ clouds[j] = new Cloud(random(side, (w - side)), random(0, h), cloud_width, cloud_height); } gPlay.addEventListener('click', e => { splash_screen.style.display = 'none'; game_over = false; if (music == true){ game_sound.play(); } go.style.display = 'none'; scores = 0; t = setInterval(() => { if (game_over == false){ score.innerText = scores; scores++; } }, 500); }); gravity_e = 0.5; } /* /////////////////// DRAW \\\\\\\\\\\\\\\\\\\\ */ function draw(){ background(0); noStroke(); // Bg image(bg, 0 - (w / 2), 0, w * 2, h); //image(enemy_img[1], 50, 0); // Clouds for (j = 0; j < clouds.length; j++){ clouds[j].print(); clouds[j].go(); } // Roofs for (i = 0; i < roofs.length; i++){ roofs[i].print(); roofs[i].go(); //roofs[i].go(); } // Retina for (n = 0; n < retinas.length; n++){ retinas[n].print(); retinas[n].go(); } // Enemy for (k = 0; k < enemies.length; k++){ enemies[k].print(); enemies[k].go(); player.collidedWith(enemies[k]); } // Player player.print(); player.go(); player.handle(); //image(player_left_img, 0, 0, 50, 50); restart.addEventListener("click", e => { game_over = false; go.style.display = 'none'; game_sound.play(); for (m = 0; m < enemies.length; m++){ enemies[m].y = - enemy_height; } //clicked = true; //clearInterval(t); scores = 0; score.innerText = scores; //player.x = side; }); } /* ///////////////// Builder \\\\\\\\\\\\\\\\\\\ */ // Player class Player{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.vel = velocity; this.force = force; this.img = player_left_img; this.index = 0; this.running_speed = running_speed; } print(){ // Rectangle if (game_over == false){ if (turn_right == true){ this.img = player_right_img; } if (turn_left == true){ this.img = player_left_img; } } //rect(this.x, this.y, this.w, this.h); // Image image(this.img[floor(this.index) % this.img.length], this.x - left_gap, this.y, this.w, this.h); if (game_over == false){ this.index += this.running_speed; } } go(){ /*player_mass += gravity; if (turn_right == true || turn_left == true){ if (corner_touched == false){ this.y += player_mass; } }*/ /*if (turn_right == true && turn_left == false){ if (corner_touched == false){ this.x += velocity; } } if (turn_left == true && turn_right == false){ if (corner_touched == false){ this.x += velocity; } //this.y += player_mass } */ if (this.x > side && this.x < (w - side) - this.w){ check_air = true; } else { check_air = false; } if (stop == false){ //velocity += acc; if (game_over == false){ this.x += velocity; } } /*if (turn_left == true && corner_touched == true){ this.x = side + player_width; } if (turn_right == true && corner_touched == true ){ this.x = (w - side) - (side + player_width); }*/ if (this.x < side){ this.x = side; } if (this.x > (w - (side + this.w)) + 50){ this.x = (w - (side + this.w)) + 50; } /*if (this.x > w - (side + (player_width * 2)) || this.x < side + (player_width * 2)){ //console.log('Game over'); //turn_right = false; //turn_left = false; corner_touched = true; //velocity = 3; //this.handle = function (){} }*/ /*if (this.x > ((w - side) - (side + this.w)) || this.x < side + this.w){ corner_touched = true; }*/ if (this.x > (w - side) + 30){ corner_touched = true; //turn_right = false; stop = true; collision_status = false; //turn_left = true; } if (this.x < side){ corner_touched = true; //turn_left = false; stop = true; collision_status = false; //turn_right = true; } } // Collision collidedWith(op){ let w1 = (this.x + this.w) - ((this.w / 2) + 30); let w2 = (op.x + op.w); let h1 = (this.y + this.h) - this.w / 2; let h2 = (op.y + op.h); if (w1 < w2 && w1 > op.x && 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 + 20){ collided(); } if (w1 < w2 && w1 > op.x && h2 < h1 && h2 > this.y + 20){ collided(); } } handle(){ var canvas; canvas = document.querySelector("canvas"); /* actual swipe capture */ canvas.addEventListener('touchstart', handleTouchStart, false); canvas.addEventListener('touchmove', handleTouchMove, false); var xDown = null, yDown = null; function getTouches(evt) { return evt.touches || evt.originalEvent.touches; } function handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }; function handleTouchMove(evt) { if ( ! xDown || ! yDown ) { return; } var xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; var xDiff = xDown - xUp; var yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { /*Response part*/ if ( xDiff > 0 ) { if (velocity > 0){ velocity = - velocity; } turn_left = true; turn_right = false; corner_touched = false; stop = false; /* left swipe */ if (this.y < - player_height){ this.force = 0; } else { this.force = force; this.force += acc; player_mass = - this.force; } } else { /* right swipe */ turn_right = true; turn_left = false; corner_touched = false; stop = false; if (velocity < 0){ velocity = - velocity; } //console.log('Right'); if (this.y < player_height){ this.force = 0; } else { this.force = force; this.force += acc; player_mass = - this.force; } } } /* reset values */ xDown = null; yDown = null; }; /* end */ } } // Sky Lands class Roof{ constructor(x, y, w, h, index){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = roof_img; this.index = index; } print(){ // Rectangle //rect(this.x, this.y, this.w, this.h); // Image image(this.img[this.index], this.x, this.y, this.w, this.h); } go(){ if (corner_touched == false){ if (this.y < h - (this.h / 2)){ if (game_over == false){ this.y += roof_speed; } } else { this.y = -this.h / 2; //this.x = random(0, w); } } } } // Cloud Builder class Cloud{ constructor(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.vel = cloud_vel; this.img = cloud_img; this.index = 0; } print(){ // Rectangle //rect(this.x, this.y, this.w, this.h); // Image image(this.img, this.x, this.y, this.w, this.h); } go(){ if (game_over == false){ if (this.y < h){ this.y += this.vel; } else { this.y = - this.h; this.x = random(side, (w - side)); //this.vel = random(2, 3); } } } } // Enemy Builder class Enemy{ constructor(x, y, w, h, vel){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = enemy_img; this.index = 0; this.vel = vel; this.gravity = random(0.5, 0.8); } print(){ // Rectangle //rect(this.x, this.y, this.w, this.h); // Image image(this.img[floor(this.index) % this.img.length], this.x, this.y, this.w, this.h); if ( game_over == false){ this.index += 0.2; } } go(){ if (this.x < side){ this.vel = - this.vel; } if (this.x > (w - side) - this.w){ this.vel = - this.vel; } if (this.y > h){ this.y = - this.h; this.gravity = 0.5; enemy_num++; this.x = random(side, (w - side) - this.w); } if (game_over == false){ this.x += this.vel; this.gravity += 0.01; this.y += this.gravity; } } } // Retina Builder class Retina{ constructor(x, y, w, h, index){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = retina_img; this.vel = retina_speed; this.index = index; } print(){ image(this.img[this.index], this.x, this.y, this.w, this.h); } go(){ if (this.y < h){ if (game_over == false){ this.y += this.vel; } } else { this.y = - this.h; } } } function collided(){ //console.log('Collided'); game_over = true; go.style.display = 'flex'; game_sound.pause(); } /* /////////////////// ETU \\\\\\\\\\\\\\\\\\\\\ // For loop for (i = 0; i < num; i++){ } // If else if (condition){ } else { } // Only if if (condition){ } // function creator function name(){ } // Class builder */