本文实例为大家分享了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经典小游戏汇总》进行学习，希望对大家的学习有所帮助。
