JavaScript按钮

分享于 

7分钟阅读

Web开发

  繁體

JavaScript Yahtzee

JavaScript Yahtzee

介绍

这里提供的JavaScript代码允许单个用户玩Yahtzee游戏。 游戏非常有用,因为它们不仅集成了有趣的逻辑,而且还激励了一个更好的界面。 这个游戏的乐趣将被设计拙劣的界面所降低。

Yahtzee游戏由十三轮组成,玩家掷五掷骰子。 然后玩家可以选择任何数量的骰子固定( 使用复选框),而它的他骰子重新滚动。 每轮允许两个这样的卷卷;在第二轮滚动后,滚动按钮。 然后玩家必须为圆形(。使用单选按钮) 选择十三个得分选项之一。 如果骰子不满足所选得分类别的条件,则会发出零分数。 一旦选择了评分类别,就不能再使用它;这个规则是通过禁用以前选中的单选按钮来实现的。 分类分为两个组,每个组的分类汇总和总体总计。 此外,第一组评分类别有关联的35-point 奖金,如果它的分类汇总超过 62. 玩家可以通过点击主页( yahtzeemain.htm ) 顶部的of图像来查看规则和评分选项页面( yahtzeerules.htm )。

使用代码

在建立基本的游戏逻辑之后,换句话说,确定是否满足了一个特定的评分条件。 重要的策略是禁用元素,除非它对玩家有意义。 ;的第1 个屏幕截图,因为玩家在当前回合中使用了双掷,所以不能继续滚动,因为玩家没有得分,所以下一轮不能继续滚动,所以下一轮不能继续。 类似地,只读取所有文本框,因为得分将由程序决定,而不是用户。

用户界面关注的另一个实例是 re-roll。 考虑到玩家可能已经选择了一个骰子来滚动。 如果重新滚动模具值与原始模具值( 这种情况会发生在平均六分之一的时间内) 相匹配,那么播放器就不会得到模具的视觉感知。 为了解决这个困境,引入两个JavaScript计时器,每种类型之一,如代码 below 中所示:

timerID = setInterval("TimerRoll()", 50);
timerID2 = setTimeout("StopTimer()", 800);

第一个计时器定期调用函数 TimerRoll(),每隔 50毫秒,然后该函数为适当的骰子选择一个新的随机数,并显示相应的。 第二个( 一次) 计时器调用函数 StopTimer(),一次以 800毫秒为单位;后一个函数停止第一个计时器。 这样,比较重要的是,这些显示器在滚动过程中更改了几次,给用户一个更加视觉的( 尽管并不真实)。 随着滚动现在发生在一段时间内,引入代码,使用户不能使用任何它的他功能。 setInterval 函数返回一个系统生成的数字,该数字被分配给代码 上面 中的变量 timerID。 测试计时器是否是活动的,通过在它的他事件处理程序中将 timerID 变量设置为 -1来实现。

JavaScript单选按钮( 和复选框)的一个特性是关联的文本不是元素的一部分。 因这里,用户在单击JavaScript单选按钮比如,单选按钮时要求更精确。 为了缓解这种情况,将与单选按钮关联的文本放置在 <div> 标记,以及 <div> 'Click 事件selects选择相应的单选按钮( 提供计时事件,并且单选按钮未被禁用)。 对于每个复选框,Click 事件方法将添加到 <td> 包含它的元素。该方法切换复选框属性的Checked。 由于单击复选框也是在 table 单元格中单击,因这里单击复选框会切换两次。 为了解决这种情况,使用相同的方法来处理catch事件的Click,因这里单击复选框现在切换复选框。

为了允许一部分的玩家,单击按钮点击事件不用于"register"的播放器选择分类。 而是引入了输入得分按钮。 但是,有经验的播放机可能会重复单击 Enter Score按钮involved所涉及的额外步骤。 由于这个原因,单选按钮和 <div> 给出了一个双击事件处理程序,它调用了在正确情况下按钮-event方法的Click method。 这种内置的冗余既适合初学者又适合有经验的用户。

掷骰后,玩家可以通过将光标置于相应的scoring上预览特定得分类别的结果。 <div> 元素。在第一屏幕捕获 上面 中可以看到 <div> 更改颜色,并且预期的分数将以灰色字体颜色显示在相应的文本框中。 用这个加法 <div> 不是传统的动态元素,有四个事件方法,如示例 below 所示:

<divid="divScore13"style="DISPLAY: inline; WIDTH: 132px; 
 COLOR: #dcdcdc; HEIGHT: 22px"onclick="return divScore_onclick(13)"ondblclick="return divScore_ondblclick()"onmouseover="return divScore_onmouseover(13)"onmouseout="return divScore_onmouseout(13)"> Chance</div>

Points of interest

最初,游戏结束时,出现了一个弹出窗口。 弹出窗口包含以下代码以显示播放机的得分:

var score;var message="GAME OVER: <br/>Your score was";try{
 score = window.opener.document.getElementById("txtTotal").value;
 document.getElementById("divMessage").innerHTML=message+score;
}

但是,随着浏览器安全设置的倾向于每个脚本的问题,这个特性比值得更多。

历史记录

  • 提交的夏季 2006.

相关文章