免费下载地址
screenshot:
socialPuzzle.html：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"/> <title>socialPuzle</title> <link rel="stylesheet" type="text/css" href="css/game.css"/> <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script> <script src="./scripts/game.js" type="text/javascript"></script> <script type="text/javascript"> var start = function(){ MESA_LORCO.game.init(8,14,stop); $('#page').click(function(e) { var offset = $(this).offset(); MESA_LORCO.game.click({ x: e.pageX - e.target.offsetLeft - offset.left, y: e.pageY - e.target.offsetTop - offset.top }); }); $(this).hide(); }; var stop = function(){ $('#click').show(); $('#click').one('click', start); $('#page').unbind('click'); } $(function () { stop(); }); </script> </head> <body> <div id="page"> <div id="click">PLAY!</div> </div> </body> </html>
CSS:
html{ background-color: #7F7F7F; } #page { position: relative; z-index: 1; width: 768px; height: 1024px; border-style: none; border-color: transparent; background-color: #555; margin-left: auto; margin-right: auto; overflow: hidden; } #mesa-lorco{ position: absolute; z-index: 90; top: 50px; left: 150px; } #click{ position: absolute; z-index: 93; top: 585px; left: 155px; padding: 40px; font-size: 30pt; color: #eee; background-color: #000; }
