JS技术

javascript教程:如何制作纸牌游戏

字号+ 作者:H5之家 来源:H5之家 2015-09-15 11:01 我要评论( )

javascript教程:如何制作纸牌游戏,学习javascript教程:如何制作纸牌游戏,javascript教程:如何制作纸牌游戏,查看javascript教程:如何制作纸牌游戏,javascript

javascript教程:如何制作纸牌游戏


    很多的朋友我想都玩过纸牌游戏吧!今天给大家分享一下如何制作JavaScript的纸牌,下面我们一起来看看操作的步骤:

规则如下:

1、有3个叠牌区域和4种牌,左上角叠牌区,右上角整理区,和中间的层叠区;
2、层叠区有两种牌,掀开的纸牌和没有掀开的纸牌;
3、游戏的目的是将所有牌放入右上角的整理区(将层叠区的暗牌全部掀开);
4、左上角的叠牌区域可以选择每次翻一张牌和翻三张牌。如果翻三张牌,只能移动翻开的三张中最上面的那一张。所以翻三张难度较大;
5、中间叠牌区域移动规则是:只有一张牌在顺序上是翻开纸牌最上面的那一张的下一张并且颜色不同,才可以移动。顺序是K,Q,J,10,9,8,7,6,5,4,3,2,A;
6、右上角的整理区移动规则是:只有一张牌在顺序上是最上面的那一张的上一张并且花色相同,才可以移动。顺序是A,2,3,4,5,6,7,8,9,10,J,Q,K;
7、最终将所有的牌移动到右上角算赢(只要将所有的纸牌都翻开后很容易就移到右上角);

下面我们看看具体的效果
    由于IE内核的浏览器(包括IE9,除了IE10)对CSS3支持的并不是很好,所以建议使用IE10(当然除非你跟我一样有Windows8啰,呵呵)或者其他非IE内核的浏览器,比如Chrome/FireFox/Opera/Safari.

下面是测试的截图:


Windows8+IE10测试


Windows8+IE10测试


Windows8+IE10测试


Windows7+Chrome测试


Windows7+Chrome测试

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JavaScript入门教程(二)_javascript教程教程

    JavaScript入门教程(二)_javascript教程教程

    2015-10-10 14:25

  • JavaScript入门教程(五)_javascript教程教程

    JavaScript入门教程(五)_javascript教程教程

    2015-10-10 14:21

  • JavaScript入门教程(四)_javascript教程教程

    JavaScript入门教程(四)_javascript教程教程

    2015-10-10 14:19

  • JavaScript入门教程(三)_javascript教程教程

    JavaScript入门教程(三)_javascript教程教程

    2015-10-10 14:17

网友点评
j