脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5游戏实战之拼图游戏（包含关卡），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

        VAR selection = "#r"+rows+"c"+cols+"i"+index;         image.setImageSrc(imageSrc + selection);

        var selection = "#x"+x+"y"+y+"w"+w+"h"+h;         image.setImageSrc(imageSrc + selection);

image.setValue(imageindex);

function PImage(element) {     this.element = element; //element就是图片控件     //处理拖动事件     element.addEventListener("pointerdown", this.onDragStart.bind(this));     element.addEventListener("pointermove", this.onDragMove.bind(this));     element.addEventListener("pointerup", this.onDragEnd.bind(this));      element.pImage = this; }  //跟另外一个PImage交换图片资源 PImage.PRototype.exchangeImage = function(pImage) {     var src = this.element.getImageSrc();     this.element.setImageSrc(pImage.element.getImageSrc());     pImage.element.setImageSrc(src) }  PImage.prototype.canHandleEvent = function(event) {     if(event.beforeChild || !this.element.getImageSrc()) {         return false;     }     var container = this.element.getParent();     var controll = container.seats.getControll();     return !controll.startInfo || controll.startInfo.element == this.element; }  PImage.prototype.onDragStart = function(event) {     if(!this.canHandleEvent(event)) {         return;     }     this.startP = {x:event.point.x, y:event.point.y};     var container = this.element.getParent();     var point = this.convertEventPoint(event.point);     container.seats.getControll().onPick(this, point);      this.element.setOpacITy(0);     this.onDragMove(event); };  PImage.prototype.onDragMove = function(event) {     if(!this.canHandleEvent(event)) {         return;     }      var point = this.convertEventPoint(event.point);     point.x -= this.startP.x;     point.y -= this.startP.y;     var container = this.element.getParent();     container.seats.getControll().onMove(this, point); };  //转换坐标，因为拖动控件是相对当前小图片，要转换为相对于场景坐标 PImage.prototype.convertEventPoint = function(point) {     var p = this.element.getPositionInWindow();     var parent = this.element.getParent();     var x = p.x + point.x - parent.getXOffset();     var y = p.y + point.y + parent.getYOffset() ;     p = {x:x, y: y};      return p; };  PImage.prototype.onDragEnd = function(event) {     console.LOG(this.element.name, "pointup");     if(!this.canHandleEvent(event)) {         return;     }     var point = this.convertEventPoint(event.point);      var container = this.element.getParent();      container.seats.getControll().onPut(this, point); };

//这是公共类 function Seats(container) {     this.container = container;     if(container) {         container.seats = this;     }     return this; }  Seats.prototype.initContainer = function() {     return this;     }  Seats.prototype.onPut = function(pImage, point) { }  Seats.prototype.getControll = function() {     return this.controll; }  Seats.prototype.setControll = function(controll) {     this.controll = controll; }  Seats.prototype.onPick = function(pImage, point) { }  Seats.prototype.onMove = function(pImage, point) { }  Seats.prototype.onCancel = function(pImage, point) { }  Seats.prototype.onRemove = function(element) { } 

//这是起始容器 function SourceSeats(container) {     Seats.call(this, container);     this.pImages = [];     return this; }  SourceSeats.prototype = new Seats(); SourceSeats.prototype.constructor = SourceSeats;  SourceSeats.prototype.init = function(baseImage, rows, cols) {     console.log("SourceSeats.prototype.init");     var container = this.container;     var pImages = this.pImages;     var indexs = [];     var num = rows * cols;     for(var i = 0; i < num; i++) {         indexs.push(i);     }      indexs.sort(function() {         return Math.random() > 0.5 ? 1 : -1;     });     var imageSrc = baseImage.getImageSrc();     baseImage.setVisible(true).setEnable(true);     indexs.foreach(function(index) {         var child = baseImage.clone();         container.addChild(child);         child.setImageScale(0, 0);         var selection = "#r"+rows+"c"+cols+"i"+index;         child.setImageSrc(imageSrc + selection);         pImages.push(new PImage(child));     });     container.relayoutChildren(); }  SourceSeats.prototype.onRemove = function(element) {     if(element.getParent() != this.container) {         return;     }     var index = this.pImages.indexOf(element.pImage);     this.pImages.slice(index, 1);     element.remove(true);     setTimeout(function() {         this.container.relayoutChildren();     }.bind(this), 0); }  SourceSeats.prototype.onPut = function(startInfo, point) {     var element = startInfo.element;     var index = startInfo.index;     var elementAtPoint = element.getWindow().findChildByPoint(point, true);      if(startInfo.seats != this)  {         //从dest拖到source，创建一个PImage         var c = element.clone();         element.setImageSrc(null);         c.setOpacity(100);         this.container.addChild(c, elementAtPoint ? elementAtPoint.getZIndex() - 1 : this.container.getChildren().length + 1);         this.pImages.push(new PImage(c));         setTimeout(function() {             this.container.relayoutChildren();         }.bind(this), 0);         this.getControll().onPuttedDone(element, null);     } else {         element.setImageSrc(startInfo.imageSrc);         this.getControll().onPuttedDone(element, elementAtPoint);     } }

//这是目标容器 function DestSeats(container) {     Seats.call(this, container);     this.pImages = [];     return this; }  DestSeats.prototype = new Seats(); DestSeats.prototype.constructor = DestSeats;  DestSeats.prototype.init = function(baseImage, rows, cols) {     var container = this.container;     var pImages = this.pImages;     var num = rows * cols;     container.setCols(cols);     container.setRows(rows);     baseImage.setEnable(true).setVisible(true);     for(var i = 0; i < num; i++) {         var child = baseImage.clone();         child.setImageSrc(null);         child.setImageScale(0, 0);         container.addChild(child);         pImages.push(new PImage(child));     }     container.relayoutChildren(); }  DestSeats.prototype.onPut = function(startInfo, point) {     var element = startInfo.element;     var index = startInfo.index;     var elementAtPoint = element.getWindow().findChildByPoint(point, true);     var removeElement = false;      element.pImage.exchangeImage(elementAtPoint.pImage);     this.getControll().onPuttedDone(element, elementAtPoint); } 

//游戏控制类，处理游戏逻辑的 GameControll = function(win) {     this.win = win;     this.gameTime = 0;     win.find("计时器控件").stop();     win.find("计时器").setValue("00:00s"); }  GameControll.prototype.initGame = function(rows, cols) {     var win = this.win;      this.sourceSeats = new SourceSeats(win.find("选图框").getChild(0));     this.destSeats = new DestSeats(win.find("底图框架").getChild(0));      this.cols = cols;     this.rows = rows;     this.sourceSeats.setControll(this);     this.destSeats.setControll(this);     var level = this.readGameLevel();     var baseImage = win.find("selecting-image");     var MAX_LEVEL = 11;     if(level >= MAX_LEVEL) {         level = 0;     }     baseImage.setValue(level);     //初始化两个容器     this.sourceSeats.init(baseImage, rows,  cols);     this.destSeats.init(baseImage, rows, cols);     baseImage.setVisible(false).setEnable(false);     this.baseImage = baseImage;     this.gameLevel = level;     win.find("迷宫答案").setImageSrc(baseImage.getImageSrc()); };  GameControll.prototype.readGameLevel = function() {     var value = webstorage.get("game-level");     value = parseInt(value);     return isNaN(value) ? 0 : value;  }  GameControll.prototype.writeGameLevel = function(level) {     //存储游戏进度     WebStorage.set("game-level", level); }  GameControll.prototype.showGameTime = function() {     this.gameTime++;     var win = this.win;     var min = 0;     var sec = 0;     min = Math.floor(this.gameTime/60);     sec = this.gameTime%60;      if (min < 10) {         min = "0"+min;     }     if (sec < 10) {         sec = "0"+sec;     }     //显示游戏时长     win.find("计时器").setValue(min+":"+sec+"s"); }  GameControll.prototype.onPick = function(pImage) {     if(this.startInfo) {         return;     }     var element = pImage.element;     this.startInfo = {         index : element.getZIndex(),         seats : element.getParent().seats,         imageSrc : element.getImageSrc(),         element : element,     };      element.getParent().seats.onPick(pImage);      var baseImage = this.baseImage;     baseImage.setImageScale(0, 0);     baseImage.setImageSrc(pImage.element.getImageSrc());     baseImage.setVisible(true); }  GameControll.prototype.pointInRect = function(rect, point) {     return (point.x >= rect.x && point.x <= rect.x + rect.w          && point.y >= rect.y && point.y <= rect.y + rect.h); };  GameControll.prototype.hitElement = function(element, point) {     var p = element.getPositionInWindow();     var rect = {x:p.x, y:p.y, w:element.w, h:element.h};     return this.pointInRect(rect, point); };  GameControll.prototype.pointInSeats = function(seats, point) {     return this.hitElement(seats.container, point); }  GameControll.prototype.onMove = function(pImage, point) {     var baseImage = this.baseImage;     baseImage.setVisible(true);     baseImage.setPosition(point.x, point.y); }  GameControll.prototype.onPut = function(pImage, point) {     var win = pImage.element.getWindow();     if(this.pointInSeats(this.sourceSeats, point)) {         this.sourceSeats.onPut(this.startInfo, point);     } else if(this.pointInSeats(this.destSeats, point)) {         this.destSeats.onPut(this.startInfo, point);     } else {         //没有点到网格上，取消替换         this.onCancel(pImage, point);     }      if(this.checkWin()) {         this.destSeats.container.setEnable(false);         this.sourceSeats.container.setEnable(false);         this.onGameWin();     } }  GameControll.prototype.setBaseImageSrc = function(src) {     this.baseImage.setImageSrc(src);     return this; }  GameControll.prototype.aniMATEBaseImageToStart = function(onDone) {     var startInfo = this.startInfo;     if(!startInfo) {         return;     }     var element = startInfo.element;     var p = element.getPositionInWindow();     var sourceContainer = this.sourceSeats.container;     if(element.getParent() == sourceContainer) {         p.x -= sourceContainer.getXOffset();         p.y += sourceContainer.getYOffset();     }      var CFg = {Xend: p.x, yEnd: p.y, duration:300, interpolator:'l'};     var baseImage = this.baseImage;     this.animateImage(cfg, baseImage, function() {         element.setImageSrc(baseImage.getImageSrc());         element.setOpacity(100);         baseImage.setVisible(false);         onDone && onDone();     }.bind(this)) }  GameControll.prototype.onCancel = function(pImage, point) {     this.animateBaseImageToStart(function() {         this.startInfo = null;     }.bind(this)); }  GameControll.prototype.animateImage = function(cfg, image, onDone) {     image.setZIndex(100);     image.animate(cfg, function() {         if(onDone) onDone();     }); };  GameControll.prototype.onGameWin = function() {     var initData = {}     this.writeGameLevel(this.gameLevel + 1);     this.win.openWindow("游戏结束界面", initData);     this.win.find("计时器控件").stop(); }  GameControll.prototype.setBaseImageVisibility = function(visible) {     this.baseImage.setVisible(visible); }  GameControll.prototype.confirmPImage = function(pImage) {     var seats = pImage.element.getParent().seats(); }  GameControll.prototype.checkWin = function() {     var container = this.destSeats.container;     var num = this.rows * this.cols;     for(var i = 0; i < num; i++) {         var selection = "#r"+this.rows+"c"+this.cols+"i"+i;         var element = container.getChild(i);         var src = element.getImageSrc();         //判断是否位置与图片后缀一致         if(!src || src.indexOf(selection) < 0) {             return false;         }     }     return true; }  GameControll.prototype.onPuttedDone = function(From, to) {     if(!to) {         from.setOpacity(100);         this.baseImage.setVisible(false);         this.startInfo = null;         return;     }     to.setVisible(true);     if(!from.getImageSrc()) {         var element = this.startInfo.element;         this.startInfo.seats.onRemove(element);         this.baseImage.setVisible(false);         from.setOpacity(100);         this.startInfo = null;     } else {         this.setBaseImageSrc(from.getImageSrc()).animateBaseImageToStart(function() {             from.setOpacity(100);             this.startInfo = null;         }.bind(this));     } } 

拼图游戏是每个人小时候都玩过的经典休闲游戏，依托Hola Studio强大的图片功能和事件回调体系，实现一个游戏性十足的拼图游戏并不难。本文就介绍整个游戏的制作过程，本游戏包含完整的游戏元素，包括广告、关卡、分享等元素，你可以自行添加其他游戏元素，也可以将素材替换成你需要的元素。

游戏截图

扫描二维码

游戏链接
点击链接打开游戏

导入为你的项目
点击链接导入项目

游戏界面的编辑

游戏主要有四个界面

游戏界面

游戏界面的控件树形图如图所示：

而界面效果图：

图片的操作

拼图游戏免不了跟图片的打交道，关于图片更多的便捷操作和技巧，可以参考链接关于jim写的番外关于图片不得不说的秘密。

图片的存储

在我们的拼图游戏中，是分为多关卡的，每个关卡一张图片，这些关卡的图片都可以存在图片控件的备用图片中。如下图所示：

图片的切割

我们的游戏中，每个图片都被切割成4x4个小图片，然后拼成一张大的，我们不可能又傻又天真，真用PS之类工具去切割成图片。借助Hola Studio强大的图片操作，我们可以采用如下方式切割图片：

        var selection = "#r"+rows+"c"+cols+"i"+index;         image.setImageSrc(imageSrc + selection);

其中rows是你向切割的总行数，cols是总列数，index是次序，imageSrc是图片的链接，image就是图片控件了，是不是非常简单。另一种切割图片的方法是：

        var selection = "#x"+x+"y"+y+"w"+w+"h"+h;         image.setImageSrc(imageSrc + selection);

其中x,y就是起始点相对于原始图片原点的位置，w,h就是切割的宽高了。

图片的切换

每个关卡完成以后，要切换到下一张图片，可以采用如下方法

image.setValue(imageIndex);

这里的imageIndex就是备用图片的序号了。参考UIImage

图片的拖动

如果你熟悉Hola Studio就知道Hola Studio有强大的事件代码入口，比如onClick，onBeforeOpen等等，你只需要将代码写道事件里即可。但是对于资深的游戏开发者来说，这种方式显得有点不够“高大上“，今天就着重介绍另一种熟知编辑事件回调的方法――addEventListener

在我们的游戏中，这些个小图片封装成了一个类PImage

function PImage(element) {     this.element = element; //element就是图片控件     //处理拖动事件     element.addEventListener("pointerdown", this.onDragStart.bind(this));     element.addEventListener("pointermove", this.onDragMove.bind(this));     element.addEventListener("pointerup", this.onDragEnd.bind(this));      element.pImage = this; }  //跟另外一个PImage交换图片资源 PImage.prototype.exchangeImage = function(pImage) {     var src = this.element.getImageSrc();     this.element.setImageSrc(pImage.element.getImageSrc());     pImage.element.setImageSrc(src) }  PImage.prototype.canHandleEvent = function(event) {     if(event.beforeChild || !this.element.getImageSrc()) {         return false;     }     var container = this.element.getParent();     var controll = container.seats.getControll();     return !controll.startInfo || controll.startInfo.element == this.element; }  PImage.prototype.onDragStart = function(event) {     if(!this.canHandleEvent(event)) {         return;     }     this.startP = {x:event.point.x, y:event.point.y};     var container = this.element.getParent();     var point = this.convertEventPoint(event.point);     container.seats.getControll().onPick(this, point);      this.element.setOpacity(0);     this.onDragMove(event); };  PImage.prototype.onDragMove = function(event) {     if(!this.canHandleEvent(event)) {         return;     }      var point = this.convertEventPoint(event.point);     point.x -= this.startP.x;     point.y -= this.startP.y;     var container = this.element.getParent();     container.seats.getControll().onMove(this, point); };  //转换坐标，因为拖动控件是相对当前小图片，要转换为相对于场景坐标 PImage.prototype.convertEventPoint = function(point) {     var p = this.element.getPositionInWindow();     var parent = this.element.getParent();     var x = p.x + point.x - parent.getXOffset();     var y = p.y + point.y + parent.getYOffset() ;     p = {x:x, y: y};      return p; };  PImage.prototype.onDragEnd = function(event) {     console.log(this.element.name, "pointup");     if(!this.canHandleEvent(event)) {         return;     }     var point = this.convertEventPoint(event.point);      var container = this.element.getParent();      container.seats.getControll().onPut(this, point); };

图片的容器封装

拼图游戏中的起始容器和目的容器分别是一个UIGridViewX控件，需要做一些封装。

//这是公共类 function Seats(container) {     this.container = container;     if(container) {         container.seats = this;     }     return this; }  Seats.prototype.initContainer = function() {     return this;     }  Seats.prototype.onPut = function(pImage, point) { }  Seats.prototype.getControll = function() {     return this.controll; }  Seats.prototype.setControll = function(controll) {     this.controll = controll; }  Seats.prototype.onPick = function(pImage, point) { }  Seats.prototype.onMove = function(pImage, point) { }  Seats.prototype.onCancel = function(pImage, point) { }  Seats.prototype.onRemove = function(element) { } 

//这是起始容器 function SourceSeats(container) {     Seats.call(this, container);     this.pImages = [];     return this; }  SourceSeats.prototype = new Seats(); SourceSeats.prototype.constructor = SourceSeats;  SourceSeats.prototype.init = function(baseImage, rows, cols) {     console.log("SourceSeats.prototype.init");     var container = this.container;     var pImages = this.pImages;     var indexs = [];     var num = rows * cols;     for(var i = 0; i < num; i++) {         indexs.push(i);     }      indexs.sort(function() {         return Math.random() > 0.5 ? 1 : -1;     });     var imageSrc = baseImage.getImageSrc();     baseImage.setVisible(true).setEnable(true);     indexs.forEach(function(index) {         var child = baseImage.clone();         container.addChild(child);         child.setImageScale(0, 0);         var selection = "#r"+rows+"c"+cols+"i"+index;         child.setImageSrc(imageSrc + selection);         pImages.push(new PImage(child));     });     container.relayoutChildren(); }  SourceSeats.prototype.onRemove = function(element) {     if(element.getParent() != this.container) {         return;     }     var index = this.pImages.indexOf(element.pImage);     this.pImages.slice(index, 1);     element.remove(true);     setTimeout(function() {         this.container.relayoutChildren();     }.bind(this), 0); }  SourceSeats.prototype.onPut = function(startInfo, point) {     var element = startInfo.element;     var index = startInfo.index;     var elementAtPoint = element.getWindow().findChildByPoint(point, true);      if(startInfo.seats != this)  {         //从dest拖到source，创建一个PImage         var c = element.clone();         element.setImageSrc(null);         c.setOpacity(100);         this.container.addChild(c, elementAtPoint ? elementAtPoint.getZIndex() - 1 : this.container.getChildren().length + 1);         this.pImages.push(new PImage(c));         setTimeout(function() {             this.container.relayoutChildren();         }.bind(this), 0);         this.getControll().onPuttedDone(element, null);     } else {         element.setImageSrc(startInfo.imageSrc);         this.getControll().onPuttedDone(element, elementAtPoint);     } }

//这是目标容器 function DestSeats(container) {     Seats.call(this, container);     this.pImages = [];     return this; }  DestSeats.prototype = new Seats(); DestSeats.prototype.constructor = DestSeats;  DestSeats.prototype.init = function(baseImage, rows, cols) {     var container = this.container;     var pImages = this.pImages;     var num = rows * cols;     container.setCols(cols);     container.setRows(rows);     baseImage.setEnable(true).setVisible(true);     for(var i = 0; i < num; i++) {         var child = baseImage.clone();         child.setImageSrc(null);         child.setImageScale(0, 0);         container.addChild(child);         pImages.push(new PImage(child));     }     container.relayoutChildren(); }  DestSeats.prototype.onPut = function(startInfo, point) {     var element = startInfo.element;     var index = startInfo.index;     var elementAtPoint = element.getWindow().findChildByPoint(point, true);     var removeElement = false;      element.pImage.exchangeImage(elementAtPoint.pImage);     this.getControll().onPuttedDone(element, elementAtPoint); } 

//游戏控制类，处理游戏逻辑的 GameControll = function(win) {     this.win = win;     this.gameTime = 0;     win.find("计时器控件").stop();     win.find("计时器").setValue("00:00s"); }  GameControll.prototype.initGame = function(rows, cols) {     var win = this.win;      this.sourceSeats = new SourceSeats(win.find("选图框").getChild(0));     this.destSeats = new DestSeats(win.find("底图框架").getChild(0));      this.cols = cols;     this.rows = rows;     this.sourceSeats.setControll(this);     this.destSeats.setControll(this);     var level = this.readGameLevel();     var baseImage = win.find("selecting-image");     var MAX_LEVEL = 11;     if(level >= MAX_LEVEL) {         level = 0;     }     baseImage.setValue(level);     //初始化两个容器     this.sourceSeats.init(baseImage, rows,  cols);     this.destSeats.init(baseImage, rows, cols);     baseImage.setVisible(false).setEnable(false);     this.baseImage = baseImage;     this.gameLevel = level;     win.find("迷宫答案").setImageSrc(baseImage.getImageSrc()); };  GameControll.prototype.readGameLevel = function() {     var value = WebStorage.get("game-level");     value = parseInt(value);     return isNaN(value) ? 0 : value;  }  GameControll.prototype.writeGameLevel = function(level) {     //存储游戏进度     WebStorage.set("game-level", level); }  GameControll.prototype.showGameTime = function() {     this.gameTime++;     var win = this.win;     var min = 0;     var sec = 0;     min = Math.floor(this.gameTime/60);     sec = this.gameTime%60;      if (min < 10) {         min = "0"+min;     }     if (sec < 10) {         sec = "0"+sec;     }     //显示游戏时长     win.find("计时器").setValue(min+":"+sec+"s"); }  GameControll.prototype.onPick = function(pImage) {     if(this.startInfo) {         return;     }     var element = pImage.element;     this.startInfo = {         index : element.getZIndex(),         seats : element.getParent().seats,         imageSrc : element.getImageSrc(),         element : element,     };      element.getParent().seats.onPick(pImage);      var baseImage = this.baseImage;     baseImage.setImageScale(0, 0);     baseImage.setImageSrc(pImage.element.getImageSrc());     baseImage.setVisible(true); }  GameControll.prototype.pointInRect = function(rect, point) {     return (point.x >= rect.x && point.x <= rect.x + rect.w          && point.y >= rect.y && point.y <= rect.y + rect.h); };  GameControll.prototype.hitElement = function(element, point) {     var p = element.getPositionInWindow();     var rect = {x:p.x, y:p.y, w:element.w, h:element.h};     return this.pointInRect(rect, point); };  GameControll.prototype.pointInSeats = function(seats, point) {     return this.hitElement(seats.container, point); }  GameControll.prototype.onMove = function(pImage, point) {     var baseImage = this.baseImage;     baseImage.setVisible(true);     baseImage.setPosition(point.x, point.y); }  GameControll.prototype.onPut = function(pImage, point) {     var win = pImage.element.getWindow();     if(this.pointInSeats(this.sourceSeats, point)) {         this.sourceSeats.onPut(this.startInfo, point);     } else if(this.pointInSeats(this.destSeats, point)) {         this.destSeats.onPut(this.startInfo, point);     } else {         //没有点到网格上，取消替换         this.onCancel(pImage, point);     }      if(this.checkWin()) {         this.destSeats.container.setEnable(false);         this.sourceSeats.container.setEnable(false);         this.onGameWin();     } }  GameControll.prototype.setBaseImageSrc = function(src) {     this.baseImage.setImageSrc(src);     return this; }  GameControll.prototype.animateBaseImageToStart = function(onDone) {     var startInfo = this.startInfo;     if(!startInfo) {         return;     }     var element = startInfo.element;     var p = element.getPositionInWindow();     var sourceContainer = this.sourceSeats.container;     if(element.getParent() == sourceContainer) {         p.x -= sourceContainer.getXOffset();         p.y += sourceContainer.getYOffset();     }      var cfg = {xEnd: p.x, yEnd: p.y, duration:300, interpolator:'l'};     var baseImage = this.baseImage;     this.animateImage(cfg, baseImage, function() {         element.setImageSrc(baseImage.getImageSrc());         element.setOpacity(100);         baseImage.setVisible(false);         onDone && onDone();     }.bind(this)) }  GameControll.prototype.onCancel = function(pImage, point) {     this.animateBaseImageToStart(function() {         this.startInfo = null;     }.bind(this)); }  GameControll.prototype.animateImage = function(cfg, image, onDone) {     image.setZIndex(100);     image.animate(cfg, function() {         if(onDone) onDone();     }); };  GameControll.prototype.onGameWin = function() {     var initData = {}     this.writeGameLevel(this.gameLevel + 1);     this.win.openWindow("游戏结束界面", initData);     this.win.find("计时器控件").stop(); }  GameControll.prototype.setBaseImageVisibility = function(visible) {     this.baseImage.setVisible(visible); }  GameControll.prototype.confirmPImage = function(pImage) {     var seats = pImage.element.getParent().seats(); }  GameControll.prototype.checkWin = function() {     var container = this.destSeats.container;     var num = this.rows * this.cols;     for(var i = 0; i < num; i++) {         var selection = "#r"+this.rows+"c"+this.cols+"i"+i;         var element = container.getChild(i);         var src = element.getImageSrc();         //判断是否位置与图片后缀一致         if(!src || src.indexOf(selection) < 0) {             return false;         }     }     return true; }  GameControll.prototype.onPuttedDone = function(from, to) {     if(!to) {         from.setOpacity(100);         this.baseImage.setVisible(false);         this.startInfo = null;         return;     }     to.setVisible(true);     if(!from.getImageSrc()) {         var element = this.startInfo.element;         this.startInfo.seats.onRemove(element);         this.baseImage.setVisible(false);         from.setOpacity(100);         this.startInfo = null;     } else {         this.setBaseImageSrc(from.getImageSrc()).animateBaseImageToStart(function() {             from.setOpacity(100);             this.startInfo = null;         }.bind(this));     } } 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5游戏实战之拼图游戏（包含关卡）全部内容，希望文章能够帮你解决html5教程-HTML5游戏实战之拼图游戏（包含关卡）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。