翻牌游戏
技术点:
1.html
2.CSS
3.javascript
效果分析:
1.整个项目的背景颜色为#999999;
2.页面显示为3*10的表格;
3.表格居于窗口的中间;
4.表格有个标题“找相同牌游戏”,位于表格中间;
5.表格中所有的单元格插入相同图片作为背景图。
功能分析:
1.页面运行时,所有的牌处于背面显示状态;
2.如果翻的第一张和第二张不一样时,两张牌自动返回背面显示状态;如果一致,则同时显示数字,然后继续翻牌;
3.所有的牌都显示完毕后,弹出一个窗口,显示“用时累计”
第一部分
HTML制表格
<table border="1px" cellpadding="0" cellspacing="1">
<caption><h2 size="13px">找 相 同 游 戏</h2></caption>
<tr>
<td><img src="img/img0.jpg" id="img0" οnclick="fanpai(0)"/></td>
<td><img src="img/img0.jpg" id="img1" οnclick="fanpai(1)"/></td>
<td><img src="img/img0.jpg" id="img2" οnclick="fanpai(2)"/></td>
<td><img src="img/img0.jpg" id="img3" οnclick="fanpai(3)"/></td>
<td><img src="img/img0.jpg" id="img4" οnclick="fanpai(4)"/></td>
<td><img src="img/img0.jpg" id="img5" οnclick="fanpai(5)"/></td>
<td><img src="img/img0.jpg" id="img6" οnclick="fanpai(6)"/></td>
<td><img src="img/img0.jpg" id="img7" οnclick="fanpai(7)"/></td>
<td><img src="img/img0.jpg" id="img8" οnclick="fanpai(8)"/></td>
<td><img src="img/img0.jpg" id="img9" οnclick="fanpai(9)"/></td>
</tr>
<tr>
<td><img src="img/img0.jpg" id="img10" οnclick="fanpai(10)"/></td>
<td><img src="img/img0.jpg" id="img11" οnclick="fanpai(11)"/></td>
<td><img src="img/img0.jpg" id="img12" οnclick="fanpai(12)"/></td>
<td><img src="img/img0.jpg" id="img13" οnclick="fanpai(13)"/></td>
<td><img src="img/img0.jpg" id="img14" οnclick="fanpai(14)"/></td>
<td><img src="img/img0.jpg" id="img15" οnclick="fanpai(15)"/></td>
<td><img src="img/img0.jpg" id="img16" οnclick="fanpai(16)"/></td>
<td><img src="img/img0.jpg" id="img17" οnclick="fanpai(17)"/></td>
<td><img src="img/img0.jpg" id="img18" οnclick="fanpai(18)"/></td>
<td><img src="img/img0.jpg" id="img19" οnclick="fanpai(19)"/></td>
</tr>
<tr>
<td><img src="img/img0.jpg" id="img20" οnclick="fanpai(20)"/></td>
<td><img src="img/img0.jpg" id="img21" οnclick="fanpai(21)"/></td>
<td><img src="img/img0.jpg" id="img22" οnclick="fanpai(22)"/></td>
<td><img src="img/img0.jpg" id="img23" οnclick="fanpai(23)"/></td>
<td><img src="img/img0.jpg" id="img24" οnclick="fanpai(24)"/></td>
<td><img src="img/img0.jpg" id="img25" οnclick="fanpai(25)"/></td>
<td><img src="img/img0.jpg" id="img26" οnclick="fanpai(26)"/></td>
<td><img src="img/img0.jpg" id="img27" οnclick="fanpai(27)"/></td>
<td><img src="img/img0.jpg" id="img28" οnclick="fanpai(28)"/></td>
<td><img src="img/img0.jpg" id="img29" οnclick="fanpai(29)"/></td>
</tr>
</table>
CSS部分设计
<style type="text/css">
table{
border: 1px solid yellow;
width: 1200px;
height: 450px;
}
td{
width: 120px;
height:150px;
}
img{
width: 120px;
height: 150px;
}
</style>
功能实现
1.触发翻牌事件:
(1)翻第一张牌;(2)翻第二张牌;
2.盖牌,再接着翻第一张牌
3.检查牌翻完成功与否
4.洗牌
JS部分代码:
<script type="text/javascript">
var pai=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15];
var flag=false;
var oneid=-1;
var index=0;
function fanpai(id){
if(pai[id]==-1){return;}
document.getElementById("img"+id).src="img/"+pai[id]+".jpg";
if(flag){//翻第2张
if(pai[id]==pai[oneid]){pai[id]=-1;pai[oneid]=-1;}
else{setTimeout("koupai("+id+","+oneid+")",100);}
oneid=-1;
flag=false;
}
else{//翻第1张
oneid=id;
flag=true;
}
checkSuccess();
}
//每次载入页面进行重新洗牌
function xipai(){
var a,b,temp;
for(var i=0;i<30;i++){
var a=Math.floor(Math.random()*30);
var b=Math.floor(Math.random()*30);
temp=pai[a];
pai[a]=pai[b];
pai[b]=temp;
}
}
//第一次与第二次不相同,扣住两张牌
function koupai(id,oneid){
document.getElementById("img"+id).src="img/img0.jpg";
document.getElementById("img"+oneid).src="img/img0.jpg";
}
//每次翻完两张相同的后,检验是否全部成功翻开
function checkSuccess(){
for(var i=0;i<30;i++){
if(pai[i]!=-1)
return;
}
alert("Hello 恭喜,恭喜!!!你赢了!!!");
location.reload();
}
xipai();
附加显示时间
function showTime(){
var today=new Date();
var year=today.getFullYear();//获得年
var month=today.getMonth()+1;//获得月
var day=today.getDate();//获得日
var hh=today.getHours();//获得小时
var mm=today.getMinutes();//获得分钟
var ss=today.getSeconds();//获得秒
document.getElementById("mycolock").innerHTML=year+"年"+month+"月"+day+"日"+hh+":"+mm+":"+ss;
}
window.setInterval("showTime()",1000);//每隔1秒取一次当前的时间
window.οnlοad=showTiwanwme;
运行效果展示:
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="img/test.jpg" rel="icon" sizes="any" type="image/x-icon" />
<title>找相同游戏</title>
<style type="text/css">
table{
border: 1px solid yellow;
width: 1200px;
height: 450px;
}
td{
width: 120px;
height:150px;
}
img{
width: 120px;
height: 150px;
}
</style>
</head>
<body bgcolor="#999999">
<center>
<table border="1px" cellpadding="0" cellspacing="1">
<caption><h2 size="13px">找 相 同 游 戏</h2></caption>
<tr>
<td><img src="img/img0.jpg" id="img0" οnclick="fanpai(0)"/></td>
<td><img src="img/img0.jpg" id="img1" οnclick="fanpai(1)"/></td>
<td><img src="img/img0.jpg" id="img2" οnclick="fanpai(2)"/></td>
<td><img src="img/img0.jpg" id="img3" οnclick="fanpai(3)"/></td>
<td><img src="img/img0.jpg" id="img4" οnclick="fanpai(4)"/></td>
<td><img src="img/img0.jpg" id="img5" οnclick="fanpai(5)"/></td>
<td><img src="img/img0.jpg" id="img6" οnclick="fanpai(6)"/></td>
<td><img src="img/img0.jpg" id="img7" οnclick="fanpai(7)"/></td>
<td><img src="img/img0.jpg" id="img8" οnclick="fanpai(8)"/></td>
<td><img src="img/img0.jpg" id="img9" οnclick="fanpai(9)"/></td>
</tr>
<tr>
<td><img src="img/img0.jpg" id="img10" οnclick="fanpai(10)"/></td>
<td><img src="img/img0.jpg" id="img11" οnclick="fanpai(11)"/></td>
<td><img src="img/img0.jpg" id="img12" οnclick="fanpai(12)"/></td>
<td><img src="img/img0.jpg" id="img13" οnclick="fanpai(13)"/></td>
<td><img src="img/img0.jpg" id="img14" οnclick="fanpai(14)"/></td>
<td><img src="img/img0.jpg" id="img15" οnclick="fanpai(15)"/></td>
<td><img src="img/img0.jpg" id="img16" οnclick="fanpai(16)"/></td>
<td><img src="img/img0.jpg" id="img17" οnclick="fanpai(17)"/></td>
<td><img src="img/img0.jpg" id="img18" οnclick="fanpai(18)"/></td>
<td><img src="img/img0.jpg" id="img19" οnclick="fanpai(19)"/></td>
</tr>
<tr>
<td><img src="img/img0.jpg" id="img20" οnclick="fanpai(20)"/></td>
<td><img src="img/img0.jpg" id="img21" οnclick="fanpai(21)"/></td>
<td><img src="img/img0.jpg" id="img22" οnclick="fanpai(22)"/></td>
<td><img src="img/img0.jpg" id="img23" οnclick="fanpai(23)"/></td>
<td><img src="img/img0.jpg" id="img24" οnclick="fanpai(24)"/></td>
<td><img src="img/img0.jpg" id="img25" οnclick="fanpai(25)"/></td>
<td><img src="img/img0.jpg" id="img26" οnclick="fanpai(26)"/></td>
<td><img src="img/img0.jpg" id="img27" οnclick="fanpai(27)"/></td>
<td><img src="img/img0.jpg" id="img28" οnclick="fanpai(28)"/></td>
<td><img src="img/img0.jpg" id="img29" οnclick="fanpai(29)"/></td>
</tr>
</table>
<br /><br />
<div id="mycolock"></div>
</center>
</body>
<script type="text/javascript">
var pai=[1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15];
var flag=false;
var oneid=-1;
var index=0;
function fanpai(id){
if(pai[id]==-1){return;}
document.getElementById("img"+id).src="img/"+pai[id]+".jpg";
if(flag){//翻第2张
if(pai[id]==pai[oneid]){pai[id]=-1;pai[oneid]=-1;}
else{setTimeout("koupai("+id+","+oneid+")",100);}
oneid=-1;
flag=false;
}
else{//翻第1张
oneid=id;
flag=true;
}
checkSuccess();
}
//每次载入页面进行重新洗牌
function xipai(){
var a,b,temp;
for(var i=0;i<30;i++){
var a=Math.floor(Math.random()*30);
var b=Math.floor(Math.random()*30);
temp=pai[a];
pai[a]=pai[b];
pai[b]=temp;
}
}
//第一次与第二次不相同,扣住两张牌
function koupai(id,oneid){
document.getElementById("img"+id).src="img/img0.jpg";
document.getElementById("img"+oneid).src="img/img0.jpg";
}
//每次翻完两张相同的后,检验是否全部成功翻开
function checkSuccess(){
for(var i=0;i<30;i++){
if(pai[i]!=-1)
return;
}
alert("Hello 恭喜,恭喜!!!你赢了!!!");
location.reload();
}
xipai();
function showTime(){
var today=new Date();
var year=today.getFullYear();//获得年
var month=today.getMonth()+1;//获得月
var day=today.getDate();//获得日
var hh=today.getHours();//获得小时
var mm=today.getMinutes();//获得分钟
var ss=today.getSeconds();//获得秒
document.getElementById("mycolock").innerHTML=year+"年"+month+"月"+day+"日"+hh+":"+mm+":"+ss;
}
window.setInterval("showTime()",1000);//每隔1秒取一次当前的时间
window.οnlοad=showTime;
</script>
</html>