js+canvas实现纸牌游戏-创新互联

本文实例为大家分享了js+canvas实现纸牌游戏的具体代码,供大家参考,具体内容如下

创新互联公司专注于岚皋企业网站建设,响应式网站,电子商务商城网站建设。岚皋网站建设公司,为岚皋等地区提供建站服务。全流程按需求定制设计,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

废话不多说,先上地址

运行截图

最后如果完成了会有结束动画,我技术比较渣,难以玩到结束,就不上完成动画截图了。

游戏介绍

好吧,可能有些好学生在做上机实验时没有玩纸牌游戏,所以容我介绍一下这个游戏,这个游戏是win7自带的一个纸牌类游戏,游戏规则是:将牌按一定的规则码放,最终将所有的牌牌面朝上胜利。有两个地方可以用来码牌,上:以A开头,即将码放的牌的花色相同,且牌面值比原来的牌面大1,则可以码放成功;下:以K开头,即将码放的牌的颜色不同,且牌面值比原来的牌面小1,则可以成功码放。

支持的操作

点击、拖拽相比微软纸牌,增加了点击牌自动找到合适的位置的码放方式,所以整个游戏大部分操作只需要点击就可以了。

设计思路

1. 游戏运行驱动

游戏以玩家操作(鼠标点击与移动)为驱动。
点击与移动鼠标时,通过记录鼠标的位置与状态,可以得到以下四个事件(按下、移动、弹起、单击)。
首先,需要注册鼠标点击、移动和弹起事件

function BindEvent()
  {
   $(window).bind("mousedown touchstart", function (e)
   {
    e.preventDefault();
    var x;
    var y;
    if (e.type == "touchstart")
    {
     x = e.originalEvent.changedTouches[0].clientX;
     y = e.originalEvent.changedTouches[0].clientY;
    }
    else
    {
     x = e.clientX;
     y = e.clientY;
    }
    if (isPlayingAnimation)
    {
     return;
    }
    ActionDown(x, y - 50);
   });

   $(window).bind("mousemove touchmove", function (e)
   {
    e.preventDefault();
    var x;
    var y;
    if (e.type == "touchmove")
    {
     x = e.originalEvent.changedTouches[0].clientX;
     y = e.originalEvent.changedTouches[0].clientY;
    }
    else
    {
     x = e.clientX;
     y = e.clientY;
    }
    if (isPlayingAnimation)
    {
     return;
    }
    ActionMove(x, y - 50);
   });

   $(window).bind("mouseup touchend", function (e)
   {
    e.preventDefault();
    var x;
    var y;
    if (e.type == "touchend")
    {
     x = e.originalEvent.changedTouches[0].clientX;
     y = e.originalEvent.changedTouches[0].clientY;
    }
    else
    {
     x = e.clientX;
     y = e.clientY;
    }
    if (isPlayingAnimation)
    {
     return;
    }
    ActionUp(x, y - 50);
   });
  }

标题名称:js+canvas实现纸牌游戏-创新互联
URL标题:http://myzitong.com/article/jscsp.html