一，前言

本游戏是鄙人研究lufylegend数日之后，闲暇之余写下的。本游戏运用全新的技术HTML5写成的。游戏引擎为国产的lufylegend.js，大家可以去它的官网看看。游戏处于测试阶段，希望各位为游戏提点意见。另外游戏中的拼图是随即分配，保证游戏的随即性。

二，怎么玩？

下载地址（含原码+图片）：

http://files.cnblogs.com/ducle/Puzzle.rar

在线试玩：

http://www.lufylegend.com/lufylegend_developers/yorhom_puzzle/index.html

操作说明：

进入游戏后，通过点击拼图块，让图片还原，本游戏包含了游戏记录，大家可以给朋友互相比一比，看谁能在最短时间内让图片还原。

三，游戏还需更新的地方

1，拼图打乱后，如果永远不能还原，不能重新打乱。

2，游戏记录存在缺陷。

3，加入玩家自己的图片。

四，游戏引擎

本游戏运用国产的lufylegend引擎，版本为1.5.2，如果大家感兴趣可以去官网看看：

http://lufylegend.com/lufylegend

上面有此引擎的下载和API介绍。它是一个非常适合做游戏的引擎，在这里不多说了。

五，游戏截图

随机打乱的拼图块：

简洁的开始界面：

点击空缺处附近的一块可以使那一块向空缺处移动：

