<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
拼图小游戏
</head>
<body>
<div id="container">
<h3>拼图小游戏</h3>
<hr/>
<div id="timeBox">
共计时间：<span id="time">00:00:00</span>
</div>
<div>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid">
</canvas>
</div>
<div>
<button onclick="restarGame()">
重新开始
</button>
</div>
</div>
<script type="text/javascript">
//获取画布对象
var c=document.getElmentById('myCanvas');
//获取2D的context对象
var ctx=c.getContext('2d');
//定义拼图小方块的边长
var w=100;
//定义初始方块位置
var num=[00, 01, 02][10, 11 ,12][20, 21, 22];
//图片来源
var img=new Image();
img.src="image/C:\Users\胡佳星\Pictures\QQ图片20190718132642.jpg";
//图片加载好时
img.onload=function() {
//打乱拼图
generateNum();
//在画布上绘制拼图
drawCanvas();
};
//打乱拼图方法
function generateNum(){
for(var i=0;i<50;i++){
var i1=Math.round(Math.random()*2);
var j1=Math.round(Math.random()*2);
var i2=Math.round(Math.random()*2);
var j2=Math.round(Math.random()*2);
var temp=num[i1][j1];
num[i1][j1]=num[i2][j2];
num[i2][j2]=temp;
}
}
//绘制拼图
function drawCanvas(){
//清空画布
ctx.clearRect(0,0,300,300);
//绘制拼图
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
if(num[i][j]!=22){
var row=parseInt(num[i][j]/10);
var col=num[i][j]%10;
ctx.drawImage(img,col*w,row*w,w,w,j*w,i*w,w,w);
}
}
}
}
//监听鼠标单机事件
c.onmousedown=function(e){
//获取画布边界
var bound=c.getBoundingClientRect();
//获取鼠标在画布上的位置
var x=e.pageX-bound.left;
var y=e.pageY-bound.top;
//将x和y换算成几行几列
var row=parseInt(y/100);
var col=parseInt(x/100);
//如果单击的不是空白区域
if(num[row][col]!=22){
//移动单机的方块
detectBox(row,col);
//重新绘制画布
drawCanvas();
//检查游戏是否成功
if(isWin){
//清除计时器
clearImage(timer);
//绘制完整图片
ctx.drawImage(img,0,0);
//设置字体
ctx.font="bold 68px serif";
//设置填充颜色
ctx.fillStyle="red";
//显示提示语句
ctx.fillText("游戏成功！", 20, 150);
}
}
};
//移动单机的方块
function detecBox(i,j){
//如果单机的方块不在最上面一行
if(i>0){
//检测空白区域是否在当前方块的正上方
if(num[i-1][j]==22){
//交换位置
num[i-1][j]=num[i][j];
num[i][j]=22;
return;
}
}
//如果单击的方块不在最下面一行
if(i<2){
//检测空白区域是否在当前方块的正下方
if(num[i+1][j]==22){
//交换位置
num[i+1][j]=num[i][j];
num[i][j]=22;
return;
}
}
//如果单击的方块不在最左边一列
if(j>0){
//检测空白区域是否在当前方块的左边
if(num[i][j-1]==22){
//交换位置
num[i][j-1]=num[i][j];
num[i][j]=22;
return;
}
}
//如果点击的方块不在最右边一列
if(j<2){
//检测空白区域是否在当前方块的右边
if(num[i][j+1]==22){
//交换位置
num[i][j+1]=num[i][j];
num[i][j]=22;
return;
}
}
}
//胜利的判断
function checkWin(){
//遍历数组
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
//如果有一块不对
if(num[i][j]!=i*10+j){
return false;
}
}
}
//返回真
return true;
}
var time=document.getElementById("time");
//初始化计时器
var h=0;
m=0;
s=0;
function getCurrentTime(){
s=parseInt(s);
m=parseInt(m);
h=parseInt(h);
s++;
if(s==60){
s=0;
m++;
}
if(m==60){
m=0;
h++;
}
//修改小时、分钟、秒的显示效果，使其保持两位数
if(s<10)
s="0"+s;
if(m<10)
m="0"+m;
if(h<10)
h="0"+h;
//显示时间
time.innerHTML=h+":"+m+":"+s;
}
//重新开始游戏
function restartGame(){
//清除计时器
clearInterval(timer);
//时间清零
s=0;
m=0;
h=0;
//重新显示时间
getCurrentTime();
timer=setInterval("getCurrentTime()",1000);
//重新打乱拼图
generateNum();
//绘制拼图
drawCanvas();
}
//每隔1秒刷新一次时间
var timer=setInterval("getCurrentTime()",1000);
</script>
