原生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 相关文章推荐
JavaScript中的new的使用方法与注意事项
May 16 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JavaScript用select实现日期控件
2015/07/17 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python:socket传输大文件示例
2017/01/18 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
python学习必备知识汇总
2017/09/08 Python
Python实现KNN邻近算法
2021/01/28 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python KMeans聚类问题分析
2018/02/23 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Django中的ajax请求
2018/10/19 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
社区清明节活动总结
2014/07/04 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
解决MySQL报“too many connections“错误
2022/04/19 MySQL
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL