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

例如，下面代码调用setTimeout函数实现1小时倒计时。

< body>

< divid= "timer">

< type= "text/java"language= "java">

vard1= newDate; //年月日时分秒

vard2=d1.getTime+ 60* 60* 1000

varendDate= newDate(d2)

functiondaoJiShi( )

{

varnow= newDate; //获取当前时间

//now返回自 1970年1月1日 00:00:00 以来的总毫秒数

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

varofd= parseInt(oft/ 3600/ 24); //天

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

varofm= parseInt((oft% 3600)/ 60); //分

varofs=oft% 60; //秒

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

if(ofs< 0){ document.getElementById( 'timer').innerHTML= '倒计时结束！'; return;};

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

};

daoJiShi;

2．使用setInterval函数实现倒计时功能

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

setInterval函数的语法如下：

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

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

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

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

其中，function{}是没有函数名的函数，称为匿名函数，后面的1000是时间间隔，单位是毫秒，即1秒。

下面的例子用于展示如何带参数运行。

functionshow1{

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

}

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

trace(str);

}

setInterval(show1, 1000);

setInterval(show2, 2000, "每隔2秒我就会显示一次"); //调用带参数函数show2

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

varintervalID=setInterval(show1, 1000);

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

例如，下面代码用setInterval函数实现1小时倒计时。

扑克牌的显示与隐藏

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

■ 图8-2存储扑克牌的图片deck．png

例如，显示扑克牌背面图案可按如下代码写CSS类别。

.front

{

width: 80px; height: 120px;

background-image: url( "../images/deck.png");

background-position: 0- 480px;

z-index: 10;

}

类别．front的背景图片是deck．png，background-position设置背景图片的位置。例如，background-position: 0 0; 表示背景图片的左上角将与容器元素的左上角对应。该设置与background-position: left top; 或者background-position: 0% 0%; 设置的效果是一致的。

而background-position: 0-480px; 表示图片以容器左上角为参考向左偏移0px，向上偏移480px，从而正好是扑克牌背面图片区域。

z-index属性设置元素的堆叠(显示)顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。z-index的值越大，元素的堆叠层级越高。

background简写属性可在一个声明中设置所有的背景属性。可以设置如下属性：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment、background-image。如果不设置其中的某个值，也是允许的。例如：

background: #999url( "../images/deck.png") 0- 480px;

background: #ff0000url( 'smiley.gif');

显示扑克牌牌面图案可按如下代码写CSS类别。

其中：

.cardAJ{background-position:-800px 0;}

background-position: -800px 0; 表示图片以容器左上角为参考向左偏移800px，由于图片中每张牌宽度为80px，所以正好显示出黑桃J。

.cardBJ{background-position:-800px-120px;}

background-position: -800px-120px; 表示图片以容器左上角为参考向左偏移800px，向上偏移120px，所以正好显示出红桃J。

.cardCJ{background-position:-800px-240px;}

background-position: -800px-240px; 表示图片以容器左上角为参考向左偏移800px，向上偏移240px，所以正好显示出梅花J。

.cardDJ{background-position:-800px-360px;}

background-position: -800px-360px; 表示图片以容器左上角为参考向左偏移800px，向上偏移360px，所以正好显示出方块J。

因此， 就能显示出黑桃J，就能显示出红桃J，就能显示出梅花J，就能显示出方块J。同理，可以显示出其他牌的牌面，仅background-position中的偏移量不同。

z-index设置为8，所以牌面显示在扑克牌背面下方，被隐藏。

扑克牌的删除

扑克牌的删除利用设置透明度来实现。

.card-removed/*移除牌*/

{

opacity: 0;

}

opacity: 0设置div的不透明度为0。Opacity取值从0．0(完全透明)到1．0(完全不透明)。也可以使用visibility: hidden来实现，这两个效果都是让元素不显示，但visibility: hidden 是让元素不可见，但仍会占据页面上的空间。

添加删除类别Class

扑克牌的显示、隐藏和删除都是CSS中类别Class。需要将这些类别设置到HTML的标记元素(如 )上，jQuery中的addClass方法用于添加类别Class，而removeClass方法用于删除类别Class。

addClass(className)中的className为一个字符串，为指定元素添加这个className类别。removeClass(className)指定元素移除的一个或多个用空格隔开的样式名或类别。

举例说明：

有一个：

使用jQuery实现，当单击“中原工学院”的时候自动添加class="select"，代码自动变成：

然后，单击“郑州大学”，代码又变成：

jQuery可以用下述代码实现：

jQuery代码中$("a")选择所有的元素，在元素的单击事件中，each方法遍历所有的元素并删除元素上的"select"类别。$(this)代表当前被单击的元素，$(this)．addClass("select")是给当前被单击的元素增加"select"类别。

03

扑克翻牌游戏设计的步骤

设计CSS(matchgame．css)

根据程序设计的思路，设计如下的CSS文件。

body

{

text-align: center;

background-image: url( "../images/bg.jpg");

}

#game

{

width: 502px;

height: 462px;

margin: 0auto;

border: 1pxsolid #666;

border-radius: 10px;

background-image: url( "../images/table.jpg");

position: relative;

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

}

#cards

{

width: 380px;

height: 400px;

position: relative;

margin: 30pxauto;

}

.card

{

width: 80px;

height: 120px;

position: absolute;

}

.face

{

width: 100%;

height: 100%;

border-radius: 10px;

position: absolute;

-webkit- backface-visibility: hidden;

-webkit- transition:all . 3s;

}

.front

{

background: #999url( "../images/deck.png") 0- 480px;

z-index: 10;

}

.back

{

background: #efefefurl( "../images/deck.png");

-webkit- transform-rotateY(-180deg);

z-index: 8;

}

.face:hover

{

-webkit- box-shadow: 0040px#aaa;

}

/*牌面定位样式*/

.cardAJ{ background-position: - 800px0;}

.cardAQ{ background-position: - 880px0;}

.cardAK{ background-position: - 960px0;}

.cardBJ{ background-position: - 800px- 120px;}

.cardBQ{ background-position: - 880px- 120px;}

.cardBK{ background-position: - 960px- 120px;}

.card-flipped.front

{

/*保证牌底在牌面下面，z-index值切换为小值*/

z-index: 8;

-webkit- transform: rotateY( 180deg);

}

.card-flipped.back

{

/*保证牌底在牌面上面，z-index值切换为大值*/

z-index: 10;

/*前面牌面已经翻过去，现在返回来*/

-webkit- transform: rotateY( 0deg);

}

/*移除牌*/

.card-removed

{

opacity: 0;

}

游戏页面index．html

在游戏页面中，整个游戏区域是一个id="cards"的，而每张牌的区域是一个class="card"的，其中含上下层两个，是上层显示牌面，是下层显示牌面。

< divclass= "face front">

< /div>

注意，最初仅仅有1张牌的区域，其余的23张牌的区域是页面加载后复制实现的。页面加载后，首先利用Array．sort方法将deck数组存储的牌随机排序，实现洗牌效果；然后调整CSS坐标属性"left"、"top"，设置每张牌的区域在屏幕上的位置；最后在每张牌的区域中的下层添加类别(如．cardAJ、．cardBJ)就可以显示对应牌面。

< html>

< headlang= "en">

< metacharset= "UTF-8">

< title> html5扑克翻牌消除小游戏

< linkhref= "matchgame.css"rel= "stylesheet">

< body>

< type= "text/java"src= "matchgame.js">

< type= "text/java"src= "jquery-3.3.1.min.js">

< sectionid= "game">

< divid= "cards">

< divclass= "card">

< divclass= "face front">

< divclass= "face back">

< type= "text/java">

$( function( ) {

//实现随机洗牌

matchingGame.deck.sort(shuffle);

//alert(matchingGame.deck);

var$card=$( ".card");

for( vari= 0;i< 23;i++)

{

$card.clone.appendTo($( "#cards"));

}

//对每张牌进行设置

$( ".card").each( function( index)

{

//调整坐标

$( this).css({

"left":(matchingGame.cardWidth+ 20)*(index% 8)+ "px",

"top":(matchingGame.cardHeight+ 20)* Math.floor(index/ 8)+ "px"

});

//吐出一个牌号

varpattern=matchingGame.deck.pop;

//暂存牌号

$( this).data( "pattern",pattern);

//把其翻牌后的对应牌面附加上去

$( this).find( ".back").addClass(pattern);

//点击牌的功能函数挂接

$( this).click(selectCard);

});

});

< divstyle= "text-align:center;margin:50px 0; font:normal 44px/56px ">

< p> 扑克翻牌游戏

< divid= "timer">

< type= "text/java"language= "java">

varsuccess= false;

vard1= newDate; //年月日时分秒

vard2=d1.getTime+ 2* 60* 1000

varendDate= newDate(d2);

functiondaoJiShi( )

