本文实例讲述了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>';cardhtml += '<div>';cardhtml += '<div><img src="images/card' + leveldata[i]['cardno'] + '.jpg"></div>';cardhtml += '<div><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游戏设计的学习有一定的借鉴价值。
新闻热点
疑难解答
图片精选