zoukankan      html  css  js  c++  java
  • 使用jquery类库编写的强手棋小游戏


    用js写的小游戏,使用了jquery类库./Files/xhan/game.rar
    game.js
    $(
      
    function()
      
    {
          initTable();
    //初始化表格颜色
          window.playerA=new Player(0,"A","playerA");//初始化玩家A的初始位置,名字,和,样式信息
          window.playerB=new Player(0,"B","playerB");//初始化玩家B的初始位置,名字,和,样式信息
          window.currentPlayer=  window.playerA;//设定A为初始当前的玩家
          showPlayerMessage();//在界面上显示玩家的信息
          $("#rollButton").click(rollButton_click);//绑定投掷骰子按钮的click事件处理函数
      }

     );

    function rollButton_click()
    {
        
    //如果当前用户是A,玩家A开始掷骰子。然后将当前玩家设为B
        if(window.currentPlayer==window.playerA)
        
    {
            doRoll(window.currentPlayer);
            window.currentPlayer
    = window.playerB;
            
    return;
        }

         
    //如果当前用户是B,玩家B开始掷骰子。然后将当前玩家设为A
        if(window.currentPlayer==window.playerB)
        
    {
            doRoll(window.currentPlayer);
            window.currentPlayer
    = window.playerA;
            
    return;
        }

    }

    function doRoll(player)
    {
        
    var startPanel=player.currentPanel;//获取开始动画的面板编号
        var diceNumber=rollDice();//获取投掷骰子的点数
        var endPanel=startPanel+diceNumber;//计算动画结束的面板标号
        player.currentPanel=endPanel;//更新玩家的当前点数
        
        showDiceNumber(diceNumber);
    //在页面显示骰子点数
        showPlayerMessage();//更新页面玩家的信息
        goNextPanel(startPanel,endPanel,null,player);//开始动画
    }

    //在页面上显示玩家前进后退动画函数
    function goNextPanel(startPanel,endPanel,hoveredPanel,player)
    {

        
    //如果上一个经过的面板编号不空就清除前面的样式
        if(hoveredPanel!=null)
        
    {
            $(
    "#"+hoveredPanel).removeClass(player.cssClass);
            $(
    "#"+hoveredPanel).removeClass("bothPlayer");
        }

        
    //设定当前经过的面板的样式
        $("#"+startPanel).addClass(player.cssClass);
        
    //如何是前进的话,获取下一个要经过面板的编号
        if(startPanel<endPanel)
        
    {
            nextStartPanel
    =startPanel+1;
        }

        
    else if(startPanel>endPanel)//如果是要后退的话获取下一个要经过面板的编号
        {
            nextStartPanel
    =startPanel-1;
        }

        
    else//已经走到结束面板
        {
            trap(endPanel,player);
    //应用陷阱规则
            reward(endPanel,player);//应用奖励规则
            if(isABSame())//如果a,b同一面板设定面板样式为bothPlayer
            {
                $(
    "#"+endPanel).addClass("bothPlayer");
            }

            showPlayerMessage();
    //显示用户信息
            return;
        }

        
    if(isWin(startPanel))//如果走到终点结束动画提示成功!
        {
            alert(player.name
    +" ,you win!");
            clearTimeout(t);
    //清除定时触发器
            return;
        }

        
    //在指定毫秒数后递归调用动画函数向下一个面板移动
        t=window.setTimeout(function(){goNextPanel(nextStartPanel,endPanel,startPanel,player)},500);
    }

    //显示玩家信息函数
    function showPlayerMessage()
    {
        $(
    "#playerA").text("A当前点数:"+window.playerA.currentPanel);
        $(
    "#playerB").text("B当前点数:"+window.playerB.currentPanel);
        $(
    "#currentPlayer").text("当前玩家:"+window.currentPlayer.name);
    }

    //设定陷阱规则函数
    function trap(panel,player)
    {
        
    if(panel==8)
        
    {
            doTrap(panel,player,
    2);
        }

        
    if(panel==4)
        
    {
            doTrap(panel,player,
    1);
        }

    }

    //运行陷阱函数
    function doTrap(panel,player,count)
    {
            alert(
    "哈哈,被炸退"+count+"格!");
            
    var endPanel=panel-count;
            player.currentPanel
    =endPanel;
            
            showPlayerMessage();
            goNextPanel(panel,endPanel,
    null,player);
    }

    //设定奖励规则函数
    function reward(panel,player)
    {
        
    if(panel==18)
        
    {
            doReward(panel,player,
    3);
        }

        
    if(panel==30)
        
    {
            doReward(panel,player,
    4);
        }

    }

    //运行奖励函数
    function doReward(panel,player,count)
    {
            alert(
    "恭喜,前进"+count+"格!");
            
    var endPanel=panel+count;
            player.currentPanel
    =endPanel;
            
            showPlayerMessage();
            goNextPanel(panel,endPanel,
    null,player);
            
    }

    //判断是否玩家已经赢了
    function isWin(panel)
    {
        
    if(panel==48)
        
    {
            
    return true;
        }

        
    else
        
    {
            
    return false;
        }

    }

    //显示投掷骰子点数
    function showDiceNumber(number)
    {
        $(
    "#diceNumber").text(number);
    }

    //判断A,B是否在同一面板
    function isABSame()
    {
            
    if(window.playerA.currentPanel==window.playerB.currentPanel)
            
    {
                
    return true;
            }

            
    else
            
    {
                
    return false;
            }

    }

    //玩家构造函数。每个玩家对象包含当前面板属性,名字,和样式属性
    function Player(startPanel,name,cssClass)
    {
        
    this.currentPanel=startPanel;
        
    this.name=name;
        
    this.cssClass=cssClass;
    }

    //获取骰子的随机点数函数
    function rollDice()
    {
        
    return parseInt(Math.random()*6+1);
    }

    //获取随机颜色值的字符串
    function getRandomColor()
    {
        
    var str = "0123456789abcdef";
        
    var colorString = "#";
        
    for(j=0;j<6;j++)
        
    {
            colorString 
    = colorString+ str.charAt(Math.random()*str.length);
        }
     
        
    return colorString;
    }

    //初始化表格颜色
    function initTable()
    {
       
    //遍历所有td(面板)将每个单元格的背景色设定一个随机的颜色
        $("td").each(
            
    function()
            
    {
                $(
    this).css("background-color",getRandomColor());
            }

        );
    }


  • 相关阅读:
    机器学习作业(八)异常检测与推荐系统——Matlab实现
    机器学习笔记(九)异常检测与推荐系统
    Coursera 吴恩达 机器学习 学习笔记
    机器学习作业(七)非监督学习——Matlab实现
    机器学习笔记(八)非监督学习

    希尔排序
    霍纳算法的散列函数
    javascript判断给定字符串是否是回文
    JavaScript链表
  • 原文地址:https://www.cnblogs.com/xhan/p/1206255.html
Copyright © 2011-2022 走看看