Skip to content

桌游精灵是一款线下桌游聚会的身份发放工具.支持杀人游戏、捉鬼(谁是卧底)等多款游戏

License

Notifications You must be signed in to change notification settings

zhuangyin8/desktop-game-html

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

desktop-game-html

桌游精灵是一款线下桌游聚会的身份发放工具.支持杀人游戏、捉鬼(谁是卧底)等多款游戏

预览地址

葡萄藤官方桌游百科

任务2:桌游精灵身份发放 (48-96小时)

收获什么:

  • 如何使用 JavaScript 进行页面跳转和传参;
  • 使用 JavaScript 对input等页面元素进行更复杂的操作;
  • 进一步理解 JavaScript 的数组;
  • 了解 JavaScript 正则表达式

具体步骤

  1. (环境搭建)领取任务,详细阅读任务的要求(0.5小时)
  2. (环境搭建)到手机APP市场下载游戏----桌游精灵(0.5小时)
  3. (环境搭建)理解杀人游戏的玩法,只需要理解杀人游戏简化版本的即可,暂不用管其他版本(0.5小时)
  4. (知识学习)查看学习资料----《JS页面跳转》(0.5小时)
  5. (编码实战)打开CSS任务中完成的桌游精灵页面,为杀人游戏简化版这个按钮添加一个点击事件,点击后跳转到玩家配比页面(0.5小时)
  6. (知识学习)查看学习资料----《JS获取input标签value》(0.5小时)
  7. (编码实战)在玩家配比页面编写方法,获取玩家数量框内的数字(1小时)
  8. (知识学习)查看学习资料----《JS数组》(1小时)
  9. (编码实战)根据玩家数量,动态设置杀手和平民的数量,杀手数量应该占多少请自行研究游戏(1小时)
  10. (知识学习)查看学习资料----《JS数组乱序》(1小时)
  11. (编码实战)将杀手和平民身份打乱,准备分配给1-N号玩家(2小时)
  12. (知识学习)查看学习资料----《JS的键盘事件》(0.5小时)
  13. (知识学习)查看学习资料----《JS正则表达式》(2小时)
  14. (代码调试)为了让代码更加健壮,对用户输入的数字进行检验判断,当输入框内不是一个4-18之间的数字时,弹出弹框提示(2小时)
  15. (编码调试)多次执行代码,发现bug并改正(2小时)
  16. (环境搭建)上传代码到服务器(0.5小时)
  17. (思考答疑)写日报总结学到的知识点和难点是如何解决的,完成后提交审核(1小时)

效果展示

任务资源

桌游精灵psd 密码 nw8d

任务攻略

任务详解

验收标准

  1. 编写代码,根据人数不同自动分配角色的数目
  2. 代码规范,可扩展(毕竟接下来还要支持多个版本)
  3. 允许使用jquery库

深度思考

这些概念和理论上的东西,通常是面试中经常会被问到的问题。而且,理论体系掌握的很牢固,对于你的技术增长来说非常有帮助。

  1. 常见Dom操作有哪些?
  2. 洗牌算法具体指的是什么?

任务总结

完成任务后要以日报的形式写任务总结,总结项目中遇到的问题,困惑,疑难等。便于与师兄长老交流时有针对性的逐个攻克。

写日报

任务3:桌游精灵查看身份 (72-120小时)

收获什么

  • 进一步学习页面间数据传递;
  • 如何根据需要显示和隐藏视图;
  • JS对DOM样式和内容进行更复杂的操作

具体步骤

    1. (环境搭建)领取任务,详细阅读任务的要求(0.5小时)
    1. (环境搭建)游戏身份的传递方式是什么样的(0.5小时)
    1. (编码实战)打开任务2的项目,找到玩家配比页面的杀人和平民分配的数据,传到新的页面,查看玩家身份(0.5小时)
    1. (编码实战)为页面的查看身份按钮/隐藏并传递给下一号按钮添加点击事件(0.5小时)
    1. (知识学习)学习如何根据需要显示和隐藏视图(2小时)
    1. (编码实战)用变量保存查看状态和当前查看到几号身份(1小时)
    1. (编码实战)书写逻辑,点击一次查看身份再点击隐藏身份,再点击查看下一个人身份,如此循环(4小时)
    1. (知识学习)查看学习资料——《浏览器的本地存储》(1.5小时)
    1. (编码实战)身份的传递方式自行选择,一是跳转页面通过url等方式传递身份,二是本页面操作不跳转页面,只根据情况显示隐藏文本内容和按钮(3小时)
    1. (编码实战)身份传递完后跳转页面,进入法官查看身份页面,展示所有身份(1小时)
    1. (编码调试)多次执行代码,发现bug并改正(2小时)
    1. (环境搭建)上传代码到服务器(0.5小时)
    1. (思考答疑)写日报总结学到的知识点和难点是如何解决的,完成后提交审核(1小时)

