演示网站 图像之谜游戏
编写代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图像之谜</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/image-puzzle.css" rel="stylesheet" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/image-puzzle.js"></script>
</head>
<body>
<div id="collage">
<h2>图像之谜</h2>
<hr />
<div id="playPanel" style="padding:5px;display:none;">
<h3 id="imgTitle"></h3> <hr />
<div style="display:inline-block; margin:auto; width:95%; vertical-align:top;">
<ul id="sortable" class="sortable"></ul>
<div id="actualImageBox">
<div id="stepBox">
<div>步骤:</div><div class="stepCount">0</div>
</div>
<img id="actualImage" />
<div>请将碎片拼凑成这样一个完整画面</div>
<p id="levelPanel">
<input type="radio" name="level" id="easy" checked="checked" value="3" /> <label for="easy">简单</label>
<input type="radio" name="level" id="medium" value="4" /> <label for="medium">中等</label>
<input type="radio" name="level" id="hard" value="5" /> <label for="hard">困难</label>
</p>
<div>
<button id="btnRule" type="button" class="btn" onclick="rules();">规则</button>
<button id="newPhoto" type="button" class="btn">换一张图片</button>
<button id="btnReplay" type="button" class="btn" onclick="about();">关于</button>
</div>
</div>
</div>
</div>
<div id="gameOver" style="display:none;">
<div style="background-color: #fc9e9e; padding: 5px 10px 20px 10px; text-align: center; ">
<h2 style="text-align:center">游戏结束!!</h2>
恭喜!! <br /> 你完成了这张图片
<br />
用了 <span class="stepCount">0</span>步.
<br /><br />
<div>
<button type="button" onclick="window.location.reload(true);">重玩一次</button>
</div>
</div>
</div>
<script>
var images = [
{ src: 'images/london-bridge.jpg', title: '伦敦桥' },
{ src: 'images/lotus-temple.jpg', title: '莲花寺' },
{ src: 'images/qutub-minar.jpg', title: '古德高塔' },
{ src: 'images/statue-of-liberty.jpg', title: '自由女神像' },
{ src: 'images/taj-mahal.jpg', title: '泰姬陵' }
];
$(function () {
var gridSize = $('#levelPanel :radio:checked').val();
imagePuzzle.startGame(images, gridSize);
$('#newPhoto').click(function () {
imagePuzzle.startGame(images, gridSize);
});
$('#levelPanel :radio').change(function (e) {
var gridSize = $(this).val();
imagePuzzle.startGame(images, gridSize);
});
});
function rules() {
alert('根据图片提示，将小图片移动到相应的位置来拼凑出完整大图即可胜利');
}
function about() {
alert('【星益小游戏平台】源码下载：blog.96xy.cn');
}
</script>
</div>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
