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

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

时间: 2014-09-23

使用Javascript写的2048小游戏

最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri

12个非常有创意的JavaScript小游戏

这里是12个非常有创意的JavaScript小游戏,希望在给我们带来趣味的同时也能更进一步地了解更深层次的JavaScript语言,原来它可以这样的. Browser Pong Twitch Browser Ball Crystal Galazy Video & Picture Puzzle Apophis 2029 Bing-Bong Bomberman Bunny Hunt Real world racer JS Wars Berts Breakdown via:12 Amazing and

JS实现的走迷宫小游戏完整实例

本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

JS小游戏之宇宙战机源码详解

本文实例讲述了JS小游戏的宇宙战机源码,分享给大家供大家参考.具体介绍如下: 一.游戏介绍: 这是一款飞行射击游戏,纵向,共六关. 二.游戏需求: 1.战机可发射子弹,子弹可通过获取道具升级. 2.战机可放bomb,可获取道具增加数量. 3.战机可蓄力攻击. 4.道具有三种,分别是升级子弹,增加bomb数量,增加战机数量. 5.每关音乐不同. 6.战机被击落后再进入战场,有保护状态. 7.敌机AI设计. 游戏运行如下图所示: 完整实例代码点击此处本站下载. 三.Javascript源码部分: /

纯javascript模仿微信打飞机小游戏

七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

js实现打地鼠小游戏

话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {

js实现九宫格拼图小游戏

效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100

JS小游戏之象棋暗棋源码详解

本文实例讲述了JS小游戏的象棋暗棋源码,分享给大家供大家参考.具体如下: 游戏运行后如下图所示: Javascript 部分: /** chinese chess * Author: fdipzone * Date: 2012-06-24 * Ver: 1.0 */ var gameimg = ['images/a1.gif','images/a2.gif','images/a3.gif','images/a4.gif','images/a5.gif','images/a6.gif','imag

JavaScript编写连连看小游戏

天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果图: 写连连看之前要先考虑哪些呢? 1:如何判断两个元素可以连接呢, 刚刚开始的时候我也纳闷, 可以参考这里:打开: 2:模板引擎怎么选择呢, 我用了底线库的template,因为语法简单. 本来想用Handlebars,但是这个有点大啊, 而且底线库也提供很多常用工具方法( •̀ ω •́ )y:

分享自己用JS做的扫雷小游戏

引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /

JavaScript打字小游戏代码

功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images

js猜数字小游戏的简单实现代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

Java如何获取一个随机数 Java猜数字小游戏

本文实例为大家分享了Java获取一个随机数(及猜数字小游戏)的具体代码,供大家参考,具体内容如下 Math类概述: 该类Math包含用于执行基本数值运算的方法,例如基本指数,对数,平方根和三角函数. Math所有类都是静态的.可以直接类名.调用. 获取随机数的办法: 代码如下 public class SuiJi { public static void main(String[] args) { double d = Math.random(); System.out.println(d);

JS实现网页端猜数字小游戏

本文实例为大家分享了JS实现网页端猜数字游戏的具体代码,供大家参考,具体内容如下 题目描述 电脑产生一个0到100之间的随机数字,并且要求用户来猜,如果用户猜的数字比这个数字大,电脑会提示"太大",否则会提示"太小",当用户正好猜中,电脑会提示"恭喜你猜对了,这个数是-".在用户每次猜测之后,程序会输出用户第几次猜测.如果用户输入的根本不是一个数字,程序会告诉用户输入无效 代码实现 <!DOCTYPE html> <html&g

Java编写猜数字小游戏

本文实例讲述了java实现的简单猜数字游戏代码.分享给大家供大家参考. 以下是Java语言写的一个猜数字小游戏引用片段: import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanner; //主函数 public class calssOne { public static void main(String[] args) { //shit+Ctrl+o int result; //随机产生一个

linux实现猜数字小游戏源码

一个简单的linux猜数字小游戏源码 游戏规则: 猜数字游戏通常由两个人玩,一方出数字,一方猜.出数字的人要想好一个没有重复数字的 4 个数,不能让猜的人知道.猜的人就可以开始猜.每猜一个数字,出数者就要根据这个数字给出几 A 几 B,其中 A 前面的数字表示位置正确的数的个数,而 B 前的数字表示数字正确而位置不对的数的个数.如正确答案为 5234,而猜的人猜 5346,则是 1A2B,其中有一个 5 的位置对了,记为 1A,而 3 和 4 这两个数字对了,而位置没对,因此记为 2B,合起来就

go语言实现猜数字小游戏的方法

本文实例讲述了go语言实现猜数字小游戏的方法.分享给大家供大家参考.具体分析如下: 随机生成一个数字,输入一个数字看是否匹对,匹配则结速,反之提示是大了还是小了 复制代码 代码如下: package main import (     "bufio"     "fmt"     "math/rand"     "os"     "strconv"     "time" ) var (  

python编写猜数字小游戏

本文实例为大家分享了python编写猜数字小游戏的具体代码,供大家参考,具体内容如下 import random secret = random.randint(1, 30) guess = 0 tries = 0 print("我叫丁丁,我有一个秘密数字!") print("数字从1到30,你只有6次机会!") while int(guess) != secret and tries < 6: print("你猜的数字是?") guess

java猜数字小游戏案例

本文实例为大家分享了java猜数字小游戏案例,供大家参考,具体内容如下 package day08; import java.util.Scanner; public class GuessNumber { /** * 猜数字小游戏:. 需求: 随机产生一个整数数1-100(被猜数)不设置输出 * 键盘录入一个玩家要猜的数字 * 判断猜大还是猜小了或者猜中 */ public static void main(String[] args) { // 随机产生整数1-100 int number

java学习之猜数字小游戏

今天主要学习了一些初级的设计,完成了这个猜数字的小游戏,其是也算不上是什么游戏,因为我答案都给出来了.当然也是想对代码更加熟练的操作,让自己能够得心应手. 这个小程序中让我花了点时间的主要是那个如何去重的问题,当时也是思考良久,后来才考虑到使用死循环让随机数产生直到不重复为止,其他感觉也还好. import java.util.Scanner; public class GuessingGames { public static void main(String[] args) { Scanne

C语言实现的猜数字小游戏

本文实例为大家分享了C语言实现猜数字小游戏的具体代码,供大家参考,具体内容如下 代码如下 #include <stdio.h> #include<stdlib.h> #include<time.h> //rand为产生随机数的函数 void game() { srand((unsigned)time(NULL)); int key = (int)rand() % 100; //产生一个1---100之间的数 int ret = 0; while (1) { printf