var setScreenWidth = 390;
var setScreenHeight = 500;
init(50,"mylegend",setScreenWidth,setScreenHeight,main);
LSystem.screen(LStage.FULL_SCREEN);var backLayer,loadingLayer,imgLayer,ctrlLayer,borderLayer,overLayer,initGameLayer,recordLayer,aboutLayer;
var steps = 0,time = 0;
var grades;
var isWin = 0;
var imglist = {};
var imgData = [{name:"garden",path:"./images/garden.jpg"},{name:"outside",path:"./images/outside.jpg"},{name:"button01",path:"./images/button01.png"},{name:"button02",path:"./images/button02.png"},{name:"button03",path:"./images/button03.png"},{name:"button04",path:"./images/button04.png"},{name:"button05",path:"./images/button05.png"},{name:"gameover_rect",path:"./images/rect.png"},{name:"button01_over",path:"./images/button01_over.png"},{name:"button02_over",path:"./images/button02_over.png"},{name:"button04_over",path:"./images/button04_over.png"},{name:"button05_over",path:"./images/button05_over.png"}
];function main(){loadingLayer = new LoadingSample1();addChild(loadingLayer);LLoadManage.load(imgData,function(progress){loadingLayer.setProgress(progress);},function(result){imglist = result;removeChild(loadingLayer);loadingLayer = null;//加入游戏开始时的背景
            gameInitBack();});
}
var mapLookData;
function gameInit(){mapLookData = Math.ceil(Math.random()*(1-(-1))-1);//初始化游戏层
    initLayer();//初始化背景
    initBackground();//调用随即分配地图的函数
    getRandomMap();//加入两个用户可见的变量
    addText();//加入要达到的图片
    addTrueImg();//初始化拼图块
    initImg();
}
var startBtn;
var aboutBtn;
var recordBtn;
var initTextContent = ["智力大拼图","版本：v0.1"];
var initText;
function gameInitBack(){gameInit();initGameLayer = new LSprite();backLayer.addChild(initGameLayer);initGameLayer.graphics.drawRect(3,"dimgray",[15,30,360,440],true,"lightgray");for(var i=0;i<initTextContent.length;i++){initText = new LTextField();initText.weight = "bold";initText.text = initTextContent[i];if(i==0){initText.size = 25;initText.color = "dimgray";initText.font = "黑体";initText.x = (LGlobal.width - initText.getWidth())*0.5;initText.y = 130;}if(i==1){initText.size = 15;initText.color = "white";initText.font = "宋体";initText.x = (LGlobal.width - initText.getWidth())*0.5;initText.y = 170;    }initGameLayer.addChild(initText);}startBtn = new LButton(new LBitmap(new LBitmapData(imglist["button01"])),new LBitmap(new LBitmapData(imglist["button01_over"])));  startBtn.x = (LGlobal.width - startBtn.getWidth())*0.5;startBtn.y = 200;  initGameLayer.addChild(startBtn);aboutBtn = new LButton(new LBitmap(new LBitmapData(imglist["button05"])),new LBitmap(new LBitmapData(imglist["button05_over"])));  aboutBtn.x = (LGlobal.width - aboutBtn.getWidth())*0.5;  aboutBtn.y = 250;  initGameLayer.addChild(aboutBtn);recordBtn = new LButton(new LBitmap(new LBitmapData(imglist["button02"])),new LBitmap(new LBitmapData(imglist["button02_over"])));  recordBtn.x = (LGlobal.width - recordBtn.getWidth())*0.5;  recordBtn.y = 300;  initGameLayer.addChild(recordBtn);startBtn.addEventListener(LMouseEvent.MOUSE_DOWN, function(){//加入事件监听
        addEvent();if(startStatus == 0){startStatus++;changeTime = setInterval(function(){time+=1; timeText.text = "游戏用时："+time;},1000);}LTweenLite.to(initGameLayer,1,{alpha:1});initGameLayer.removeAllChild();backLayer.removeChild(initGameLayer);});  recordBtn.addEventListener(LMouseEvent.MOUSE_DOWN, function(){showRecord();});aboutBtn.addEventListener(LMouseEvent.MOUSE_DOWN, aboutGame);LTweenLite.to(initGameLayer,1,{alpha:0.9});
}
var initCloseBtn;
var aboutTextArr = ["关于游戏","游戏引擎：lufylegend","游戏版本：v0.1","程序设计：Yorhom","素材来源：按钮自画，拼图来自网络","我的博客：blog.csdn.net/yorhomwang","我的邮箱：wangyuehao1999@gmail.com"];
var aboutText;function aboutGame(){aboutLayer = new LSprite();backLayer.addChild(aboutLayer);aboutLayer.graphics.drawRect(3,"dimgray",[15,30,360,440],true,"lightgray");initCloseBtn = new LButton(new LBitmap(new LBitmapData(imglist["button03"])),new LBitmap(new LBitmapData(imglist["button03"])));  initCloseBtn.x = 342;initCloseBtn.y = 33;  aboutLayer.addChild(initCloseBtn);initCloseBtn.addEventListener(LMouseEvent.MOUSE_DOWN, function(event){LTweenLite.to(aboutLayer,1,{alpha:1});aboutLayer.removeAllChild();backLayer.removeChild(aboutLayer);});LTweenLite.to(aboutLayer,1,{alpha:0.9});for(var i=0;i<aboutTextArr.length;i++){aboutText = new LTextField();aboutText.weight = "bold";aboutText.text = aboutTextArr[i];if(i==0){aboutText.size = 25;aboutText.color = "dimgray";aboutText.font = "黑体";aboutText.x = (LGlobal.width - aboutText.getWidth())*0.5;aboutText.y = 33;}else{aboutText.size = 12;aboutText.color = "white";aboutText.font = "Tahoma";aboutText.x = 30;aboutText.y = 100 + (i-1)*22;    }aboutLayer.addChild(aboutText);}
}
function initLayer(){backLayer = new LSprite();addChild(backLayer);imgLayer = new LSprite();backLayer.addChild(imgLayer);borderLayer = new LSprite();backLayer.addChild(borderLayer);overLayer = new LSprite();backLayer.addChild(overLayer);ctrlLayer = new LSprite();backLayer.addChild(ctrlLayer);
}
function initBackground(){//画出图片上的横向网格var color = "gray";for(var i=0;i<3;i++){borderLayer.graphics.drawRect(5,color,[0,i*130,setScreenWidth,130],false);}//画出图片上的纵向网格for(var i=0;i<3;i++){borderLayer.graphics.drawRect(5,color,[i*130,0,130,390],false);}//画出游戏的边框和背景borderLayer.graphics.drawRect(6,"dimgray",[0,0,setScreenWidth,setScreenHeight],false);backLayer.graphics.drawRect(5,"dimgray",[0,0,setScreenWidth,setScreenHeight],true,"lightgray");
}
//地图数组
var tileData = [[0,1,2],[3,4,5],[6,8,7]
];function initImg(){var i,j;var index,indexY,indexX;var bitmapdata,bitmap;for(i=0;i<3;i++){for(j=0;j<3;j++){//从地图数组中得到相应位置的图片坐标index = tileData[i][j];//小图片的竖坐标indexY = Math.floor(index/3);//小图片的横坐标indexX = index - indexY*3;//得到小图片if(mapLookData==0){bitmapdata = new LBitmapData(imglist["garden"],indexX*130,indexY*130,130,130);}else{bitmapdata = new LBitmapData(imglist["outside"],indexX*130,indexY*130,130,130);}//bitmapdata = new LBitmapData(imglist["garden"],indexX*130,indexY*130,130,130);bitmap = new LBitmap(bitmapdata);//设置小图片的显示位置bitmap.x = j*130;  bitmap.y = i*130;//将小图片显示到地图层
            imgLayer.addChild(bitmap);}}toWin();stepText.text = "行动次数："+steps;
}
//原数组
var tileOriginaArray = [];
//最终数组
var finallyMapArry = [];function getRandomMap(){//用来装每一行的值的临时数组var partTimeArray = [];//用于遍历变量var i,j;//设置最大限度var count = 9;//第一次遍历让原数组获得值for(i=0;i<count;i++){tileOriginaArray[i] = i;}//将原数组打乱顺序tileOriginaArray.sort(function(){return 0.5 - Math.random();});//第二次遍历让原数组分割成二维数组for(j=0;j<count;j++){//给二维数组某一行赋值partTimeArray[partTimeArray.length] = tileOriginaArray[j];//判断是否达到每行需要的列数if((j+1)%3==0){//给最终数组装入每一行
            finallyMapArry.push(partTimeArray);//清空临时数组partTimeArray = [];}}//给地图数组赋值为最终数组tileData = finallyMapArry;
}
function addTrueImg(){var trueBitmapdata,trueBitmap;if(mapLookData==0){trueBitmapdata = new LBitmapData(imglist["garden"]);}else{trueBitmapdata = new LBitmapData(imglist["outside"]);}trueBitmap = new LBitmap(trueBitmapdata);trueBitmap.x = 160;trueBitmap.y = 400;trueBitmap.scaleX = 0.2;trueBitmap.scaleY = 0.2;overLayer.addChild(trueBitmap);overLayer.graphics.drawRect(3,"dimgray",[15,423,120,28],false);overLayer.graphics.drawRect(3,"dimgray",[255,423,120,28],false);
}
function addEvent(event){imgLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onDown);
}
var partX,partY;
var changeTime;
var startStatus = 0;function onDown(event){var mouseX,mouseY;mouseX = event.offsetX;mouseY = event.offsetY;partX = Math.floor(mouseX/130);partY = Math.floor(mouseY/130);
    queryMove(partX,partY);
}
function queryMove(x,y){steps+=1;if(x<2 && tileData[y][x+1] == 8){tileData[y][x+1] = tileData[y][x];tileData[y][x] = 8;initImg();}else if(x>0 && tileData[y][x-1] == 8){tileData[y][x-1] = tileData[y][x];tileData[y][x] = 8;initImg();}else if(y<2 && tileData[y+1][x] == 8){tileData[y+1][x] = tileData[y][x];tileData[y][x] = 8;initImg();}else if(y>0 && tileData[y-1][x] == 8){tileData[y-1][x] = tileData[y][x];tileData[y][x] = 8;initImg();}
}
//正确数组
var trueTileData = [[0,1,2],[3,4,5],[6,7,8]
];
var amount;
localStorage["locRecordNo"] = 0;function toWin(){if(isWin != 1 && tileData.toString() == trueTileData.toString()){amount = steps + time;gameOver();writeRecord();}
}
//定义输出层
var stepText;
var timeText;function addText(){    stepText = new LTextField();stepText.size = 10;stepText.color = "black";stepText.x = 20;stepText.y = 430;overLayer.addChild(stepText);timeText = new LTextField();timeText.size = 10;timeText.color = "black";timeText.text = "游戏用时："+time;timeText.x = 260;timeText.y = 430;overLayer.addChild(timeText);
}
var btn01;
var btn02;
var gameoverBitMap;
var winText;
var winTextContent = [];function gameOver(){if(amount<40){grades = "圣者";}else if(amount>39 && amount<80){grades = "前将军";}else if(amount>79 && amount<160){grades = "左将军";}else if(amount>159 && amount<200){grades = "右将军";}else if(amount>199 && amount<240){grades = "中将军";}else if(amount>239 && amount<300){grades = "后将军";}else if(amount>299 && amount<500){grades = "帐中军师";}else if(amount>499 && amount<1000){grades = "小小策士";}else if(amount>999 && amount<2000){grades = "献世小卒";}else{grades = "押粮步兵";}winTextContent = ["恭喜您，您通关了","您的等级是："+grades];gameoverBitMap = new LBitmap(new LBitmapData(imglist["gameover_rect"]));gameoverBitMap.x = 30;gameoverBitMap.y = 100;ctrlLayer.addChild(gameoverBitMap);imgLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,onDown);clearInterval(changeTime);startStatus = -1;isWin = 1;for(var i=0;i<winTextContent.length;i++){winText = new LTextField();winText.weight = "bold";winText.text = winTextContent[i];if(i==0){winText.size = 25;winText.color = "dimgray";winText.font = "黑体";winText.x = (LGlobal.width - winText.getWidth())*0.5;winText.y = 130;}if(i==1){winText.size = 15;winText.color = "white";winText.font = "宋体";winText.x = (LGlobal.width - winText.getWidth())*0.5;winText.y = 170;    }ctrlLayer.addChild(winText);}btn01 = new LButton(new LBitmap(new LBitmapData(imglist["button01"])),new LBitmap(new LBitmapData(imglist["button01_over"])));  btn01.x = (LGlobal.width - btn01.getWidth())*0.5;btn01.y = 200;  ctrlLayer.addChild(btn01);  btn02 = new LButton(new LBitmap(new LBitmapData(imglist["button02"])),new LBitmap(new LBitmapData(imglist["button02_over"])));  btn02.x = (LGlobal.width - btn02.getWidth())*0.5;  btn02.y = 250;  ctrlLayer.addChild(btn02);btn01.addEventListener(LMouseEvent.MOUSE_DOWN, reStart);  btn02.addEventListener(LMouseEvent.MOUSE_DOWN, showRecord);LTweenLite.to(ctrlLayer,1,{alpha:0.9});
}
function reStart(event){backLayer.removeAllChild();removeChild(backLayer);gameInit();addEvent();stepText.text = "行动次数：0";steps = 0;time = 0;startStatus = 0;    if(startStatus == 0){startStatus++;changeTime = setInterval(function(){time+=1; timeText.text = "游戏用时："+time;},1000);}LTweenLite.to(ctrlLayer,1,{alpha:1});ctrlLayer.removeAllChild();isWin = 0;
}
var recordRunTimesArry;
var recordTimeArry;
var maxTimeArr = [];
var maxRunTimesArr = [];function writeRecord(){if(localStorage["locRecordRunTimesArry"] == undefined || localStorage["locRecordTimeArry"] == undefined){localStorage.setItem("locRecordRunTimesArry",'');localStorage.setItem("locRecordTimeArry",'');recordRunTimesArry = localStorage["locRecordRunTimesArry"].split(",");recordTimeArry = localStorage["locRecordTimeArry"].split(",");recordRunTimesArry[recordRunTimesArry.length] = steps;localStorage["locRecordRunTimesArry"] = recordRunTimesArry;recordTimeArry[recordTimeArry.length] = time;localStorage["locRecordTimeArry"] = recordTimeArry;}else{recordRunTimesArry = localStorage["locRecordRunTimesArry"].split(",");recordTimeArry = localStorage["locRecordTimeArry"].split(",");recordRunTimesArry[recordRunTimesArry.length] = steps;localStorage["locRecordRunTimesArry"] = recordRunTimesArry;recordTimeArry[recordTimeArry.length] = time;localStorage["locRecordTimeArry"] = recordTimeArry;}
}
var btn03;
var btn04;
function showRecord(){if(localStorage["locRecordRunTimesArry"] == undefined || localStorage["locRecordTimeArry"] == undefined){localStorage.setItem("locRecordRunTimesArry",'');localStorage.setItem("locRecordTimeArry",'');recordRunTimesArry = localStorage["locRecordRunTimesArry"].split(",");recordTimeArry = localStorage["locRecordTimeArry"].split(",");}else{recordRunTimesArry = localStorage["locRecordRunTimesArry"].split(",");recordTimeArry = localStorage["locRecordTimeArry"].split(",");}recordLayer = new LSprite();backLayer.addChild(recordLayer);getRecord();printRecordFont();recordLayer.graphics.drawRect(3,"dimgray",[15,30,360,440],true,"lightgray");LTweenLite.to(recordLayer,1,{alpha:0.9});btn03 = new LButton(new LBitmap(new LBitmapData(imglist["button03"])),new LBitmap(new LBitmapData(imglist["button03"])));  btn03.x = 342;btn03.y = 33;  recordLayer.addChild(btn03);btn04 = new LButton(new LBitmap(new LBitmapData(imglist["button04"])),new LBitmap(new LBitmapData(imglist["button04_over"])));  btn04.x = (LGlobal.width - btn04.getWidth())*0.5;;btn04.y = 420;  recordLayer.addChild(btn04);btn03.addEventListener(LMouseEvent.MOUSE_DOWN, function(event){recordLayer.removeAllChild();backLayer.removeChild(recordLayer);LTweenLite.to(backLayer,1,{alpha:1});});btn04.addEventListener(LMouseEvent.MOUSE_DOWN, function(event){localStorage.removeItem("locRecordRunTimesArry")localStorage.removeItem("locRecordTimeArry");});
}
var recordFontArr = ["游戏记录","名次","行动次数","游戏用时"];
var recordText;
var recordFontX = 120;
var recordFontY = 30;function printRecordFont(){for(var i=0;i<recordFontArr.length;i++){recordText = new LTextField();recordText.weight = "bold";recordText.text = recordFontArr[i];if(i==0){recordText.size = 25;recordText.color = "dimgray";recordText.font = "黑体";recordText.x = (LGlobal.width - recordText.getWidth())*0.5;recordText.y = 33;}else if(i>=1 && i<=4){recordText.size = 12;recordText.color = "gray";recordText.font = "宋体";recordText.x = 25 + (i-1)*recordFontX;recordText.y = 80;    }recordLayer.addChild(recordText);}for(var i=0;i<10;i++){recordText = new LTextField();recordText.weight = "bold";recordText.font = "宋体";recordText.color = "white";recordText.size = 12;recordText.x = 25;recordText.y = 140 + (i-1)*recordFontY;recordText.text = i + 1;recordLayer.addChild(recordText);}for(var i=0;i<10;i++){recordText = new LTextField();recordText.weight = "bold";recordText.font = "宋体";recordText.color = "white";recordText.size = 12;recordText.x = 25 + 1*recordFontX;recordText.y = 140 + (i-1)*recordFontY;;recordText.text = maxRunTimesArr[i+1] || '';recordLayer.addChild(recordText);}for(var i=0;i<10;i++){recordText = new LTextField();recordText.weight = "bold";recordText.font = "宋体";recordText.color = "white";recordText.size = 12;recordText.x = 25 + 2*recordFontX;recordText.y = 140 + (i-1)*recordFontY;;recordText.text = maxTimeArr[i+1] || '';recordLayer.addChild(recordText);}
}
function getRecord(){maxTimeArr = recordTimeArry.sort(function(a,b){return a-b;});maxRunTimesArr = recordRunTimesArry.sort(function(a,b){return a-b;});
}

转载于:https://www.cnblogs.com/jiangxiaobo/p/6004474.html

HTML5小游戏《智力大拼图》发布，挑战你的思维风暴相关推荐

egret开发HTML5小游戏-疯狂大乱斗
简介寒假开始,花了5天时间利用Egret引擎开发了一款HTML5小游戏,最终界面效果如下: [游戏首页] [游戏图鉴] [游戏截图] 项目结构主要的类就是list.ts和Main.ts,再就是存放 ...
真心话大冒险HTML5小游戏,真心话大冒险游戏怎么玩才有趣
说到真心话大冒险,这应该是年轻人都喜欢玩的一个游戏,下面小编为大家整理了关于真心话大冒险的游戏玩法,欢迎大家阅读. 真心话大冒险游戏怎么玩才有趣包厢里几个人围坐在一起,分散着坐在包厢里的各个角落,会 ...
JAVA抖音潜艇挑战_Android 实现抖音小游戏潜艇大挑战的思路详解
<潜水艇大挑战>是抖音上的一款小游戏,以面部识别来驱动潜艇通过障碍物,最近特别火爆,相信很多人都玩过. 一时兴起自己用Android自定义View也撸了一个,发现只要有好的创意,不用高深的 ...
egret开发HTML5小游戏-《猫猫大作战》（一）
ps:本文适用于和我一样刚刚入门egret的同学们,大佬看到这里可以忙别的去了. 之前用egret引擎设计了一款双人设计小游戏-<疯狂大乱斗>,算是初步了解了引擎的使用,这次打算开发一款基 ...
微信html5小游戏源码70种
2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...
小游戏成就大奇迹！一款微信游戏拯救了他的跑鞋商城
小游戏成就大奇迹!一款微信游戏拯救了他的跑鞋商城创业公司起步难,有时候开网店比开实体店还难.上线一个星期,一个客人都没有,这也是常有的事. 前不久,一家鲜为人知的小型跑鞋商城网站--步步牛跑鞋网,就 ...
html5社交游戏,怦怦：HTML5小游戏与社交的完美结合
原标题:怦怦:HTML5小游戏与社交的完美结合有一天,好朋友分享我一个好玩的小游戏,我一看就是现在很流行的H5小游戏,我打开他分享给我的链接进去游戏,还有排行榜的,就这样,这款叫"见缝插针 ...
H5小游戏从修改到发布--无编程基础修改版
H5小游戏从修改到发布–无编程基础修改版合成哈工大流程来源于程序员鱼皮合成大西瓜魔改版原教程链接合成大西瓜源码素材获取:h5小游戏源码注册登录,直接下载压缩包版本的源代码,网页还有其他游戏 ...
前沿穿越——HTML5小游戏制作技巧经验
转 K米: 前沿穿越--HTML5小游戏制作技巧&经验 hello~大家好,我是黑米! O(≧▽≦)O 今天我来跟大家分享一些动画实现的相关知识,希望大家能够支持(鞠躬-- 我很喜欢很喜欢看 ...

HTML5小游戏《智力大拼图》发布，挑战你的思维风暴