{

varnow= newDate; //获取当前时间

//now返回自 1970 年 1 月 1 日 00:00:00 以来的总毫秒数

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

varofd= parseInt(oft/ 3600/ 24);

varofh= parseInt((oft%( 3600* 24))/ 3600);

varofm= parseInt((oft% 3600)/ 60);

varofs=oft% 60;

document.getElementById( 'timer').innerHTML= '还有 '+ofm+ ' 分钟 '+ofs+ ' 秒';

if(success== true) return; //停止计时

if(ofs< 0){

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

if(success== false)alert( '你挑战失败了！');

return;

};

setTimeout( 'daoJiShi', 1000);

};

daoJiShi;

设计脚本

定义存储所有牌的数组deck。

varmatchingGame={};

matchingGame.cardWidth= 80; //牌宽

matchingGame.cardHeight = 120;

//存储所有的牌

matchingGame.deck=

[

"cardAK", "cardAK", "cardAQ", "cardAQ", "cardAJ", "cardAJ",

"cardBK", "cardBK", "cardBQ", "cardBQ", "cardBJ", "cardBJ",

"cardCK", "cardCK", "cardCQ", "cardCQ", "cardCJ", "cardCJ",

"cardDK", "cardDK", "cardDQ", "cardDQ", "cardDJ", "cardDJ"

]

//随机排序函数，返回-1或1

functionshuffle( )

{

//Math.random能返回0~1之间的数

returnMath.random> 0.5? -1: 1

}

单击牌事件的功能函数selectCard，实现翻牌的功能。被翻过的牌都已添加"card-flipped"类别，所以$("．card-flipped")获取所有的翻过牌的，数量超过1则说明已翻了两张牌，不能再翻牌，从而退出翻牌。

若翻动了两张牌，检测是否相同。

functionselectCard( ) { //翻牌功能的实现

var$fcard=$( ".card-flipped");

//翻了两张牌后退出翻牌

if($fcard.length> 1)

{

return;

}

$( this).addClass( "card-flipped");

//若翻动了两张牌，检测一致性

var$fcards=$( ".card-flipped");

if($fcards.length== 2)

{

setTimeout( function( ) {

checkPattern($fcards);}, 700);

}

}

//检测2张牌是否一致

functioncheckPattern( cards)

{

varpattern1 = $(cards[ 0]).data( "pattern"); //第一张牌牌面数据

varpattern2 = $(cards[ 1]).data( "pattern"); //第二张牌牌面数据

$(cards).removeClass( "card-flipped") //删除"card-flipped"类别

if(pattern1==pattern2)

{

$(cards).addClass( "card-removed") //透明效果

var$ fcards=$( ".card-removed");

if($ fcards.length== 24)

{

alert( "恭喜你成功了！")；

succcess= true;

}

}

}

至此，完成扑克翻牌游戏。

04

参考书籍

HTML5网页游戏设计从基础到开发（第2版·微课视频版）

编辑推荐：11个游戏实战案例，提供视频、源代码、教学课件、教学大纲、扩展案例

技术背景

HTML5是 HyperText Markup Language 5 的缩写。HTML5 技术结合了 HTML4.01的相关标准并对其进行革新，符合现代网络发展要求。HTML5是互联网的下一代标准，是构建和呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML5在2014年10月由万维网联盟（W3C）完成标准制定，仍处于完善之中。然而HTML5已经引起了业内的广泛兴趣，Chrome、Firefox、Opera、Safari等主流浏览器都已经支持HTML5技术，新Edge浏览器率先实现100%支持HTML5。

本书作者长期从事HTML5网页设计教学与应用开发，在长期的工作、学习中，积累了丰富经验和教训，能够了解在学习编程的时候需要什么样的书才能提高HTML5开发能力，以最少的时间投入得到最快的实际应用。

本书主要内容

本书分为基础篇和实战篇。

基础篇包括第1~6章，主要讲解HTML5的基础知识和相关新技术，如Java、Canvas API画图、CSS3和jQuery及其使用技巧；

实战篇包括第7~17章，综合应用前面技术，开发经典的大家耳熟能详的游戏，如人物拼图、扑克翻牌、推箱子、五子棋、黑白棋、俄罗斯方块、贪吃蛇、雷电飞机射击、Flappy Bird、中国象棋。通过本书读者将学会如何利用HTML5和Java、CSS3制作交互式游戏、平台类游戏，学会网页游戏设计。

本书特点

(1)内容全面，代码通用。本书所有案例的源代码通用性强，便于读者直接应用于大部分游戏的开发。

(2)理论夯实，案例丰富。每款游戏案例均提供详细的设计思路、关键技术分析以及具体的解决步骤方案，案例实用性强。返回搜狐，查看更多