用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()); } );}
添加至收藏夹