var top_ini,left_ini,ball,w,h; var calibrating = true; var mobile = false; var current_cell_x = 0; var current_cell_y = 0; if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){ mobile = true; } $(document).ready(function() { $("body").delegate("button","click", function() { $("#ball").css({ "top":(top_ini+1)+"px", "left":(left_ini+1)+"px" }).show(); $("#c_7_7").css({ "background-image":"url(https://i.imgur.com/yNXfe16.png)", }); $("#instructions").html("Move the ball through the maze to the hole.").css("color","black"); $('#maze > tbody').empty(); current_cell_x = 0; current_cell_y = 0; show_maze(); animation(update); }); if (mobile) { $("#ball,#hole_ini").show(); $("#instructions").html("To begin move the ball
to the black hole
(tilt your device)"); init(); } else { $("#instructions").html("

Sorry, this code runs
only on mobile devices.
I hope you can run it later."); } w = window.innerWidth; h = window.innerHeight; top_ini = parseInt((h-210)/2)+2; left_ini = parseInt((w-206)/2)+2; $("#square").css({ "top":+top_ini+"px", "left":left_ini+"px" }); show_maze(); }); if (!window.animation) { window.animation = (function() { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback,element) { window.setTimeout(callback,1000/60); }; })(); } function init() { ball = document.getElementById("ball"); w = window.innerWidth; h = window.innerHeight; ball.style.left = (w/2)-50+"px"; ball.style.top = (h/2)-50+"px"; ball.velocity = {x:0,y:0}; ball.position = {x:0,y:0}; if (window.DeviceOrientationEvent) { window.addEventListener("deviceorientation", function(event) { ball.velocity.y = Math.round(event.beta); ball.velocity.x = Math.round(event.gamma); }); } else { alert("Sorry, your browser doesn't support Device Orientation"); } update(); } function update() { if (calibrating) { ball.position.x += ball.velocity.x; ball.position.y += ball.velocity.y; if (ball.position.x > (w-24) && ball.velocity.x > 0) { ball.position.x = w-24; } if (ball.position.x < 0 && ball.velocity.x < 0) { ball.position.x = 0; } if (ball.position.y > (h-24) && ball.velocity.y > 0) { ball.position.y = h-24; } if (ball.position.y < 0 && ball.velocity.y < 0) { ball.position.y = 0; } ball.style.top = ball.position.y + "px"; ball.style.left = ball.position.x + "px"; if ((ball.position.y>=top_ini-5 && ball.position.y<=top_ini+5) && (ball.position.x>=left_ini-5 && ball.position.x<=left_ini+5)) { ball.style.top = (top_ini+1)+"px"; ball.style.left = (left_ini+1)+"px"; $("#maze").fadeTo(1000,1,function() { $("#hole_ini").hide(); $("#instructions").html("Move the ball through the maze to the hole"); }); calibrating = false; } animation(update); } else { selector = "c_"+current_cell_y+"_"+current_cell_x; bb = parseInt($('#'+selector).css('border-bottom')); bt = parseInt($('#'+selector).css('border-top')); bl = parseInt($('#'+selector).css('border-left')); br = parseInt($('#'+selector).css('border-right')); abs_x = Math.abs(ball.velocity.x); abs_y = Math.abs(ball.velocity.y); max = Math.max(abs_x,abs_y); if (bt===0 && ball.velocity.y<0 && abs_y==max) { $("#ball").stop().animate({ "top":"-=26px" },"fast","linear",function() { current_cell_y = current_cell_y - (current_cell_y>0?1:1); animation(update); }); } else if (bb===0 && ball.velocity.y>0 && abs_y==max) { $("#ball").stop().animate({ "top":"+=26px" },"fast","linear",function() { current_cell_y = current_cell_y + (current_cell_y<7?1:1); animation(update); }); } else if (bl===0 && ball.velocity.x<0 && abs_x==max) { $("#ball").stop().animate({ "left":"-=26px" },"fast","linear",function() { current_cell_x = current_cell_x - (current_cell_x>0?1:1); animation(update); }); } else if (br===0 && ball.velocity.x>0 && abs_x==max) { $("#ball").stop().animate({ "left":"+=26px" },"fast","linear",function() { current_cell_x = current_cell_x + (current_cell_x<7?1:1); animation(update); }); } if (current_cell_x==7 && current_cell_y==7) { $("#ball").hide(); $("#c_7_7").css({ "background-image":"url(https://i.imgur.com/AE3XWBs.png)" }); $("#instructions").html("YOU ARE A WINNER!
").css("color","green"); } else { if(!$("#ball").is(':animated')) { animation(update); } } } } function newMaze(x,y) { var totalCells = x*y; var cells = new Array(); var unvis = new Array(); for (var i = 0; i < y; i++) { cells[i] = new Array(); unvis[i] = new Array(); for (var j = 0; j < x; j++) { cells[i][j] = [0,0,0,0]; unvis[i][j] = true; } } var currentCell = [Math.floor(Math.random()*y), Math.floor(Math.random()*x)]; var path = [currentCell]; unvis[currentCell[0]][currentCell[1]] = false; var visited = 1; while (visited < totalCells) { var pot = [[currentCell[0]-1, currentCell[1], 0, 2], [currentCell[0], currentCell[1]+1, 1, 3], [currentCell[0]+1, currentCell[1], 2, 0], [currentCell[0], currentCell[1]-1, 3, 1]]; var neighbors = new Array(); for (var l = 0; l < 4; l++) { if (pot[l][0] > -1 && pot[l][0] < y && pot[l][1] > -1 && pot[l][1] < x && unvis[pot[l][0]][pot[l][1]]) { neighbors.push(pot[l]); } } if (neighbors.length) { next = neighbors[Math.floor(Math.random()*neighbors.length)]; cells[currentCell[0]][currentCell[1]][next[2]] = 1; cells[next[0]][next[1]][next[3]] = 1; unvis[next[0]][next[1]] = false; visited++; currentCell = [next[0], next[1]]; path.push(currentCell); } else { currentCell = path.pop(); } } return cells; } function show_maze() { var disp = newMaze(8,8); for (var i = 0; i < disp.length; i++) { $('#maze > tbody').append(""); for (var j = 0; j < disp[i].length; j++) { var selector = "c_"+i+"_"+j; $('#maze > tbody').append(" "); if (disp[i][j][0] == 0) { $('#'+selector).css('border-top', '1px solid #4e3006'); } if (disp[i][j][1] == 0) { $('#'+selector).css('border-right', '1px solid #4e3006'); } if (disp[i][j][2] == 0) { $('#'+selector).css('border-bottom', '1px solid #4e3006'); } if (disp[i][j][3] == 0) { $('#'+selector).css('border-left', '1px solid #4e3006'); } } $('#maze > tbody').append(""); } $("#c_7_7").css({ "background-image":"url(https://i.imgur.com/yNXfe16.png)", "background-position":"center center" }); }

Button_color_red