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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
JavaScript中reduce()的用法
May 11 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操作文件方法问答
2007/03/16 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
web 页面分页打印的实现
2009/06/22 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python3.6正式版新特性预览
2016/12/15 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
Python里面如何拷贝一个对象
2014/02/17 面试题
中间件的定义
2016/08/09 面试题
模具专业推荐信
2013/10/30 职场文书
化工专业自荐书
2014/06/16 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
工作检讨书怎么写
2015/01/23 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
vue打包时去掉所有的console.log
2022/04/10 Vue.js