原生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的仿百度搜索框效果代码
Apr 11 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
vue内置指令详解
Apr 03 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 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中文件上传的安全问题
2006/10/09 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
python列表的增删改查实例代码
2018/01/30 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
生物科学专业毕业生求职信
2014/06/02 职场文书
违纪开除通知书
2015/04/25 职场文书
三八节活动主持词
2015/07/04 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python