原生JavaScript编写canvas版的连连看游戏
更新时间：2016年05月29日 10:46:42 作者：大晚
这篇文章主要为大家详细介绍了原生JavaScript编写连连看游戏的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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经典小游戏汇总》进行学习，希望对大家的学习有所帮助。
相关文章
使用 Jest 和 Supertest 进行接口端点测试实例详解
这篇文章主要介绍了使用 Jest 和 Supertest 进行接口端点测试,结合实例形式详细分析了使用 Jest 和 Supertest 进行接口端点测试具体原理、操作技巧与相关注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了BootStrap给table表格的每一行添加一个按钮事件的相关资料,需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了js原生瀑布流插件制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了js中的WebSocket使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了JS实现的贪吃蛇游戏,结合完整实例形式分析了javascript实现贪吃蛇游戏的具体步骤、原理与相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了基于JavaScript实现数码时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家详细介绍了js实现查询商品案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
JSON与String互转的实现方法(Javascript)
下面小编就为大家带来一篇JSON与String互转的实现方法(Javascript) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-09-09
这篇文章主要介绍了JS中Select下拉列表类(支持输入模糊查询)功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了JavaScript实现一个电子小蜘蛛,具体的样子就是让它会跟随着我们的鼠标进行移动,那么我们如何实现这样的效果呢,下面来详细讲解实现方法,需要的朋友可以参考下2024-10-10
最新评论