原生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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
JS 表单验证大全
Nov 23 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
js计算精度问题小结
Apr 22 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
基于iview的router常用控制方式
May 30 Javascript
TypeScript高级用法的知识点汇总
Dec 17 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
解决python3输入的坑——input()
2020/12/05 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
MySQL 服务和数据库管理
2021/11/11 MySQL