效果展示

任务攻略

任务详解

验收标准

  1. 使用jquery库完成页面
  2. 只需要支持简化版杀人游戏即可
  3. 能顺序展示玩家身份隐藏身份
  4. 在身份展示结束后,能进入法官查看身份页面

深度思考

这些概念和理论上的东西,通常是面试中经常会被问到的问题。而且,理论体系掌握的很牢固,对于你的技术增长来说非常有帮助。

  1. JS有哪几种传参方式?
  2. 有限状态机是什么?
  3. jQuery中的bind(),live(),delegate(),on()有什么区别?

任务4:桌游精灵法官日志和游戏结果 (96-144小时)

收获什么:

  • 综合运用jquery完成更复杂的业务逻辑;
  • 使用有限状态机来存放对象的不同状态

具体步骤

    1. (环境搭建)领取任务,详细阅读任务的要求(0.5小时)
    1. (环境搭建)使用桌游精灵,搞清楚游戏开始后的操作逻辑(0.5小时)
    1. (编码实战)打开任务3的项目,将身份结果传递到新页面法官台本(0.5小时)
    1. (知识学习)查看学习资料——《JS有限状态机》(2小时)
    1. (编码实战)设置变量用于存放游戏进展到第几天,每天包含4个步骤的状态(2小时)
    1. (编码实战)设置玩家的死活状态(2小时)
    1. (编码实战)点击第一个步骤进入相应的操作玩家状态界面,选择一个玩家将会改变玩家的生死状态(4小时)
    1. (编码实战)当4个步骤状态都已改变后,进入下一天,并将下一天的内容展示到页面上(4小时)
    1. (编码实战)每天结束后判断玩家人数,当杀手人数大于等于平民人数时游戏结束,或者当杀手人数为0时结束游戏(4小时)
    1. (编码实战)如此循环直到游戏结束(4小时)
    1. (编码实战)游戏结束后跳转到游戏结束页面(0.5小时)
    1. (编码调试)多次执行代码,发现bug并改正(2小时)
    1. (编码调试)使用phonegap或者HBuilder将代码打包成app,并在手机上查看效果(8小时)
    1. (环境搭建)上传代码到服务器(0.5小时)
    1. (思考答疑)写日报总结学到的知识点和难点是如何解决的,完成后提交审核(1小时)

效果展示

任务攻略

任务详解

验收标准

  1. 使用jquery库
  2. 和上一个任务相结合,可以完成整个游戏
  3. 暂时不用支持多个版本的游戏 4.每个自定义函数里的代码不得超过50行

深度思考

这些概念和理论上的东西,通常是面试中经常会被问到的问题。而且,理论体系掌握的很牢固,对于你的技术增长来说非常有帮助。

  1. 对一个数组 filter、some、map、foreach的操作分别有什么作用?
  2. 简述JS中的event delegate
  3. return的用法是什么?若用在for循环中,还会执行下一次循环吗?
  4. 如何使用Bootbox ?
  5. json是什么,如何处理转义?
  6. 简述JS中this的指向
  7. 简述JS中的面向对象编程
  8. 如何实现数组深拷贝和浅拷贝?
  9. 杀人和投票的业务逻辑上有什么区别?
  10. 如何理解JS作用域与作用域链?
  11. 如何验证程序是否完成,测试以及修正Bug
  12. 如何使用phonegap打包app?
  13. 如何使用HBuilder打包app?
  14. 如何阻止事件冒泡和默认事件?

About

桌游精灵是一款线下桌游聚会的身份发放工具.支持杀人游戏、捉鬼(谁是卧底)等多款游戏

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published