原生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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
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的autoload自动加载机制使用说明
2010/12/28 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
ext jquery 简单比较
2010/04/07 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
详解vue v-model
2020/08/31 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python同步遍历多个列表的示例
2019/02/19 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python日志处理模块logging用法解析
2020/05/19 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
优秀教师先进事迹
2014/01/22 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
会计学毕业生求职信
2014/06/25 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
关于Python中*args和**kwargs的深入理解
2021/08/07 Python