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());
}
);
}
查看全文
相关阅读:
根据IP定位用户所在城市信息
Laravel根据Ip获取国家,城市信息
基于thinkphp实现根据用户ip判断地理位置并提供对应天气信息的应用
Linux利用OneinStack搭建环境
五大主流浏览器及四大内核1
手机QQ浏览器属于代理服务器吗?
各种浏览器怎么换ip
微信浏览器到底是什么内核?
交谈10要素,
广告行业的大数据处理架构实践
原文地址:https://www.cnblogs.com/xhan/p/1206255.html
最新文章
What is the difference between Gradle Build and Gradle Sync?
What is gradle sync in Android Studio?
Android Studio常用快捷键汇总(mac)
Android中Application类总结
android.intent.action.MAIN 与 android.intent.category.LAUNCHER 的验证理解
Build Tool-自动化构建工具
什么是构建工具
大神所写的深度好文---Gradle 构建工具
Gradle与Makefile构建工具的对比
java中“53”个关键字(含2个保留字)
热门文章
abstract class和interface 抽象类与接口类的区别
JAVA中EXTENDS 与 IMPLEMENT 区别
rxswift-self.usernameTF.rx.text.orEmpty.map
block要用copy修饰,还是用strong
Escaping Closures 两点:本质是生命周期标示符
monad-类型构造与转换器-promise
高阶函数-函数作为参数与函数执行的过程
sqlitManager
php中Session使用方法详解
ip地址库 与浏览器的关系
Copyright © 2011-2022 走看看