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 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP数组函数知识汇总
2016/05/12 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
js使用eval解析json(js中使用json)
2014/01/17 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python命令行解析模块详解
2018/02/01 Python
python实现Windows电脑定时关机
2018/06/20 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python中 map()函数的用法详解
2018/07/10 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
下载官网python并安装的步骤详解
2019/10/12 Python
python怎么自定义捕获错误
2020/06/29 Python
台湾家适得:Homeget
2019/02/11 全球购物
学生打架检讨书大全
2014/01/23 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers