基于HTML的消灭方块小游戏
基于HTML的消灭方块小游戏
一个基于HTML，Javascript的消灭方块小游戏
-> 免费下载地址
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;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-01-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录