用JS編寫就可實現(xiàn)拼圖游戲

3403771864 發(fā)布于2022-10-18 22:50 / 980人閱讀

　　我們簡單來說下用用JS實現(xiàn)這樣簡單的拼圖游戲可以有那兩種方法。一種是拖拽拼圖，一種是經(jīng)典的九宮格拼圖，可以自定義參數(shù)設置游戲難度

　　先看看截圖效果

　　拖拽模式（拖拽圖片切換圖片）

　　點擊模式（點擊圖片與空白區(qū)域切換位置）

　　不多說，直接上代碼

　　css

　　#canvasBox{
　　margin: 0 auto;
　　position: fixed;
　　border: 2px solid #f00;
　　overflow: hidden;
　　}
　　.item{
　　display: inline-block;
　　border: 1px solid #f00;
　　position: absolute;
　　top: 0;
　　left: 0;
　　transition: 0.1s;
　　}

　　html

　　<div style="margin: 0 auto;text-algin:center;">
　　<button onclick="setGame('block', 'none')">拖拽模式</button>
　　<button onclick="setGame('none', 'block')" >點擊模式</button>
　　</div>
　　<div id="canvasBox"></div>
　　<div id="canvasBox2"></div>

　　javascript

　/*
　　* @title JigsawGame 拼圖游戲
　　* @params obj Object 游戲參數(shù)
　　* {
　　* @param Id String 容器id
　　* @param imgUrl String 圖片路徑
　　* @param level Number 游戲難度 簡單：1 || 普通：2 || 困難：3
　　* @param gameType Number 游戲類型 拖動版本：1 || 點擊版本：2
　　* }
　　* @author beideng
　　*/
　　function JigsawGame(obj){
　　// 初始化容器
　　this.Id = document.getElementById(obj.Id);
　　// 初始化圖片
　　this.img = new Image();
　　this.img.src = obj.imgUrl;
　　// 容器最大寬度
　　this.windowWidth = document.body.clientWidth;
　　this.maxWidth = this.windowWidth > 750 ? 750 : (this.windowWidth * 0.9);
　　// 設置容器寬高
　　this.Id.style.width = this.maxWidth + "px";
　　this.Id.style.height = this.maxWidth + "px";
　　this.Id.style.left = (this.windowWidth - this.maxWidth)/2 + "px";
　　this.Id.style.top = 50 + "px";
　　// 獲取容器范圍
　　this.boxOffsetY = parseFloat(this.Id.style.top);
　　this.boxOffsetX = parseFloat( this.Id.style.left);
　　// 關卡（簡單：1 || 普通：2 || 困難：3）
　　if(obj.level == 1 || obj.level == 2 || obj.level == 3 ){
　　this.Level = obj.level;
　　}else{
　　this.level = 1;
　　}
　　// 難度
　　var diffArr = [3, 4, 5];
　　this.Diff= diffArr[this.Level-1];
　　// canvas寬高
　　this.cW = this.maxWidth/ this.Diff;
　　this.cH = this.maxWidth/ this.Diff;
　　// 記錄的小方塊個數(shù)
　　this.number = 0;
　　// 正確的數(shù)組
　　this.numberArr = [];
　　// 存儲小方塊的中心點坐標
　　this.centerXY = [];
　　/*
　　* 獲取游戲類型
　　*/
　　this.gameType = obj.gameType || 1;
　　// 記錄最后一個元素的標記
　　this.lastElement = {
　　sign: 0,
　　left: 0,
　　top: 0,
　　Id: obj.Id + 1
　　};
　　// 初始化
　　this.Init();
　　}
　　/*
　　* 操作方法 *
　　*/
　　JigsawGame.prototype = {
　　/*
　　* @method 初始化
　　*/
　　Init: function(){
　　var that = this;
　　this.img.onload = function(){
　　// 格子寬高
　　var LevelW = that.img.width/that.Diff;
　　var LevelH = that.img.height/that.Diff;
　　for(var i = 0 ; i < that.Diff; i++){
　　for(var j = 0 ; j < that.Diff; j++){
　　// 初始化小方塊
　　that.initCube(i, j, LevelW, LevelH);
　　}
　　}
　　// 打亂小方塊
　　that.upsetElement();
　　// 游戲類型判斷
　　if(that.gameType == 1){
　　// 監(jiān)聽拖動
　　that.Id.addEventListener("mousedown",function(event){
　　that.mouseDown(event);
　　}, false);
　　}else{
　　// 獲取空白小方塊坐標
　　that.getLastElement();
　　// 監(jiān)聽點擊
　　that.Id.addEventListener("click",function(event){
　　that.mouseClick(event);
　　}, false);
　　}
　　}
　　},
　　/*
　　* @method 初始化小方塊
　　* @param i Number 循環(huán)值
　　* @param j Number 循環(huán)值
　　* @param j LevelW 小方塊寬
　　* @param j LevelH 小方塊高
　　*/
　　initCube: function(i, j, LevelW, LevelH){
　　// 創(chuàng)建一個小方塊
　　var item = document.createElement("div"),
　　cW = this.cW,
　　cH = this.cH;
　　item.className = "item";
　　item.setAttribute("data-index", this.number);
　　item.style.width = cW + "px";
　　item.style.height = cH + "px";
　　item.style.left = i * cW + "px";
　　item.style.top = j * cH + "px";
　　item.innerHTML = "<canvas class='' width='"+ cW +"' height='"+ cH +"'></canvas>";
　　this.Id.appendChild(item);
　　var canvas = item.querySelector("canvas");
　　var ctx = canvas.getContext("2d");
　　/*
　　* 當游戲為點擊類型時
　　* 去掉最后一個小方塊里的圖片
　　* 且記錄當前元素的坐標以及編號
　　*/
　　if(this.gameType != 1 && j == this.Diff-1 && i == this.Diff-1){
　　this.lastElement.sign = this.number;
　　item.id = this.lastElement.Id;
　　}else{
　　ctx.drawImage(this.img, i * LevelW, j * LevelH , LevelW, LevelH, 0 , 0, cW, cH)
　　}
　　// 每添加一個就壓入一次到數(shù)組
　　this.numberArr.push({
　　x: i*cW +"px" ,
　　y: j*cH +"px"
　　});
　　this.number++;
　　// 壓入初始中心點
　　this.centerXY.push({
　　x: i*cW + cW / 2,
　　y: j*cH + cH / 2
　　});
　　},
　　/*
　　* @method 懸停拖住小方塊
　　* @param event Object 鼠標對象
　　*/
　　mouseDown: function(event){
　　console.log(event)
　　var event = event || window.event;
　　var that = this;
　　var target = event.target || event.srcElement;
　　// 保證拖動的是想要的元素
　　if( target.parentElement.className.toLowerCase() == "item"){
　　var Element = target.parentElement;
　　// 存儲當前元素的top,left
　　var thisTop = parseFloat( Element.style.top );
　　var thisLeft = parseFloat( Element.style.left );
　　// 獲取當前點擊的位置
　　var pageX = event.pageX;
　　var pageY = event.pageY;
　　// 拖動
　　document.onmousemove = function(e){
　　console.log(e)
　　that.mouseMove(e, Element, thisTop, thisLeft, pageY, pageX);
　　return false;
　　}
　　// 松開
　　document.onmouseup = function(e){
　　that.mouseUp(e, Element, thisTop, thisLeft)
　　// 釋放拖拽
　　document.onmousemove = null;
　　document.onmouseup = null;
　　return false;
　　}
　　}
　　return false;
　　},
　　/*
　　* @method 拖動小方塊
　　* @param e Object 鼠標對象
　　*/
　　mouseMove: function(e, Element, thisTop, thisLeft, pageY, pageX){
　　var pageX2 = e.pageX;
　　var pageY2 = e.pageY;
　　Element.style.top = thisTop + (pageY2 - pageY) + "px";
　　Element.style.left = thisLeft + (pageX2 - pageX) + "px";
　　Element.style.zIndex = 1000;
　　},
　　/*
　　* @method 松開小方塊
　　* @param e Object 鼠標對象
　　*/
　　mouseDown: function(event){
　　console.log(event)
　　var event = event || window.event;
　　var that = this;
　　var target = event.target || event.srcElement;
　　// 保證拖動的是想要的元素
　　if( target.parentElement.className.toLowerCase() == "item"){
　　var Element = target.parentElement;
　　// 存儲當前元素的top,left
　　var thisTop = parseFloat( Element.style.top );
　　var thisLeft = parseFloat( Element.style.left );
　　// 獲取當前點擊的位置
　　var pageX = event.pageX;
　　var pageY = event.pageY;
　　// 拖動
　　document.onmousemove = function(e){
　　console.log(e)
　　that.mouseMove(e, Element, thisTop, thisLeft, pageY, pageX);
　　return false;
　　}
　　// 松開
　　document.onmouseup = function(e){
　　that.mouseUp(e, Element, thisTop, thisLeft)
　　// 釋放拖拽
　　document.onmousemove = null;
　　document.onmouseup = null;
　　return false;
　　}
　　}
　　return false;
　　},
　　/*
　　* @method 拖動小方塊
　　* @param e Object 鼠標對象
　　*/
　　mouseMove: function(e, Element, thisTop, thisLeft, pageY, pageX){
　　var pageX2 = e.pageX;
　　var pageY2 = e.pageY;
　　Element.style.top = thisTop + (pageY2 - pageY) + "px";
　　Element.style.left = thisLeft + (pageX2 - pageX) + "px";
　　Element.style.zIndex = 1000;
　　},
　　/*
　　* @method 松開小方塊
　　* @param e Object 鼠標對象
　　*/
　　mouseUp: function(e, Element, thisTop, thisLeft){
　　var that = this,
　　cW = this.cW,
　　cH = this.cH;
　　// 檢測當前拖動替換目標
　　var moveCenterX = parseFloat(Element.style.left) + cW / 2;
　　var moveCenterY = parseFloat(Element.style.top) + cH / 2;
　　var changeElementIndex = this.checkChangeElement(moveCenterX, moveCenterY);
　　var changeElement = this.Id.getElementsByClassName("item")[changeElementIndex];
　　// 限制拖拽范圍
　　// 當松開的坐標xy在容器范圍內(nèi)
　　if( e.pageX < this.boxOffsetX || e.pageX > (this.boxOffsetX + this.maxWidth) || e.pageY < this.boxOffsetY || e.pageY > (this.boxOffsetY + this.maxWidth) ){
　　console.log("釋放")
　　Element.style.top = thisTop + "px";
　　Element.style.left = thisLeft + "px";
　　}else{
　　// 判斷當前元素是否離開了自己的格子
　　if( Element.getAttribute("data-index") == changeElement.getAttribute("data-index")){
　　Element.style.top = thisTop + "px";
　　Element.style.left = thisLeft + "px";
　　}else{
　　// 進行替換
　　Element.style.top = changeElement.style.top ;
　　Element.style.left = changeElement.style.left ;
　　changeElement.style.top = thisTop + "px";
　　changeElement.style.left = thisLeft + "px";
　　changeElement.style.zIndex = 1000;
　　// 更新小方塊中心點
　　this.updateElement();
　　}
　　}
　　// 消除層級問題
　　setTimeout(function(){
　　Element.style.zIndex = 0;
　　changeElement.style.zIndex = 0;
　　if(that.compareArray()){
　　alert("恭喜你，拼圖成功！");
　　}
　　}, 150);
　　// 判斷拼圖完成
　　console.log(this.compareArray())
　　console.log(this.numberArr)
　　},
　　/*
　　* @method 檢測當前拖動替換目標
　　* @param moveLeft Number 鼠標移動的x值
　　* @param moveTop Number 鼠標移動的y值
　　* @return minIndex Number 返回目標對象下標
　　* 通過三角函數(shù)檢測當前拖動對象中心點和其他所有對象中心點距離，離誰最近就和誰替換
　　*/
　　checkChangeElement: function(moveLeft, moveTop){
　　// 最小距離
　　var minDistance = null;
　　// 最小距離替換目標
　　var minIndex = null;
　　for(var i = 0 ; i < this.centerXY.length; i++){
　　var x = Math.abs( moveLeft - this.centerXY[i].x );
　　var y= Math.abs( moveTop - this.centerXY[i].y );
　　var val = Math.ceil(Math.sqrt( x * x + y * y));
　　// 初次判斷
　　if(minDistance == null){
　　minDistance = val;
　　minIndex = i;
　　}
　　// 后續(xù)判斷
　　if(minDistance > val){
　　minDistance = val;
　　minIndex = i;
　　}
　　}
　　// 返回目標對象下標
　　return minIndex;
　　},
　　/*
　　* @method 更新小方塊中心點
　　*/
　　updateElement: function(){
　　var allElement = this.Id.getElementsByClassName("item"),
　　cW = this.cW,
　　cH = this.cH;
　　this.centerXY = [];
　　for(var i = 0 ; i < allElement.length; i++){
　　this.centerXY.push({
　　x: parseFloat(allElement[i].style.left) + cW / 2,
　　y: parseFloat(allElement[i].style.top) + cH / 2
　　});
　　}
　　},
　　/*
　　* @method 點擊小方塊
　　* @param event Object 鼠標對象
　　* @ 1、點擊當前非空白小方塊
　　* @ 2、獲取其坐標，并加減一個一個方塊寬度，用這個加減坐標去檢索空白小方塊是否在目標小方塊周邊
　　* @ 3、如果在，則替換這兩個小方塊的坐標
　　*/
　　mouseClick: function(event){
　　console.log(event)
　　var event = event || window.event;
　　var that = this;
　　var target = event.target || event.srcElement;
　　// 保證拖動的是想要的元素
　　if( target.parentElement.className.toLowerCase() == "item"){
　　var Element = target.parentElement;
　　// 當當前點擊目標為空白小方塊時，終止函數(shù)
　　if(Element.getAttribute("data-index") == this.lastElement.sign){
　　return ;
　　}
　　// 存儲當前元素的top,left
　　var thisTop = parseFloat( Element.style.top );
　　var thisLeft = parseFloat( Element.style.left );
　　// 點擊檢測空白方塊是否在當前對象周邊
　　if(this.mouseClickCheck(thisTop, thisLeft)){
　　console.log(222)
　　// 獲取空白元素
　　var lastElement = document.getElementById(this.lastElement.Id);
　　// 替換這兩個元素的坐標
　　Element.style.top = lastElement.style.top;
　　Element.style.left = lastElement.style.left;
　　lastElement.style.top = thisTop + "px";
　　lastElement.style.left = thisLeft + "px";
　　this.lastElement.left = thisLeft ;
　　this.lastElement.top = thisTop;
　　// 消除層級問題
　　setTimeout(function(){
　　if(that.compareArray()){
　　alert("恭喜你，拼圖成功！");
　　}
　　}, 150);
　　// 判斷拼圖完成
　　console.log(this.compareArray())
　　console.log(this.numberArr)
　　}
　　}
　　return false;
　　},
　　/*
　　* @method 點擊檢測空白方塊是否在當前對象周邊
　　* @param thisTop Number 當前點擊元素的top
　　* @param thisLeft NUmber 當前點擊元素的left
　　* @return Boolean 是否在周邊
　　*/
　　mouseClickCheck: function(thisTop, thisLeft){
　　var cW = this.cW,
　　cH = this.cH;
　　if(thisTop == this.lastElement.top && (thisLeft - cH) == this.lastElement.left){
　　return true;
　　}
　　if(thisTop == this.lastElement.top && (thisLeft + cH) == this.lastElement.left){
　　return true;
　　}
　　if((thisTop - cW) == this.lastElement.top && thisLeft == this.lastElement.left){
　　return true;
　　}
　　if((thisTop + cW) == this.lastElement.top && thisLeft == this.lastElement.left){
　　return true;
　　}
　　return false;
　　},
　　/*
　　* @method 獲取空白元素left,right
　　*/
　　getLastElement: function(){
　　// 獲取空白元素
　　var lastElement = document.getElementById(this.lastElement.Id);
　　console.log(this.lastElement);
　　this.lastElement.left = parseFloat(lastElement.style.left) ;
　　this.lastElement.top = parseFloat(lastElement.style.top);
　　},
　　/*
　　* @method 打亂小方塊
　　* 以小方塊的個數(shù)為次數(shù)，每次隨機抽取兩個小于小方塊的數(shù)，然后替換兩個dom元素的定位坐標
　　*/
　　upsetElement: function(){
　　for (var i = 0; i < this.number-1; i++) {
　　// 獲取兩個不相等的隨機值
　　var n1 = Math.floor(Math.random()*this.number);
　　var n2 = Math.floor(Math.random()*this.number);
　　do{
　　n2 = Math.floor(Math.random()*this.number);
　　}while(n1 == n2)
　　// 替換當前的兩個小方塊的坐標
　　var allElement = this.Id.getElementsByClassName("item");
　　var Top = allElement[n1].style.top ;
　　var Left = allElement[n1].style.left ;
　　allElement[n1].style.top = allElement[n2].style.top ;
　　allElement[n1].style.left = allElement[n2].style.left ;
　　allElement[n2].style.top = Top ;
　　allElement[n2].style.left = Left ;
　　}
　　},
　　/*
　　* @method 比較小方塊是否拼圖完成
　　* @return boolean
　　* 獲取切換小方塊后，獲取小方塊的序號并與正確排序數(shù)組進行比較
　　*/
　　compareArray: function(){
　　// 獲取序號
　　var allElement = this.Id.getElementsByClassName("item");
　　for(var i = 0; i < this.number-1; i++){
　　// 比較序號
　　if( this.numberArr[i].x != allElement[i].style.left || this.numberArr[i].y != allElement[i].style.top ){
　　return false;
　　}
　　}
　　return true;
　　},
　　}
　　// 實例化一個對象
　　var box = new JigsawGame({
　　Id: 'canvasBox',
　　imgUrl: '../image/lingtai.jpg',
　　level: 1,
　　gameType: 1
　　});
　　// 實例化一個對象
　　var box2 = new JigsawGame({
　　Id: 'canvasBox2',
　　imgUrl: '../image/lingtai.jpg',
　　level: 1,
　　gameType: 2
　　});
　　function setGame(a, b){
　　document.getElementById("canvasBox").style.display = a;
　　document.getElementById("canvasBox2").style.display = b;
　　}
　　setGame("block", "none");

在上述代碼中只是稍微修改一下樣式和觸發(fā)事件，就是一個h5版本的demo。但有一點要注意，在設計代碼時，并沒有考慮到兼容性。

GPU云服務器云服務器用js編寫按鈕用js編寫號碼查詢拼圖游戲美女拼圖游戲

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128141.html

利用Vue.js實現(xiàn)拼圖游戲

摘要：之前寫過一篇基于的表格分頁組件的文章，主要介紹了組件的編寫方法，有興趣的可以訪問這里進行閱讀前言為了進一步讓大家了解的神奇魅力，了解的一種以數(shù)據(jù)為驅動的理念，本文主要利用實現(xiàn)了一個數(shù)字拼圖游戲，其原理并不是很復雜，效果圖如下展示地址為有能力之前寫過一篇《基于Vue.js的表格分頁組件》的文章，主要介紹了Vue組件的編寫方法，有興趣的可以訪問這里進行閱讀：https://segment...

wh469012917 2019-08-22 10:34 評論0 收藏0
展示js簡單拼圖游戲

　　我們看看js實現(xiàn)簡單拼圖游戲的詳細代碼，HTML僅有一個id為game的div，也不錯編寫CSS，僅要img文件夾中放置一個圖片文件就行，此處我放置的是LOL皇子的圖片，圖片名為'lol.png'　　<divid="game"> 　　</div>　　下面展示具體效果　　多的不說，直接上js代碼　　/** 　　*游戲配置　　*/ 　　...

3403771864 2022-10-19 22:28 評論0 收藏0
Vue ES6 Jade Scss Webpack Gulp

摘要：主有前端后端，并加，各一名。本著工欲善其事，必先利其器的理念，一直以來在工作效率這塊，略懷執(zhí)念一個問題不應該被解決兩次。下圖為開發(fā)項目機制所涉及到的插件工欲善其事，必先利其器，語言，框架皆可以歸結為器而不當僅局限于開發(fā)工具以及機。原文鏈接： http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/ 一...

rickchen 2019-08-19 18:17 評論0 收藏0
HTML 簡單拼圖游戲

摘要：基本需求有一個固定區(qū)域，被拆分成個同等大小的碎片，拿走其中一塊，靠近缺口的塊可以向缺口方向移動當拼出原來的圖樣視為完成。左右移動很簡單，序號大的序號小的即可。先不廢話，請看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞這么個微信活動...

vslam 2019-08-19 18:36 評論0 收藏0