<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS PANIC - js do it</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<!--<div id="gamestart">-->
<!-- <button id="start" type="button" onclick="">开始游戏</button>-->
<!--</div>-->
<div id="title" style="position: absolute;left: 600px;height:250px;border-style: solid;border-color: #0a0000;border-width: 4px">
<h3 style="top: 0px;">拼图游戏</h3>
<span>交换图片：</span>
<input type="text" id="txt1" style="top: 120px;height:30px;border-radius: 10px;margin: 6px 13px;">
<input type="text" id="txt2" style="top: 120px;height:30px;border-radius: 10px;margin: 6px 13px;">
<button type="button" onclick="javascript:sure();">确定</button>
<div id="slider" style="position: absolute;top: 150px">
<form>
<label>容易</label>
<input type="range" id="scale" value="4" min="3" max="5" step="1">
<label>难</label>
<span style="top: 220px;left: 300px;">步数：</span>
<span id="total" style="top: 220px;left: 270px"></span>
</form>
<br>
</div>
</div>
<!-- 游戏背景 -->
<div id="game">
<div id="main" class="main" style="position:absolute;top: 0px">
<canvas id="puzzle" width="480px" height="480px"></canvas>
</div>
<!-- 游戏开始-->
<a id="gamestart">
<button class="btn" type="button" onclick="javascript:begin();">开始游戏</button>
<input class="input" type="file"onchange="selectImage(this);"/>
</a>
<!-- 游戏结束 -->
<a id="over" href="">
</a>
<!-- 闯关成功-->
<a style="text-align: center"id="Win" href="">
</a>
<!-- 时间 -->
<div id="timer">
<!-- 时间条 -->
<div id="progress" style="width:0%"></div>
</div>
</div>
<script>
var progress;
var end,win,start;
var countprogreass;
function begin(){
if(img.src==""){
alert("请选择图片文件");
return;
}
start = document.getElementById("gamestart");
start.style.animationName="gamestart1";
progress = document.getElementById("progress");
progress.style.animationName="progress1";
run();
}
function run(){
var flag=0;
var progress = document.getElementById("progress");
progress.style.width=parseInt(progress.style.width) + 1 + "%";
console.log(parseInt(progress.style.width) + 1 + "%");
if(progress.style.width=="100%"){
window.clearTimeout(timeout);
end=document.getElementById("over");
end.classList.add("gameover");
flag=1;
}
//赢了
if(solved==true){
window.clearTimeout(timeout);
win = document.getElementById("Win");
win.classList.add("Win");
//监听动画结束事件
win.addEventListener("webkitAnimationEnd",function () {
this.style.opacity=1;
})
var show=document.getElementById("show");
show.innerHTML="累计步数："+total.innerHTML;
flag=1;
}
if(flag==0)
var timeout=window.setTimeout("run()",600);
}
function selectImage(file) {
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
function sure() {
var txt1=document.getElementById("txt1").value;
var txt2=document.getElementById("txt2").value;
var x1=parseInt(txt1[1]);var y1=parseInt(txt1[3]);
var x2=parseInt(txt2[1]);var y2=parseInt(txt2[3]);
var L1=new Object;var L2=new Object;
L1.x=x1;L1.y=y1;
L2.x=x2;L2.y=y2;
slideTile(L1,L2);
drawTiles();
}
</script>
<script src="sliding.js"></script>
</body>
</html>
拼图小游戏.zip （19个子文件） 
拼图小游戏 
style2.css 6KB img gophers-Slice.ai 2.27MB
gamestart.png 241KB
picture.jpg 182KB defa.jpg 84KB replay.png 176KB Thumbs.db 31KB gophers-Slice_time-line.png 17KB YouWin.png 165KB dimetrodon.jpg 232KB gophers-Slice_Boom.png 5KB gophers-Slice_Timeboard.png 17KB sliding.js 3KB
index.html 3KB .idea misc.xml 179B modules.xml 271B 案例.iml 469B workspace.xml 11KB style.css 156B资源评论
