拼图游戏Canvas版

原身

一开始写的拼图是用div一个一个列出来的，里面放的是切好的图片。拼图小游戏（前端）

canvas版的思路

游戏结束的判定与上一个版本一样，数组的顺序达到了它对应的位置，表示游戏结束。
因为使用canvas，我们需要记录每块拼图在图片上的位置和大小，记录成数组
canvas的使用思路HTML5 Canvas学习笔记(6)拼图游戏（数字版）

canvas方法

canvas.drawImage()使用可以参照drawImage()方法

拼图对象

这里生成拼图对象传入了两个数组。
一个是canvas的九格位置数组（不可改动）canvas九格的每一格都可以放图片的任意一个图片碎片或者“白块”，以此实现“拼图”的效果；
一个是图片的九格位置数组（可打乱）；

代码部分

样式没有过多调整，能用就成

HMTL

 <!-- 流程1，选择想拼的图片 -->流程1，选择想拼的图片<div class="process1"><div>选择图片</div><input class="file" type="file" id="ipt"></div><!-- 流程2：切图 -->流程2：切图<div class="process2"><div class="img"><div class="mask"></div></div><button>确定</button></div><div class="process3"><canvas id ="canvas" width="500" height="500"></canvas></div>

css

<style>.process1{width: 150px;height: 80px;position: relative;background: #000;color: #fff;text-align: center;line-height: 80px;}.file{/* visibility: hidden; */opacity: 0;width: 150px;height: 80px;position: absolute;left: 0;top: 0;}.img{margin: 0 auto;position: relative;overflow: hidden;width: 800px;}.mask{position: absolute;width: 30%;background-color:rgba(0, 0, 0, 0);box-shadow: 0 0 0 10000px rgba(0,0,0,.5);left: 30%;top: 30%;}canvas{border: 1px solid #000;}</style>

js

var ipt = document.getElementById('ipt')var canvas = document.getElementById('canvas')var contDv = document.getElementsByClassName('img')[0];var  c_msgvar sqrt = document.getElementsByClassName('mask')[0];sqrt.style.height = sqrt.offsetWidth + 'px'var ctx = canvas.getContext('2d');var image = new Image();var sx=0,sy=0;var step = 500/3var imagestep;var rate ;//选择一张图片，生成img对象，流程一ipt.onchange = function(e){var windowurl = window.URL || window.webkitURL;var url =  windowurl.createObjectURL(e.target.files[0]);// img.src  = urlcontDv.style.background = `url(${url}) no-repeat center center/100% 100%`;image.src = url;image.onload = function(){var ix = this.width;var iy = this.height;contDv.style.height = contDv.offsetWidth *iy/ix + 'px'rate = iy/contDv.offsetHeight;c_msg = contDv.getClientRects()[0];}}// 确定裁剪区域，流程二，思路可以参照放大镜的思路，这部分有问题，但是因为目的不是它就没管var bdy = document.documentElementsqrt.onmousedown = function(e){var msg = this.getClientRects()[0];// 计算鼠标与白块的距离var space_x = e.pageX - msg.left;var space_y = e.pageY - msg.top;var _this = this;var max_x = c_msg.width-this.offsetWidth;var max_y = c_msg.height-this.offsetHeight;var scrolltop = bdy.scrollTop;var scrollleft = bdy.scrollLeft;document.onmousemove = function(eve){sx = eve.pageX+ scrollleft - space_x - c_msg.left;sy = eve.pageY + scrolltop- space_y - c_msg.top;sx = sx>max_x?max_x:sxsy = sy>max_y?max_y:sy_this.style.left = sx<0?0:sx + 'px';_this.style.top = sy<0?0:sy + 'px';}}sqrt.onmouseup = function(){document.onmousemove = ''}// 开始裁剪var btn = document.getElementsByTagName('button')[0];var jigsawbtn.onclick = function(){imagestep = sqrt.offsetWidth*rate/3;//获得每块拼图的宽高var pointlist = [];var canvaslist =[]var pointy=sy*rate,cy=0,pointx,cx;for(var i = 0 ; i <3 ;i ++){if(i!==0){pointy+=imagestep;cy+=step}pointx=sx*rate,cx=0for(var j = 0 ;j<3;j++){if(j!==0){pointx+=imagestep;cx+=step}console.log(pointx,pointy)pointlist.push({x:pointx,y:pointy,id:i*3+j})//id当做判断游戏结束的依据canvaslist.push({x:j,y:i})}}console.log(canvaslist,pointlist)jigsaw = new Jigsaw('canvas',pointlist,canvaslist,9,image,imagestep);jigsaw.init()}

拼图对象


function random (n){return Math.ceil(Math.random()*n)
}
//这里传入两个数组，一是游戏的九各位置，一个是图片碎片的位置
function Jigsaw(dom,imgdata,canvasdata,size,image,imagestep){this.$data = imgdata;//原始数据this.$canvaslist = canvasdata;//canvas九宫数据this.$size =size;//九宫格或者十六宫格this.$jigsaw_data = null //处理后的拼图数组this.$dom = document.getElementById(dom)//承载游戏的元素this.$ctx = this.$dom.getContext('2d');//画布this.$finish = false;//游戏结束标志this.$change;//白块所在元素的索引值this.$image = image;//图片this.$step = 0;//移动步数this.$imagestep = imagestep
}
Jigsaw.prototype.init = function(){if(!this.$dom){console.log('要承载的对象不存在')return}if(this.data_handle()){//处理传入的数组console.log('错误的数据格式')return}this.game()this.interactive()
}
Jigsaw.prototype.data_handle = function(){if(this.$data.length!=this.$size){return true //传入的数据长度不对}var newarr=[];var arr = this.$data;var last = arr.pop()for( var i =7 ; i>=0;i--){var tmp = arr.splice(random(i),1)newarr = newarr.concat(tmp)}//将传入的原始数据打乱newarr.push(last);//把空白拼图放在数组最后一位this.$change = newarr.length -1;//记录空白拼图的位置newarr[this.$change].white = truethis.$jigsaw_data = newarr
}
Jigsaw.prototype.createLine = function(){this.$ctx.clearRect(0,0,this.$dom.offsetWidth,this.$dom.offsetHeight)//将画布清空this.$jigsaw_data.forEach((item,y)=>{var p = this.$canvaslist[y]if(!item.white){this.$ctx.drawImage(this.$image,item.x,item.y,this.$imagestep,this.$imagestep,p.x*step,p.y*step,step,step)//如果当前对象不是空白拼图}this.$ctx.rect(p.canvasx,p.canvasy,step,step);this.$ctx.stroke()})
}
Jigsaw.prototype.exchange = function(obj){var _this = this;var x = Math.floor(obj.x/step);var y = Math.floor(obj.y/step);//计算鼠标落在哪块拼图上var index = y*3+x//计算出被点的区域对应索引值console.log(obj,index)var $x = this.$canvaslist[index].x - this.$canvaslist[this.$change].x;var $y = this.$canvaslist[index].y - this.$canvaslist[this.$change].y;if(Math.abs($x+$y)==1){//计算鼠标所落的拼图是否与白色拼图相邻，是则交换var tmp = _this.$jigsaw_data[index];_this.$jigsaw_data[index] =  _this.$jigsaw_data[this.$change];_this.$jigsaw_data[this.$change]=tmp;this.$change = index_this.game()_this.$step ++}
}
Jigsaw.prototype.resetwhite=function(){this.$change = ''
}
Jigsaw.prototype.interactive = function(){var _this = thisthis.$dom.onclick = function(e){var x = e.pageX - this.offsetLeftvar y = e.pageY - this.offsetTopif(_this.$finish){console.log('游戏结束，你一共走了' + _this.$step  + '步')return }else{_this.exchange({x:x,y:y})}}
}
Jigsaw.prototype.game = function(){this.createLine();this.endjudge();if(this.$finish){console.log('游戏结束，你一共走了' + this.$step  + '步')}
}
Jigsaw.prototype.endjudge=function(){for(var i = 0 ; i <this.$jigsaw_data.length ;i ++){var obj = this.$jigsaw_data[i]if(obj&&obj.id !==i){this.$finish = false;break;}else{this.$finish = true;}}
}

拼图游戏Canvas版相关推荐

拼图java源码_拼图游戏Java版源代码JAVA游戏源码下载
Java版的拼图游戏,玩家能够自己更换图片,只需你把它分成块,另外它是以成绩=1000-时间(秒)-移动步数*10来决意你是否输了,按F1键起头游戏,Y健预览图片. 拼图游戏Java版源代码 (1 f ...
Java游戏开发——拼图游戏经典版
游戏介绍: 拼图游戏是一款经典的益智游戏,游戏难度分为简单.正常.困难三种难度,分别对应3*3,4*4,5*5布局,游戏开始前图片被随机打乱,空块位于最右下角,玩家通过点击空块周围图片或者按键方式 ...
html 拖放实现拼图游戏,Canvas drag 实现拖拽拼图小游戏
博主一直心心念念想做一个小游戏- 前段时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...
基于canvas+uniapp的9宫格拼图游戏组件
基于 canvas+uniapp 的 9 宫格拼图游戏涉及到的 canvas 基础知识创建画布 <canvas id="'c1'"></canvas> ...
移动拼图游戏（八数码问题）A*版
小时候玩过的移动拼图游戏.有一个3*3的棋盘,其中有0-8这9个数字,0表示空格,每次移动只能把空格旁边的数字移到空格,即与0相邻的数字可以和0交换位置. 求从初始状态 2 3 0 7 1 6 5 8 ...
Python Tkinter——数字拼图游戏详解版
Python Tkinter 实践系列--数字拼图游戏详解版 import random #Python中的random是一个标准库用于生成随机数.随机整数.还有随机从数据集取数据. import t ...
linux 拼图游戏,王牌拼图红包版
王牌拼图红包版是一款好玩的拼图游戏,在这款王牌拼图红包版游戏中有上千张不同风格的图片等你来选择,有简单的模式也有中等难度和困难模式的等你来挑战!每次的关卡任务完成后都是会有红包奖励的哦!喜欢的玩家们快 ...
自制的MATLAB拼图游戏GUI界面版详解（上篇）
摘要:这篇博文在早前本人写的介绍拼图游戏的基础上推出带有GUI用户界面的增强版,这里将通过上.中.下三篇博文详细介绍利用MATLAB GUI设计的拼图游戏完整实现过程,每篇都会附上相应代码及解释.上篇 ...
自制的MATLAB拼图游戏GUI界面版详解（中篇）
摘要:这篇博文在早前本人写的介绍拼图游戏的基础上推出带有GUI用户界面的增强版,这里将通过上.中.下三篇博文详细介绍利用MATLAB GUI设计的拼图游戏完整实现过程,每篇都会附上相应代码及解释.中篇 ...

拼图游戏Canvas版

目录

原身

canvas版的思路

canvas方法

拼图对象

代码部分

HMTL

css

js

拼图对象

拼图游戏Canvas版相关推荐

最新文章

热门文章