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

前端技术 2023/09/08 JavaScript

本文实例讲述了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游戏设计的学习有一定的借鉴价值。

本文地址:https://www.stayed.cn/item/23293

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。