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


Posted in Javascript onSeptember 25, 2014

本文实例讲述了JS小游戏的仙剑翻牌源码,是一款非常优秀的游戏源码。分享给大家供大家参考。具体如下:

一、游戏介绍:

这是一个翻牌配对游戏,共十关。

1.游戏随机从42张牌中抽取9张进行游戏,每组为2张相同的牌,共18张牌。
2.连续翻到两张相同的为胜利,当9组全部翻到则过关。如不是翻到连续两张相同的,则需要重新翻。
3.游戏共有10关,在规定时间内通过为挑战成功。
4.如果某关在规定时间内没有通过,则会从当前关继续游戏。
5.游戏中的卡牌图片与音乐均为大宇公司所有。
6.需要支持html5的浏览器,chrome与firefox效果最好。

游戏图片:

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

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

完整实例代码点击此处本站下载。

二、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游戏设计的学习有一定的借鉴价值。

Javascript 相关文章推荐
js 编写规范
Mar 03 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
解析vue中的$mount
Dec 21 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 #Javascript
JS小游戏之极速快跑源码详解
Sep 25 #Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 #Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 #Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 #Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 #Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 #Javascript
You might like
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python在文本开头插入一行的实例
2018/05/02 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python包和模块的分发详细介绍
2020/06/19 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
制药工程专业毕业生推荐信
2013/12/24 职场文书
体育教师求职信
2014/06/30 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
中学校园广播稿
2015/08/18 职场文书
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技