JS小游戏之仙剑翻牌源码详解

本文实例讲述了JS小游戏的仙剑翻牌源码，是一款非常优秀的游戏源码。分享给大家供大家参考。具体如下：
一、游戏介绍:
这是一个翻牌配对游戏，共十关。
1.游戏随机从42张牌中抽取9张进行游戏，每组为2张相同的牌，共18张牌。
2.连续翻到两张相同的为胜利，当9组全部翻到则过关。如不是翻到连续两张相同的，则需要重新翻。
3.游戏共有10关，在规定时间内通过为挑战成功。
4.如果某关在规定时间内没有通过，则会从当前关继续游戏。
5.游戏中的卡牌图片与音乐均为大宇公司所有。
6.需要支持html5的浏览器，chrome与firefox效果最好。
游戏图片：

完整实例代码点击此处本站下载。
二、Javascript部分：

/** 仙剑翻牌游戏*Date:2013-02-24*Author: fdipzone*Ver 1.0*/window.onload = function（）{var gameimg = ["images/start.png", "images/success.png","images/fail.png","images/clear.png","images/cardbg.jpg","images/sword.png" ];for（var i=1; i<=card.get_total（）; i++）{gameimg.push（"images/card" + i + ".jpg"）;}var callback = function（）{card.init（）;}img_preload（gameimg, callback）;}/** card class */var card = （function（total,cardnum）{var gametime = [0,65,60,55,50,45,40,35,30,25,20]; // 每关的游戏时间var turntime = 8; // 观看牌时间var level = 1;// 当前关卡var carddata = [];// 记录牌的数据var leveldata = [];// 当前关卡牌数据var is_lock = 0; // 是否锁定var is_over = 0; // 游戏结束var first = -1;// 第一次翻开的卡var matchnum = 0; // 配对成功次数// 初始化init = function（）{tips（"show"）;$（"startgame"）.onclick = function（）{tips（"hide"）;start（）;}}// 开始游戏start = function（）{reset（）;create（cardnum）;show（）;var curtime = turntime;setHtml（"livetime", curtime）;var et = setInterval（function（）{if（curtime==0）{clearInterval（et）;turnall（）;set_event（）;message（"start", process）;return ;}if（curtime==turntime）{turnall（）;}curtime--;setHtml（"livetime", curtime）;}, 1000）}// 随机抽取N张牌create = function（n）{carddata = [];leveldata = [];// 创建所有牌for（var i=1; i<=total; i++）{carddata.push（i）;}// 抽取牌for（var i=0; i<n; i++）{var curcard = carddata.splice（Math.random（）*carddata.length, 1）.pop（）;leveldata.push（{"cardno":curcard,"turn":0}, {"cardno":curcard,"turn":0}）;}// 生成随机顺序游戏牌leveldata = shuffle（leveldata）;}// 生成牌show = function（）{var cardhtml = "";for（var i=0; i<leveldata.length; i++）{cardhtml += "<div class="cardplane">";cardhtml += "<div class="card viewport-flip" id="card" + i + "">";cardhtml += "<div class="list flip out"><img src="images/card" + leveldata[i]["cardno"] + ".jpg"></div>";cardhtml += "<div class="list flip"><img src="images/cardbg.jpg"></div>";cardhtml += "</div>";cardhtml += "</div>";}setHtml（"gameplane", cardhtml）;}// 全部翻转turnall = function（）{for（var i=0; i<leveldata.length; i++）{turn_animate（i）;}}// 翻转动画turn_animate = function（key）{var obj = $_tag（"div", "card" + key）;var cardfont, cardback;if（getClass（obj[0]）.indexOf（"out"）！=-1）{cardfont = obj[0];cardback = obj[1];}else{cardfont = obj[1];cardback = obj[0];}setClass（cardback, "list flip out"）;var et = setTimeout（function（）{setClass（cardfont, "list flip in"）;}, 225）;}// 设置点击事件set_event = function（）{var o = $_tag（"div", "gameplane"）;for（var i=0,count=o.length; i<count; i++）{if（getClass（o[i]）=="card viewport-flip"）{o[i].onclick = function（）{turn（this.id）;}}}}// 计时开始process = function（）{is_lock = 0;var curtime = gametime[level];setHtml（"livetime", curtime）;var et = setInterval（function（）{if（matchnum==cardnum）{clearInterval（et）;return ;}curtime--;setHtml（"livetime", curtime）;if（curtime==0）{clearInterval（et）;is_over = 1;message（"fail", start）;}}, 1000）;}// 游戏讯息动画message = function（type, callback）{is_lock = 1;var message = $（"message"）;var processed = 0;var opacity = 0;var soundtime = {"start": 1500,"success": 4000,"fail": 6000,"clear": 4000};disp（"message","show"）;setClass（message,"message_" + type）;setOpacity（message, opacity）;setPosition（message, "left", 0）;setPosition（message, "top", 390）;if（type=="start"）{bgsound（type, true）;}else{bgsound（type）;}var et = setInterval（function（）{var message_left = getPosition（message,"left"）;processed = processed + 25;if（processed>=500 && processed<=750）{opacity = opacity+10;setPosition（message, "left", message_left + 30）;setOpacity（message, opacity）;}else if（processed>=soundtime[type] && processed<=soundtime[type]+250）{opacity = opacity-10;setPosition（message, "left", message_left + 35）;setOpacity（message, opacity）;}else if（processed>soundtime[type]+250）{disp（"message","hide"）;clearInterval（et）;if（typeof（callback）！="undefined"）{callback（）;}}},25）;}// 翻牌turn = function（id）{if（is_lock==1）{return ;}var key = parseInt（id.replace（"card",""））;if（leveldata[key]["turn"]==0）{ // 未翻开if（first==-1）{ // 第一次翻turn_animate（key）;first = key;leveldata[key]["turn"] = 1;}else{ // 第二次翻turn_animate（key）;leveldata[key]["turn"] = 1;check_turn（key）;}}}// 检查是否翻牌成功check_turn = function（key）{is_lock = 1;if（leveldata[first]["cardno"]==leveldata[key]["cardno"]）{ // 配对成功matchnum ++;if（matchnum==cardnum）{var et = setTimeout（function（）{message（"success", levelup）;}, 225）;}first = -1;is_lock = 0;}else{ // 配对失败,将翻开的牌翻转var et = setTimeout（function（）{turn_animate（first）;leveldata[first]["turn"] = 0;turn_animate（key）;leveldata[key]["turn"] = 0;first = -1;if（is_over==0）{is_lock = 0;}}, 300）;}}// 过关levelup = function（）{if（level<gametime.length-1）{level ++;setHtml（"level", level）;start（）;}else{clear（）;}}// 全部通关clear = function（）{level = 1;disp（"levelplane","hide"）;disp（"process", "hide"）;setHtml（"gameplane",""）;message（"clear",init）;}// 音乐播放bgsound = function（file, loop）{var id = "audioplayer";if（typeof（file）！="undefined"）{if（typeof（loop）=="undefined"）{loop = false;}var audiofile = [];audiofile["mp3"] = "music/" + file + ".mp3";audiofile["ogg"] = "music/" + file + ".ogg";audioplayer（id, audiofile, loop）;}else{audioplayer（id）;}}// 游戏玩法tips = function（type）{disp（"tips", type）;}// 获取牌总数get_total = function（）{return total;}// 重置参数reset = function（）{disp（"levelplane","show"）;setHtml（"level", level）;disp（"process", "show"）;setHtml（"livetime", ""）;setHtml（"gameplane", ""）;is_lock = 1;is_over = 0;first = -1;matchnum = 0;}return this;}）（42,9）;

相信本文所述对大家javascript游戏设计的学习有一定的借鉴价值。