js+canvas实现纸牌游戏


Posted in Javascript onMarch 16, 2020

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

废话不多说,先上地址

运行截图

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);
   });
  }

然后在弹起事件里面检测鼠标在弹起之前移动了多少距离,如果移动的距离很小,可以忽略不计,则认为这是一次点击操作。

注意:这里事件注册不是在每张牌上,因为52张牌实际上都画在canvas上,然而52张牌的坐标都是知道的,所以通过计算就可以知道用选择了哪些牌,正在将牌移到哪里。等玩家松手后就可以实现码放操作。

2. 界面设计

顶栏用于显示积分、时间

<div id="titleContainer">
  <div>Score:<span id="score">0</span></div>
  <div>Timer:<span id="timer">00:00:00</span></div>
</div>

接下来就是桌面

<div id="deskTop">
  <canvas id="canvasBack"></canvas>
  <canvas id="canvasFont"></canvas>
</div>

可以看到,桌面有两个canvas,一前一后,这实际上是将游戏画面分为了两层,玩家看到的画面是两个画面叠加在一起的。

之所以用两个层,主要是为了避免实时绘制整个界面,鼠标选中一些牌后将要实施移动操作,这时实际上只有被鼠标选中的那些牌的位置在变化,而桌上剩余的牌实际上没有任何变化,这时如果还实时绘制后面的没有变化的牌有些浪费。所以把鼠标选中的那些牌拿出来,放到canvasFont层里面,这样,两个层都不用实时绘制,被鼠标选中的牌在移动的时候只需要移动他们被绘制在的canvasFont就可以了。

3. 流程

js+canvas实现纸牌游戏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
js 小贴士一星期合集
Apr 07 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
js实现延迟加载的方法
Jun 24 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
JS库之Highlight.js的用法详解
Sep 13 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 #Javascript
JS apply用法总结和使用场景实例分析
Mar 14 #Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 #Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 #Javascript
js实现的订阅发布者模式简单示例
Mar 14 #Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 #Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 #Javascript
You might like
常用的php ADODB使用方法集锦
2008/03/25 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Django的信号机制详解
2017/05/05 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
详解Python中的测试工具
2019/06/09 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python把转列表为集合的方法
2019/06/28 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
extern是什么意思
2016/03/10 面试题
自我鉴定书范文
2013/10/02 职场文书
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
个人自我鉴定总结
2014/03/25 职场文书
群众路线专项整治方案
2014/10/27 职场文书
大一新生检讨书
2014/10/29 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
创业计划书之家政服务
2019/09/18 职场文书