原生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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
Nest.js散列与加密实例详解
Feb 24 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 采集程序原理分析篇
2010/03/05 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Django nginx配置实现过程详解
2020/09/10 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
python如何调用php文件中的函数详解
2020/12/29 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
2014年高校辅导员工作总结
2014/12/09 职场文书
2014年个人总结范文
2015/03/09 职场文书
学术会议通知
2015/04/15 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL