/*////////////////////////////////////////// This is my first ever try to make a fighting game! Hope y'all will like it! Thanks! Name : FIGHTING MANIA Date : 06 - 09 - 2019 -- Arb //////////////////////////////////////////*/ ////////// Comp. ///////////// let w = window.innerWidth, h = window.innerHeight; let player; let bgImg; let bg1, bg2; let startGame = false; let toastdelay = 300; let enemy; let enemies = []; let enemies1 = []; let murder = 0; let frames = []; let enemyFrames = []; let sprites2 = []; let side = 'left'; /////// SpriteSheet ///////// let SpriteSheet = { Playerlinks : [ { l : 'https://i.ibb.co/f2KmkH9/ezgif-4-7e2cbd34f924.png', f : 4 // Idle Left }, { l : 'https://i.ibb.co/gwNR9HL/Pink-Monster-Idle-4.png', f : 4 // Idle Right }, { l : 'https://i.ibb.co/nBxpzDr/ezgif-com-reverse-1.png', f : 6 // Run Left }, { l : 'https://i.ibb.co/y48jg39/Pink-Monster-Run-6.png', f : 6 // Run Right }, { l : 'https://i.ibb.co/bvnb1qw/ezgif-com-reverse.png', f : 6 // Attack Left }, { l : 'https://i.ibb.co/89M87Zt/Pink-Monster-Attack2-6.png', f : 6 // Attack right } ], EnemyLinks : [ { l : 'https://i.ibb.co/cbSs6Cr/Owlet-Monster-Run-6.png', f : 6 // Right }, { l : 'https://i.ibb.co/PD5ZxN5/Owlet-Monster-Attack2-6.png', f : 6 // Attack Right }, { l : 'https://i.ibb.co/8zVgmys/ezgif-com-reverse-2.png', f : 6 // Left }, { l : 'https://i.ibb.co/dkhFTV8/ezgif-com-reverse-3.png', f : 6 // Left Attack } ], h : 32, w : 32 }, sprites = []; function preload(){ for (let i = 0; i < SpriteSheet.Playerlinks.length; i++){ sprites[i] = loadImage('https://cors-anywhere.herokuapp.com/' + SpriteSheet.Playerlinks[i].l); } for (let i = 0; i < SpriteSheet.EnemyLinks.length; i++){ sprites2[i] = loadImage('https://cors-anywhere.herokuapp.com/' + SpriteSheet.EnemyLinks[i].l); } bgImg = loadImage('https://cors-anywhere.herokuapp.com/' + 'https://i.ibb.co/9NYRQ7h/images.jpg'); startGame = true; } function setup(){ createCanvas(w, h); if (startGame == true){ mur.style.display = 'block'; load.style.display = 'none'; drawToast(); } ////////// Make Frames //////// for (let i = 0; i < SpriteSheet.Playerlinks.length; i++){ frames[i] = __splice__(sprites[i], SpriteSheet.Playerlinks[i].f, SpriteSheet.w, SpriteSheet.h); } for (let i = 0; i < SpriteSheet.EnemyLinks.length; i++){ enemyFrames[i] = __splice__(sprites2[i], SpriteSheet.EnemyLinks[i].f, SpriteSheet.w, SpriteSheet.h); } // Player player = new Player(w/2 - 70/2, h - 235, 70, 70, frames[0]); setTimeout(() => { setInterval(pushEnemy, 10000);pushEnemy(); makeToast('Enemies are coming! Be ready to kill!', 500); }, 18000); setTimeout(() => { setInterval(pushEnemy1, 9000);pushEnemy1(); }, 20000); function pushEnemy(){ let enemy = new Enemy(-70, h - 235, 70, 70, enemyFrames[0], 0.5); enemies.push(enemy); } function pushEnemy1(){ let e = new Enemy(w, h - 235, 70, 70, enemyFrames[2], 0.3); enemies1.push(e); } bg1 = new Bg(-w, 0, w * 2, h, bgImg); bg2 = new Bg(w, 0, (w * 2) + 5, h, bgImg); canvas = document.querySelector('canvas'); t.addEventListener('click', e => { loop(); loop(); murder = 0; m.innerText = murder; enemies.splice(0, enemies.length); enemies1.splice(0, enemies1.length); player.health = 40; gm.style.display = 'none'; }); canvas.addEventListener('click', e => { if (player.punchable == true){ player.punchable = false; if (side === 'left'){ player.frames = frames[4]; } else if (side === 'right'){ player.frames = frames[5]; } setTimeout(() => { if (side === 'left'){ player.frames = frames[0]; } else if (side === 'right'){ player.frames = frames[1]; } player.punchable = true; }, 800); } }); canvas.addEventListener('touchend', e => { player.goRight = false; player.goLeft = false; if (player.frames == frames[3]){ player.frames = frames[1]; } else if (player.frames == frames[2]){ player.frames = frames[0]; } }); 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 ) ) { if ( xDiff > 0 ) { player.goRight = false; player.goLeft = true; side = 'left'; player.frames = frames[2]; } else { player.goLeft = false; player.goRight = true; side = 'right'; player.frames = frames[3]; } } xDown = null; yDown = null; }; } let x = 0; function draw(){ background(0); bg1.show(); bg1.update(); bg2.show(); bg2.update(); for (let i = 0; i < enemies.length; i++){ enemies[i].drawEnemy(); enemies[i].updateEnemy(); } for (let i = 0; i < enemies1.length; i++){ enemies1[i].drawEnemy(); enemies1[i].updateEnemy(); } for (let i = 0; i < enemies.length; i++){ if (enemies[i].x < player.x - enemies[i].w/2){ enemies[i].x += enemies[i].walkspeed; } else { enemies[i].frames = enemyFrames[1]; } if (enemies[i].x >= player.x - enemies[i].w/2 && player.frames == frames[4]){ if (enemies[i].x + enemies[i].health > enemies[i].x){ enemies[i].health -= 0.4; } else { murder++; m.innerText = murder; enemies.splice(i, 1); player.health += 5; } } } for (let i = 0; i < enemies1.length; i++){ if (enemies1[i].x > player.x + enemies1[i].w/2){ enemies1[i].x -= enemies1[i].walkspeed; } else { enemies1[i].frames = enemyFrames[3]; } if (enemies1[i].x <= player.x + enemies1[i].w/2 && player.frames == frames[5]){ if (enemies1[i].x + enemies1[i].health > enemies1[i].x){ enemies1[i].health -= 0.4; } else { murder++; m.innerText = murder; enemies1.splice(i, 1); player.health += 10; } } } player.drawPlayer(); player.updatePlayer(); for (let i = 0; i < enemies.length; i++){ if (enemies[i].frames == enemyFrames[1]){ player.health -= 0.07; } } for (let i = 0; i < enemies1.length; i++){ if (enemies1[i].frames == enemyFrames[3]){ player.health -= 0.07; } } } /*/-/-/-/-/-/-/ Cut SpriteSheet /-/-/-/-/-/*/ function __splice__(s, n, w, h){ let frames = []; for (let i = 0; i < n; i++){ let span = s.get(i * w, 0, w, h); frames.push(span); } return frames; } /*/-/-/-/-/-/-/-/ Classes /-/-/-/-/-/-/-/-/*/ class Player{ constructor(x, y, w, h, fms){ this.x = x; this.y = y; this.h = h; this.w = w; this.frames = fms; this.fps = 0; this.speed = 0.2; this.punchable = true; this.goRight = false; this.goLeft = false; this.walkspeed = 3.5; this.health = 40; } drawPlayer(){ let i = floor(this.fps) % this.frames.length; image(this.frames[i], this.x, this.y, this.w, this.h); noFill(); rect(this.x + this.w/4, this.y, 40, 5); fill('green'); //noStroke(); rect((this.x + this.w/4), this.y, this.health, 5); } updatePlayer(){ this.fps += this.speed; if (this.health > 40){ this.health = 40; } else if (this.health < 0){ this.health = 0; noLoop(); gm.style.display = 'flex'; gm.style.height = '100vh'; } } } class Bg{ constructor(x, y, w, h, img){ this.x = x; this.y = y; this.w = w; this.h = h; this.img = img; this.speed = 4; } show(){ image(this.img, this.x, this.y, this.w, this.h); } update(){ if (player.goLeft == true){ if (this.x < w * 2){ this.x += this.speed; } else { this.x = -w*2; } } if (player.goRight == true){ if (this.x > -w*2){ this.x -= this.speed; } else { this.x = w*2; } } } } class Enemy{ constructor(x, y, w, h, f, ws){ this.x = x; this.y = y; this.w = w; this.h = h; this.frames = f; this.speed = 0.15; this.fps = 0; this.walkspeed = ws; this.health = 40; } drawEnemy(){ this.i = floor(this.fps) % this.frames.length; image(this.frames[this.i], this.x, this.y, this.w, this.h); noFill(); rect(this.x + this.w/4, this.y, 40, 5); fill('green'); rect((this.x + this.w/4), this.y, this.health, 5); } updateEnemy(){ this.fps += this.speed; } } function makeToast(text, delay){ let body = document.getElementsByTagName('body')[0]; let div = document.createElement('div'); div.classList.add('toast'); div.innerText = text; body.appendChild(div); setTimeout(() => { div.style.bottom = '0'; setTimeout(() => { div.style.bottom = '-50px'; }, 2000); }, delay); } function drawToast(){ makeToast('Hello World!', toastdelay); makeToast('I am your assistant!', toastdelay + 3000); makeToast('Swipe right to go right!', toastdelay + 6000); makeToast('Swipe left to go left!', toastdelay + 9000); makeToast('Click on the screen to punch!', toastdelay + 12000); makeToast('Good Luck, Enjoy - Arb ! 😜', toastdelay + 15000); setInterval(() => { makeToast('Kill the blue enemies to get more health!', 0); }, toastdelay + 25000); }

FIGHTING MANIA [ GAME ]