html5 连连看
选4张图片，分别命名为1.jpg,2.jpg,3.jpg,4.jpg 放在同一目录下。千万别用360,.....IE9以上，chrome,firefox都可以
<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">
<html xmlns="http;//www.w3.org/1999/xhtml">
<head>
<title>啊干牌爱情连连看</title>
<meta http--equiv="Content--Type" content="text/html;charset=gb2312">
<script language = "JavaScript">
<!--
var clicktime = 0; //防止多次的点击
var i;
var j;
var tid;
var canvas1;
var ctx;
var begintime;
var team1 = new Image();
team1.src = "1.jpg";
var team2 = new Image();
team2.src = "2.jpg";
var team3 = new Image();
team3.src = "3.jpg";
var team4 = new Image();
team4.src = "4.jpg";
var pointx; //
var pointy; //
var FIRST = true;
var myarray = new Array();
myarray[0]= new Array();
myarray[1]= new Array();
var imagearray = new Array();
imagearray[0]= new Array();
imagearray[1]= new Array();
function textDraw(sample,ctx,font,x,y,fill){
var text = sample;
ctx.font = font;
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
if(fill){
ctx.fillStyle = "#ccc";
ctx.fillText(text,x,y);
}else{
ctx.strokeStyle = "#666";
ctx.strokeText(text,x,y);
}
}
//游戏开始的随机化方法
function randommethod()
{
var times1 = 0;
var times2 = 0;
var times3 = 0;
var times4 = 0;
var total = 0;
for(;total<4;total++)
{
var ch = 1+Math.floor(Math.random()*4);
if( ch == 1 && times1 <2 ){times1++;myarray[0][total] = ch;}
else if( ch == 2 && times2 <2 ){times2++;myarray[0][total] = ch;}
else if( ch == 3 && times3 <2 ){times3++;myarray[0][total] = ch;}
else if( ch == 4 && times4 <2 ){times4++;myarray[0][total] = ch;}
else total--;
}
total = 0;
for(;total<4;total++)
{
var ch = 1+Math.floor(Math.random()*4);
if( ch == 1 && times1 <2 ){times1++;myarray[1][total] = ch;}
else if( ch == 2 && times2 <2 ){times2++;myarray[1][total] = ch;}
else if( ch == 3 && times3 <2 ){times3++;myarray[1][total] = ch;}
else if( ch == 4 && times4 <2 ){times4++;myarray[1][total] = ch;}
else total--;
}
}
function calculatetime()
{
var l;
var m;
var num = 0;
for(l=0;l<2;l++)
for(m=0;m<4;m++)
num += !myarray[l][m];
if(num == 8){clearInterval(tid);alert("GOOD JOB!");return;}
var endtime = new Date();
var difftime = endtime - begintime;
var seconds = Math.floor(difftime/1000+0.5);
ctx.clearRect(990,150,120,200);
textDraw(seconds,ctx,"bold 35px comic sans ms",1050,200,true);
}
//初始化游戏的设置
function myinit()
{
begintime = new Date();
tid = setInterval(calculatetime,1000,false);
canvas1 = document.getElementById('canvas');
ctx = canvas1.getContext('2d');
textDraw("TIMES:",ctx,"bold 35px comic sans ms",920,200,false);
FIRST = true;
clicktime = 0;
var i;
var j;
randommethod();
for(i = 0; i < 2; i++)
for(j = 0; j < 4; j++)
{
var lgt = ctx.createLinearGradient(50+200*j,50+200*i,200+200*j,200+200*i);
lgt.addColorStop("0","magenta");
lgt.addColorStop(".50","green");
lgt.addColorStop("1.0","red");
ctx.fillStyle = lgt;
ctx.fillRect(50+200*j,50+200*i,150,150);
}
for(i = 0; i < 2; i++)
for(j = 0; j < 4; j++)
{
if(myarray[i][j] == 1)imagearray[i][j] = team1;
else if(myarray[i][j] == 2)imagearray[i][j] = team2;
else if(myarray[i][j] == 3)imagearray[i][j] = team3;
else if(myarray[i][j] == 4)imagearray[i][j] = team4;
}
canvas1.addEventListener('mousedown',check,false);
}
function docheck()
{
FIRST = true;
if(myarray[pointx][pointy] != myarray[j][i]){
var lgt = ctx.createLinearGradient(50+200*i,50+200*j,200+200*i,200+200*j);
lgt.addColorStop("0","magenta");
lgt.addColorStop(".50","green");
lgt.addColorStop("1.0","red");
ctx.fillStyle = lgt;
ctx.fillRect(50+200*i,50+200*j,150,150);
var llgt = ctx.createLinearGradient(50+200*pointy,50+200*pointx,200+200*pointy,200+200*pointx);
llgt.addColorStop("0","magenta");
llgt.addColorStop(".50","green");
llgt.addColorStop("1.0","red");
ctx.fillStyle = llgt;
ctx.fillRect(50+200*pointy,50+200*pointx,150,150);
}
else {
myarray[pointx][pointy] = 0;
myarray[j][i] = 0;
ctx.clearRect(50+200*i,50+200*j,150,150);
ctx.clearRect(50+200*pointy,50+200*pointx,150,150);
}
clicktime = 0;
}
function check(ev)
{
clicktime++;
if(clicktime > 2)return;
var mx;
var my;
if(ev.layerX || ev.layerX == 0){
mx = ev.layerX;
my = ev.layerY;}
else if(ev.offsetX || ev.offsetX == 0){
mx = ev.offsetX;
my = ev.offsetY;}
if(mx >= 50 && mx <= 200) i = 0;
else if(mx >= 250 && mx <= 400) i =1;
else if(mx >= 450 && mx <= 600) i =2;
else if(mx >= 650 && mx <=800) i =3;
if(my>=50 && my<=200) j = 0;
else if(my>= 250 && my<=400) j=1;
if(myarray[j][i]==0 || (j == pointx && i == pointy)){clicktime -- ;return;}
ctx.drawImage(imagearray[j][i],50+200*i,50+200*j,150,150);
if(FIRST){
pointx = j;
pointy = i;
FIRST = false;
}
else {
setTimeout(docheck,1000);
}
}
//-->
</script>
</head>
<body onload = "myinit();">
<canvas id = "canvas" name = "canvass" width = "1100" height = "400"></canvas><hr>
<form name="form1" id = "form1" >
<input type= "button" value = "重新开始" onclick = "myinit();">
</form>
<h3><em>规则:</em></h3>
<h5>简单的连连看</h5>
</body>
</html>