'use strict'; // useful functions function docId(e) { return document.getElementById(e); } function docNew(e) { return document.createElement(e); } // initializing global variables var MainMenu = { domElem: null, buttons: { play: null, info: null }, actions: { show: function() { MainMenu.domElem.style.display = 'block'; }, hide: function() { MainMenu.domElem.style.display = 'none'; }, play: function() { MainMenu.actions.hide(); LevelSelectMenu.actions.show(); }, info: function() { alert(' == Drop the Tile ==\n\nOriginal game by Rull Deef'); } }, init: function() { MainMenu.domElem = docId('main-menu'); MainMenu.buttons.play = docId('play'); MainMenu.buttons.play.onclick = function() { MainMenu.actions.play() } MainMenu.buttons.info = docId('info'); MainMenu.buttons.info.onclick = function() { MainMenu.actions.info() } } } var LevelSelectMenu = { domElem: null, buttons: { back: null }, actions: { show: function() { LevelSelectMenu.domElem.style.display = 'block'; }, hide: function() { LevelSelectMenu.domElem.style.display = 'none'; }, back: function() { LevelSelectMenu.actions.hide(); MainMenu.actions.show(); }, play: function(level) { LevelSelectMenu.actions.hide(); Game.actions.show(); Game.actions.loadLevel(level); } }, init: function() { LevelSelectMenu.domElem = docId('level-select-menu'); LevelSelectMenu.buttons.back = docId('back'); LevelSelectMenu.buttons.back.onclick = function() { LevelSelectMenu.actions.back(); } var lvls = document.getElementsByTagName('td'); for(var i = 0; i < lvls.length; i++) lvls[i].onclick = function() { LevelSelectMenu.actions.play(this.innerText); } } } var Game = { domElem: null, levelElem: null, // tiles holder levelData: [ 'zero', // level indexing from 1 ['swipe tiles with touch. Your goal is to remove all tiles from game field. Good luck!', '1 -> 1 = win',[2,4,1],[6,4,1]], // level 1 ['you can only swipe tiles in directions where they will have impact', '2+2, 1+1',[4,3,1],[4,7,1],[1,4,2],[7,4,2]], // level 2 ['tiles with different weights wont fully destruct on impact', '1x2 -> 2',[1,4,1],[4,4,2],[7,4,1]], // level 3 ['remember: often order does matter', '1 -> (2 -> 3)',[4,1,1],[4,4,2],[4,7,3]], // level 4 ['', 'all to 5',[1,3,1],[4,3,5],[5,7,2],[7,2,2]], // level 5 ['','',[3,1,1],[1,4,2],[3,4,2],[7,4,2],[6,5,2],[7,7,1]], // level 6 ['','',[2,1,3],[2,2,4],[1,7,2],[2,6,1],[5,7,1],[6,2,1]], // level 7 ], tiles: [], // active tiles list buttons: { tip: null, retry: null, back: null }, actions: { show: function() { Game.domElem.style.display = 'block'; }, hide: function() { Game.domElem.style.display = 'none'; }, back: function() { if(!confirm('sure? Progress will not be saved')) return; Game.actions.hide(); MainMenu.actions.show(); while(Game.tiles.length != 0) Game.tiles[0].destroy(true); }, win: function() { Game.actions.hide(); LevelSelectMenu.actions.show(); }, tip: function() { alert(Game.actions._tip); }, _lvl: null, retry: function() { while(Game.tiles.length != 0) Game.tiles[0].destroy(true); Game.actions.loadLevel(this._lvl); }, loadLevel: function(level) { this._lvl = level; var data = Game.levelData[level]; setTimeout(function() { if(data[0] != '') alert(data[0]); }, 200); Game.actions._tip = data[1]; for(var i = 2; i < data.length; i++) { var d = data[i]; Game.actions.Tile(d[0], d[1], d[2]).init(); } }, Tile: function(tx, ty, tvalue) { return { _x: tx, _y: ty, tvalue, get x() { return this._x; }, set x(v) { this._x = v; this.domElem.style.left = 9*v+1 + 'vw'; }, get y() { return this._y; }, set y(v) { this._y = v; this.domElem.style.top = 9*v+1 + 'vw'; }, get value() { return this.tvalue; }, set value(v) { this.tvalue = v; this.domElem.innerText = v; }, domElem: null, init: function() { this.domElem = docNew('div'); this.domElem.className = 'tile'; this.domElem.ontouchstart = function(e) { this.style.backgroundColor = 'cyan'; var touch = e.touches[e.touches.length-1]; this.touchId = touch.id; this.pos = this.lastpos = [touch.pageX, touch.pageY]; e.preventDefault(); navigator.vibrate(5); } this.domElem.ontouchmove = function(e) { var touch; for(var i = 0; i < e.touches.length; i++) if(e.touches[i].id == this.touchId) touch = e.touches[i]; this.lastpos = [touch.pageX, touch.pageY]; e.preventDefault(); } this.domElem.ontouchend = this.domElem.ontouchcancel = function() { this.style.backgroundColor = 'white'; var dx = this.lastpos[0] - this.pos[0]; var dy = this.lastpos[1] - this.pos[1]; if(dx > dy) { if(dx > -dy) scope.kick(1, 0); else scope.kick(0,-1); } else { if(dx > -dy) scope.kick(0, 1); else scope.kick(-1,0); } } Game.levelElem.appendChild(this.domElem); this.x = tx; this.y = ty; this.value = tvalue; Game.tiles.push(this); var scope = this; this.loop = setInterval (function() { scope.update() }, 10); }, destroy: function(b) { this.domElem.parentNode. removeChild(this.domElem); var scope = this; Game.tiles = Game.tiles.filter (function(t) { return t != scope }); clearInterval(this.loop); if(!b && Game.tiles.length == 0) setTimeout(function() { alert('you win!'); Game.actions.win(); }, 200); }, tx, ty, target: null, kick: function(dx, dy) { var target, tx = this.x, ty = this.y; do { tx += dx; ty += dy; if(Game.isOut(tx, ty)) return; target = Game.at(tx, ty); } while(!target); this.target = target; this.tx = tx; this.ty = ty; navigator.vibrate(10); }, bounce: function(dx, dy) { if(!Game.isOut(this.tx+dx, this.ty+dy)) { this.tx += dx; this.ty += dy; navigator.vibrate(15); } }, update: function() { this.x += Math.sign(this.tx - this.x)/10; this.y += Math.sign(this.ty - this.y)/10; if((Math.abs(this.tx - this.x) < 0.2) && (Math.abs(this.ty - this.y) < 0.2)) { if(this.target != null) { this.target.value = Math.abs(this.value - this.target.value); if(this.target.value <= 0) { this.target.destroy(); navigator.vibrate(20); } else { var dx = Math.sign(this.tx - this.x); var dy = Math.sign(this.ty - this.y); this.target.bounce(dx, dy); } this.target = null; this.destroy(); navigator.vibrate(30); } this.x = this.tx; this.y = this.ty; } } } } }, isOut: function(x, y) { return (x<0) || (9<=x) || (y<0) || (9<=y); }, at: function(x, y) { for(var i = 0; i < Game.tiles.length; i++) if(Game.tiles[i].x == x && Game.tiles[i].y == y) return Game.tiles[i]; return null; }, init: function() { Game.domElem = docId('game'); Game.levelElem = docId('field'); Game.buttons.tip = docId('tip'); Game.buttons.tip.onclick = function() { Game.actions.tip(); } Game.buttons.retry = docId('rev'); Game.buttons.retry.onclick = function() { navigator.vibrate(40); Game.actions.retry(); } Game.buttons.back = docId('ret'); Game.buttons.back.onclick = function() { Game.actions.back(); } } } window.onload = function() { MainMenu.init(); LevelSelectMenu.init(); Game.init(); LevelSelectMenu.actions.hide(); Game.actions.hide(); }