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 面向对象 继承
May 13 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
destoon之一键登录设置
2014/06/21 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP实现递归无限级分类
2015/10/22 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
js实现限定范围拖拽的示例
2020/10/26 Javascript
用python与文件进行交互的方法
2018/03/01 Python
python放大图片和画方格实现算法
2018/03/30 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python 字符串追加实例
2019/07/20 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Python 变量的创建过程详解
2019/09/02 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
励志演讲稿大全
2014/08/21 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL