JS小游戲之仙劍翻牌源碼詳解
本文實(shí)例講述了JS小游戲的仙劍翻牌源碼,是一款非常優(yōu)秀的游戲源碼。分享給大家供大家參考。具體如下:
一、游戲介紹:
這是一個(gè)翻牌配對(duì)游戲,共十關(guān)。
1.游戲隨機(jī)從42張牌中抽取9張進(jìn)行游戲,每組為2張相同的牌,共18張牌。
2.連續(xù)翻到兩張相同的為勝利,當(dāng)9組全部翻到則過(guò)關(guān)。如不是翻到連續(xù)兩張相同的,則需要重新翻。
3.游戲共有10關(guān),在規(guī)定時(shí)間內(nèi)通過(guò)為挑戰(zhàn)成功。
4.如果某關(guān)在規(guī)定時(shí)間內(nèi)沒(méi)有通過(guò),則會(huì)從當(dāng)前關(guān)繼續(xù)游戲。
5.游戲中的卡牌圖片與音樂(lè)均為大宇公司所有。
6.需要支持html5的瀏覽器,chrome與firefox效果最好。
游戲圖片:


完整實(shí)例代碼點(diǎn)擊此處本站下載。
二、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]; // 每關(guān)的游戲時(shí)間
var turntime = 8; // 觀看牌時(shí)間
var level = 1; // 當(dāng)前關(guān)卡
var carddata = []; // 記錄牌的數(shù)據(jù)
var leveldata = []; // 當(dāng)前關(guān)卡牌數(shù)據(jù)
var is_lock = 0; // 是否鎖定
var is_over = 0; // 游戲結(jié)束
var first = -1; // 第一次翻開(kāi)的卡
var matchnum = 0; // 配對(duì)成功次數(shù)
// 初始化
init = function(){
tips('show');
$('startgame').onclick = function(){
tips('hide');
start();
}
}
// 開(kāi)始游戲
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)
}
// 隨機(jī)抽取N張牌
create = function(n){
carddata = [];
leveldata = [];
// 創(chuàng)建所有牌
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});
}
// 生成隨機(jī)順序游戲牌
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);
}
// 全部翻轉(zhuǎn)
turnall = function(){
for(var i=0; i<leveldata.length; i++){
turn_animate(i);
}
}
// 翻轉(zhuǎn)動(dòng)畫(huà)
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);
}
// 設(shè)置點(diǎn)擊事件
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);
}
}
}
}
// 計(jì)時(shí)開(kāi)始
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);
}
// 游戲訊息動(dòng)畫(huà)
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){ // 未翻開(kāi)
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']){ // 配對(duì)成功
matchnum ++;
if(matchnum==cardnum){
var et = setTimeout(function(){
message('success', levelup);
}, 225);
}
first = -1;
is_lock = 0;
}else{ // 配對(duì)失敗,將翻開(kāi)的牌翻轉(zhuǎn)
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);
}
}
// 過(guò)關(guān)
levelup = function(){
if(level<gametime.length-1){
level ++;
setHtml('level', level);
start();
}else{
clear();
}
}
// 全部通關(guān)
clear = function(){
level = 1;
disp('levelplane','hide');
disp('process', 'hide');
setHtml('gameplane','');
message('clear',init);
}
// 音樂(lè)播放
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);
}
// 獲取牌總數(shù)
get_total = function(){
return total;
}
// 重置參數(shù)
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);
相信本文所述對(duì)大家javascript游戲設(shè)計(jì)的學(xué)習(xí)有一定的借鑒價(jià)值。
相關(guān)文章
layer彈窗在鍵盤按回車將反復(fù)刷新的實(shí)現(xiàn)方法
今天小編就為大家分享一篇layer彈窗在鍵盤按回車將反復(fù)刷新的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS實(shí)現(xiàn)簡(jiǎn)易刻度時(shí)鐘示例代碼
本篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)易刻度時(shí)鐘示例代碼的資料,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2017-03-03
layer彈出層自適應(yīng)高度,垂直水平居中的實(shí)現(xiàn)
今天小編就為大家分享一篇layer彈出層自適應(yīng)高度,垂直水平居中的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS交互點(diǎn)擊WKWebView中的圖片實(shí)現(xiàn)預(yù)覽效果
這篇文章主要介紹了JS交互點(diǎn)擊WKWebView中的圖片實(shí)現(xiàn)預(yù)覽效果,需要的朋友可以參考下2018-01-01
一文帶你理解微信小程序中RPC通信的實(shí)現(xiàn)
在微信小程序開(kāi)發(fā)中,要實(shí)現(xiàn)兩個(gè)線程之間的通信是一項(xiàng)重要的任務(wù),所以本文就來(lái)講講如何使用小程序的?postMessage?和?addListener?API?來(lái)實(shí)現(xiàn)在兩個(gè)線程之間進(jìn)行高效的?RPC?通信吧2023-06-06
JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的文字間歇循環(huán)滾動(dòng)效果,涉及javascript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-02-02
JS構(gòu)建頁(yè)面的DOM節(jié)點(diǎn)結(jié)構(gòu)的實(shí)現(xiàn)代碼
本來(lái)想用json格式的,可是要么有重復(fù),要么得嵌套,所以改用對(duì)象嵌套數(shù)組2011-12-12

