栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏

在线演示demo
本人平时就喜欢拿它来写点实用工具或应用,本文演示用Javascript实现的《铁甲无敌奖门人》“开口中”猜数游戏,以后我还会陆续上传自己写的小东西,都是些工作之余的小作。

《铁甲无敌奖门人》是TVB综艺节目,香港艺人曾志伟就是其中重要的主持人,节目中有众多好玩又刺激的游戏,其中有一个叫“开口中”的猜数游戏正是本文要实现的功能。游戏规则大致是:首先电脑在1到100内选一个数字作为最终答案(这个答案嘉宾一开始是不知道的),然后嘉宾轮流喊1到100以内的数字,每喊一次,如果不是答案,就把范围缩小到嘉宾喊的那个数,直到有人喊中答案为止,最后喊中答案的人要接受玩游戏,如果游戏过关了,不用罚,否则将要受罚。

网页HTML及Javascript代码如下,非常简单,都写了注释,感兴趣的就看一下:
复制代码 代码如下:




用Javascript实现《铁甲无敌奖门人》“开口中”猜数游戏

* {margin:0; padding:0}
body {font-size:12px}
#layout {width:800px; height:500px; text-align:center; margin:25px auto; border:2px solid #999; background:#CCC; position:relative}

#numRange {width:200px; font-family:Arial Black; font-size:20px; background:#000; color:#FFF; position:absolute; top:131px; left:72px}

#currentNum {width:200px; height:200px; font-family:Arial Black; font-size:98px; line-height:200px; background:#999; position:absolute; top:159px; left:72px}

#mainBtn {width:440px; position:absolute; top:46px; right:22px}
#mainBtn input {width:140px; height:30px}

#stateInfo {width:440px; position:absolute; top:91px; right:22px}

#numBtnList {width:440px; position:absolute; top:121px; right:22px}
#numBtnList input {display:block; width:40px; height:30px; margin:2px; float:left}

#copyRight {position:absolute; left:10px; bottom:10px}
#copyRight a {color:#000; text-decoration:none; display:block; padding:5px 8px}
#copyRight a:hover {background:#999; color:#FFF; text-decoration:none}






1 → 100

0







State:等待开始游戏








































































































问道者博客:http://blog.csdn.net/webflash









作者:WebFlash
出处:http://webflash.cnblogs.com
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/117495.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号