昨日中奖用户

 

请中奖朋友尽快将邮寄地址,姓名和手机在本文后面留言。2天后视为自动放弃。


8.1  扑克翻牌游戏介绍


扑克翻牌游戏就是桌面24张牌,玩家翻到两张相同扑克牌则消去,如果时间2分钟到了,仍然没有成功则游戏失败。扑克翻牌游戏运行结果如图8-1



8.2  程序设计的思路


8.2.1  Html5倒计时功能


Html5倒计时功能可以使用setTimeout()函数或者setInterval()函数来实现。


1.使用setTimeout实现倒计时功能


setTimeout()会在一个指定的延迟时间之后调用一个函数或执行一段指定的代码。它的应用非常广泛,例如我们希望用户在浏览器某个页面一段时间后弹出一个对话框,或者是鼠标单击某个元素后隔几秒钟在删除这个元素。


setTimeout函数语法:


setTimeout(code,millisec)


例如:var t =setTimeout("javascript语句", 毫秒)


setTimeout() 的第一个参数code是含有JavaScript语句的字符串。这个语句可能诸如"alert('5seconds!')",或者对函数的调用,诸如alertMsg()"。第二个参数millisec指示从当前起等待多少毫秒后执行第一个参数code


setTimeout()函数会返回某个值。在上面的语句中,值被储存在名为t的变量中。假如希望取消这个setTimeout(),可以使用clearTimeout(t)来实现。


需要强调的是,setTimeout() 只执行code一次。如果要多次调用,可以让code自身再次调用setTimeout()


例如下面代码调用setTimeout()实现1小时倒计时。


<body>

<div id="timer"></div>

<script type="text/javascript"language="javascript">

var d1=new Date();//年月日时分秒

var d2=d1.getTime()+60*60*1000

var endDate=new Date(d2);

function daoJiShi()

{

var now=new Date();

var oft=Math.round((endDate-now)/1000)

var ofd=parseInt(oft/3600/24);                         //

var ofh=parseInt((oft%(3600*24))/3600);        //小时

var ofm=parseInt((oft%3600)/60);                   //

var ofs=oft%60;                                                //

document.getElementById('timer').innerHTML='还有'+ofd+''+ofh+'小时'+ofm+'分钟'+ofs+'';

if(ofs<0){

document.getElementById('timer').innerHTML='倒计时结束!';return;

};

setTimeout('daoJiShi()',1000);//自身再次调用daoJiShi()

};

daoJiShi();

</script>

</body>


2.使用setInterval实现倒计时功能


setTimeout()只执行代码code一次。如果要多次调用code可以使用setInterval()setInterval ()可按照指定的周期(以毫秒计)来调用需要重复执行的函数代码。


setTimeout函数语法:


setInterval(function,interval[,arg1,arg2,......argn])


其中function参数可以是一个匿名函数或者是一个函数名,interval是设定的调用function的时间间隔,单位为毫秒(默认值为10毫秒),arg1,arg2,......argn为可选参数,是传递给function的参数。


下面的例子每隔1秒调用一次匿名函数。


setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);


这里的function(){}是没有函数名的函数,成为匿名函数,后面的1000是时间间隔,单位是毫秒,即1秒钟。


下面的例子为我们展示如何带参数运行。


function show1(){

   trace("每隔1秒显示一次");

}

function show2(str){                       //带参数函数show2

   trace(str);

}

setInterval(show1,1000);

setInterval(show2,2000,"每隔2秒我就会显示一次");

//调用带参数函数show2 setInterval()会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval(ID)方法的参数。在游戏开发中,常常使用setInterval()制作游戏动画或其他间隔性渲染效果时。

var intervalID = setInterval(show1,1000);

clearInterval(intervalID); //取消该定时设置


例如下面代码用setInterval()实现1小时倒计时。


<body>

<div id="timer"></div>

<script type="text/javascript"language="javascript">

var d1=new Date();//年月日时分秒

var d2=d1.getTime()+60*60*1000

var endDate=new Date(d2);

function daoJiShi()

{

var now=new Date();

var oft=Math.round((endDate-now)/1000);

var ofd=parseInt(oft/3600/24);

var ofh=parseInt((oft%(3600*24))/3600);

var ofm=parseInt((oft%3600)/60);

var ofs=oft%60;

  document.getElementById('timer').innerHTML='还有'+ofd+''+ofh+'小时'+ofm+'分钟'+ofs+'';

if(ofs<0){

   document.getElementById('timer').innerHTML='倒计时结束!';return;

};

};

setInterval('daoJiShi()',1000);//间隔1秒钟调用

</script>

</body>


8.2.2  扑克牌显示与隐藏


游戏中使用的扑克牌牌面及背面采用1张图片(deck.png)存储,如图8-2所示。上面4行分别为4种花色扑克牌,最后一行扑克牌背面,每行高度120px。如何分割显示某一张扑克牌,这里使用CSS3技术实现。


例如想显示扑克牌背面图案如下写CSS类别:


.front

{

    width:80px;    height: 120px;<