Eliminación de juegos de cubos basada en HTML
Un mini juego para eliminar cubos basado en HTML y Javascript
-> Dirección de descarga gratuita
captura de pantalla:
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;
}