var audio; var left; var right; var jump; var tableToss; var LEFT = "left"; var RIGHT = "right"; var KEY_LEFT = 37; var KEY_UP = 38 var KEY_RIGHT = 39; var KEY_DOWN = 40; var KEY_SPACEBAR = 32; var JUMP = "jump"; var JUMP_MAX = 90; var MAX_PLAYER_TABLES = 5; var HUMAN = "HUMAN"; var COMP = "COMP"; var arena; var p1; var p2; var aFrame; var players = []; var PLAYER_SPRITES = ["(╯°□°）╯","(┛◉Д◉)┛","(ﾉ≧∇≦)ﾉ","(ノಠ益ಠ)ノ","(╯ರ ~ ರ）╯","(┛ಸ_ಸ)┛","(ﾉ´･ω･)ﾉ","(ノಥ,_｣ಥ)ノ","(┛✧Д✧))┛"]; var THROW_SPRITES = ["︵","彡","ﾐ"]; var TABLE_SPRITES = ["┻━┻","┸━┸","┳━┳"]; var tables = []; var tableSpeed = 3; var controlsPress = { left: false, right: false, jump: false } function randVal(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function getEl(id){ return document.getElementById(id); } function init(){ //audio = getEl("audio"); left = getEl("left"); right = getEl("right"); jump = getEl("jump"); tableToss = getEl("table-toss"); arena = getEl("arena"); document.addEventListener("keydown", onKeyDown); document.addEventListener("keyup", onKeyUp); left.addEventListener("touchstart", onPress); left.addEventListener("touchend", onRelease); right.addEventListener("touchstart", onPress); right.addEventListener("touchend", onRelease); jump.addEventListener("touchstart", onPress); tableToss.addEventListener("touchstart", tossTable); //landscape(); p1 = new Player("p1"); p2 = new Player("p2", COMP); players.push(p1); players.push(p2); aFrame = window.requestAnimationFrame(gameLoop); } function landscape(){ var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); var container = document.getElementsByClassName("container")[0]; container.classList.toggle("container"); var widthRatio = 1.35; var heightRatio = 0.45; if (isMobile) { /* widthRatio = 0.95; heightRatio = 0.65; */ var deg = 90; document.body.style.webkitTransform = 'rotate('+deg+'deg)'; document.body.style.mozTransform = 'rotate('+deg+'deg)'; document.body.style.msTransform = 'rotate('+deg+'deg)'; document.body.style.oTransform = 'rotate('+deg+'deg)'; document.body.style.transform = 'rotate('+deg+'deg)'; } arena.style.width = `${window.innerWidth * widthRatio}px`; arena.style.height = `${window.innerHeight * heightRatio}px`; } function gameLoop(){ moveTables(); checkHits(); checkJump(); checkMove(); p2.makeMove(); aFrame = window.requestAnimationFrame(gameLoop); } function checkHits(){ for(var i=tables.length-1;i>=0;i--){ var t = tables[i]; var tx = t.dom.offsetLeft; var tw = t.dom.offsetWidth; var th = t.dom.offsetHeight; var ty = t.height; var hit = false; for(var j=0;j= px && tx + tw <= px + pw && ty >= py && ty <= py + ph){ hit = true; p.takeDamage(); break; } } if(hit){ arena.removeChild(t.dom); tables.splice(i, 1); } } } function Player(id, type){ this.id = id; this.type = type || HUMAN; this.widthPlayerOffset = 10; this.moveDir = 1; this.moveSpeed = 2; this.jumpMax = JUMP_MAX; this.jumpSpeed = 3; this.jumpPos = 0; this.jumping = false; this.jumpDir = 1; var p = document.createElement("div"); var pSprite = document.createElement("div"); var damageBar = document.createElement("progress"); p.classList.add("player"); pSprite.innerHTML = PLAYER_SPRITES[randVal(0, PLAYER_SPRITES.length - 1)]; this.dom = p; this.damageBar = damageBar; this.pSprite = pSprite; p.appendChild(damageBar); p.appendChild(pSprite); arena.appendChild(p); this.damageBar.style.width = "55px"; this.damageBar.style.marginBottom = "10px"; this.damageBar.max = 100; this.damageBar.value = 100; if(this.type === HUMAN){} else{ this.dom.style.left = `${arena.offsetWidth - this.dom.offsetWidth - this.widthPlayerOffset}px`; this.dom.style.transform = "scaleX(-1)"; this.moveDir = -1; } this.reset = function(){ this.damageBar.value = 100; this.pSprite.innerHTML = PLAYER_SPRITES[randVal(0, PLAYER_SPRITES.length - 1)]; } this.moveLeft = function(){ if(this.dom.offsetLeft < 0){ return; } this.pSprite.style.transform = "scaleX(-1)"; this.moveDir = -1; this.dom.style.left = `${this.dom.offsetLeft-this.moveSpeed}px`; } this.moveRight = function(){ if(this.dom.offsetLeft + this.dom.offsetWidth + this.widthPlayerOffset > arena.offsetWidth){ return; } this.pSprite.style.transform = "scaleX(1)"; this.moveDir = 1; this.dom.style.left = `${this.dom.offsetLeft+this.moveSpeed}px`; } this.jump = function(){ this.jumping = true; controlsPress.jump = false; } this.updateJump = function(){ if(this.jumping){ this.jumpPos += this.jumpDir*this.jumpSpeed; this.dom.style.bottom = `${this.jumpPos}px`; } if(this.jumpPos >= this.jumpMax && this.jumpDir === 1){ this.jumpDir = -1; } if(!this.jumpPos){ this.jumpDir = 1; this.jumping = false; } } this.tossTable = function(){ if(!this.damageBar.value){ return; } addTable(this); if(this.type === COMP){ return; } var sprite = this.pSprite; sprite.innerHTML += THROW_SPRITES[randVal(0, THROW_SPRITES.length - 1)]; setTimeout(function(){ sprite.innerHTML = sprite.innerHTML.substring(0, sprite.innerHTML.length - 1); },150); } this.takeDamage = function(){ if(!this.damageBar.value){ return; } this.damageBar.value -= 10; var sprite = this.pSprite; if(this.damageBar.value === 0){ sprite.style.transform = "scaleY(-1)"; setTimeout(function(){ sprite.style.transform = "scaleY(1)"; this.reset(); }.bind(this), 2000); } sprite.style.color = "red"; setTimeout(function(){ sprite.style.color = "black"; }, 500); } this.makeMove = function(){ if(this.type === HUMAN){ //return; } if(Math.random() < 0.05){ // this.moveLeft(); } if(Math.random() < 0.05){ // this.moveRight(); } if(Math.random() < 0.005){ this.jump(); } if(Math.random() < 0.005){ this.tossTable(); } if(tableInRadius(this, 50)){ this.jump(); } } } function tossTable(e){ p1.tossTable(); } function tableInRadius(p, radius){ var enemyTables = tables.filter(function(t){ return t.id !== p.id; }); for(var i=0;i= py && ty <= py + ph){ return true; } } return false; } function addTable(p){ var playerTables = tables.filter(function(t){ return t.id === p.id; }); if(playerTables.length >= MAX_PLAYER_TABLES){ return; } var table = document.createElement("div"); table.classList.add("table"); // table.id = p.id; table.innerHTML = TABLE_SPRITES[randVal(0, TABLE_SPRITES.length - 1)]; table.style.left = `${p.dom.offsetLeft+p.dom.offsetWidth/2}px`; table.style.bottom = `${p.jumpPos}px`; arena.appendChild(table); tables.push({ id: p.id, dir: p.moveDir, height: p.jumpPos, speed: 3, dom: table }); } function moveTables(){ for(var i=0;i arena.offsetWidth){ arena.removeChild(table.dom); tables.splice(i, 1); } if(table.dom.offsetLeft < 0){ arena.removeChild(table.dom); tables.splice(i, 1); } } } function checkJump(){ if(controlsPress.jump){ p1.jump(); } for(var i=0;i

Flip Da Tables