原生JavaScript编写canvas版的连连看游戏


Posted in Javascript onMay 29, 2016

本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下

效果图:

原生JavaScript编写canvas版的连连看游戏

实现代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 #box{
 /*border: 1px solid #D1D1D1; */
 overflow: hidden; 
 position: relative;
 padding-bottom: 60px;
 }
 #bg{
 background-color: rgba(254,195,89,.2);
 }
 #mycanvas{
 position: absolute;
 top: 36px; left: 0;
 }
 #toolsbar{
 width: 100%;
 position: absolute;
 bottom: 10px;
 left: 0;
 overflow: hidden;
 }
 button{
 outline: none;
 border: none;
 width: 100px;
 height: 32px;
 background-color: #d80049;
 color: #FFFFFF;
 border-radius: 5px;
 margin-right: 10px;
 cursor: pointer;
 }
 #timeline{
 height: 26px;
 width: 568px;
 padding-bottom: 10px;
 background: url(images/time_slot-hd.png) no-repeat;
 overflow: hidden;
 }
 #timeline span{
 display: block;
 width: 100%;
 height: 100%;
 display: flex;
 overflow: hidden;
 }
 #timeline span:before,
 #timeline span:after{
 display: block;
 content: "";
 height: 26px;
 background: url(images/time_bars-hd.png) no-repeat;
 }
 #timeline span:before{
 width: 12px;
 }
 #timeline span:after{
 /*width: 100%;*/
 background-position: right top;
 -webkit-flex: 1;
 /*margin-top: -26px;*/
 }
 </style>
 </head>
 <body>
 <div id="box">
 <div id="timeline"><span></span></div>
 <div id="toolsbar">
 <button class="resort">重列(3)</button>
 <button class="tip">提示(3)</button>
 <button class="boom">炸弹(3)</button>
 <button class="parse" style=" background-color: #00AA79;">暂停</button>
 <button class="restart" style="margin-left: 50px; background-color: #00AA79;">重新开始</button>
 </div>
 <canvas id="bg" width="818" height="474px"></canvas>
 <canvas id="mycanvas" width="818" height="474px">
 
 </canvas>
 </div>
 
 </body>
</html>
<script type="text/javascript" src="../../public/js/jquery-1.11.2.min.js" ></script>
<script type="text/javascript" src="control.js" ></script>
<script type="text/javascript" src="matrix.js" ></script>
<script type="text/javascript" src="draw.js" ></script>
<script type="text/javascript" src="map.js" ></script>
<script type="text/javascript" >
$(function(){
 var matrix = MAP_ARR[parseInt(Math.random()*MAP_ARR.length)];
 window._Matrix = new Matrix(matrix,36);
 
 window.draw = new Draw({
 id : "mycanvas",
 step : 42,
 matrix : _Matrix.matrix,
 dir : "images/",
 speed : 300
 });
 var controller = new control({
 step : 42,
 col : 19,
 row : 11,
 id : "bg",
 time : 90000,
 draw : draw,
 _Matrix : _Matrix,
 times : 3
 });

 $("#mycanvas").on("click",function(e){
 var x = e.offsetX,
 y = e.offsetY;
 var _x = Math.floor((x-1)/43),
 _y = Math.floor((y-1)/43);
 controller.click(_x,_y);
 });
 $(".resort").on("click",function(){
 var count = parseInt($(this).text().match(/\d+/)[0]);
 if(count){
 count--;
 $(this).text("重列("+ count +")");
 }
 controller.resort();
 });
 var tiped = false,tips;
 $(".tip").on("click",function(){
 var count = parseInt($(this).text().match(/\d+/)[0]);
 if(count){
 count--;
 $(this).text("提示("+ count +")");
 }
 controller.gettips();
 });
 $(".boom").on("click",function(){
 var count = parseInt($(this).text().match(/\d+/)[0]);
 if(count){
 count--;
 $(this).text("炸弹("+ count +")");
 }
 controller.boom();
 });
 $(".restart").on("click",function(){
 controller.restart();
 });
 $(".parse").on("click",function(){
 var bool = $(this).text() == "暂停";
 $(this).text(bool ? "继续" : "暂停")
 controller.parse();
 });
 controller.watch(function(percent){
 $("#timeline span").width(percent+"%");
 });
});
</script>

源码下载:连连看游戏

关于JavaScript编写游戏的开发实例还有很多,具体大家可以参考专题《javascript经典小游戏汇总》进行学习,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
关于延迟加载JavaScript
May 05 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
js实现精确到秒的倒计时效果
May 29 #Javascript
解读Bootstrap v4 sass设计
May 29 #Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 #Javascript
深入理解js数组的sort排序
May 28 #Javascript
深入理解js函数的作用域与this指向
May 28 #Javascript
js和C# 时间日期格式转换的简单实例
May 28 #Javascript
You might like
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
最基础的vue.js双向绑定操作
2017/08/23 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python编程中的反模式实例分析
2014/12/08 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
学生实习推荐信范文
2013/11/26 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
小学数学课后反思
2014/04/23 职场文书
课例研修方案
2014/05/31 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python