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 相关文章推荐
Fixie.js 自动填充内容的插件
Jun 28 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
js数组操作常用方法
May 08 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
VSCode使用之Vue工程配置eslint
Apr 30 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 编写的日历
2006/10/09 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
js图片上传的封装代码
2017/08/01 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
python发送邮件接收邮件示例分享
2014/01/21 Python
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
2014年行政人事工作总结
2014/12/09 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
golang中的空接口使用详解
2021/03/30 Python
Python基础之数据类型知识汇总
2021/05/18 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python
MYSQL如何查看操作日志详解
2022/05/30 MySQL