篇一：教你如何做拼图游戏
（1）准备一张图片，长和宽是比较好的整数像素点，例如800*500等，以下面这幅图为例，将它水平分4份，垂直分4份
（2）使用图片拆分器对图片进行
调整好数据，这个软件会把拆分结果，直接放到图片所在文件夹处，点下“等比拆分”
（3）结果如下
（4）打开Dreamwaver，这里用的是CS5
（i）设置站点，这里的图片放在pingtu/img里面
（ii）建立网页，以pingtu.html为名
打开辅助功能
打开显示网格功能
这里介绍一下“网络设置”的两个属性，其他明显易懂
靠齐到网格：拖动或修改apdiv盒子时会发现网格有吸附功能
间隔：主要控制网格的大小
绘制拼图区域，点击图中图标可快速绘制apdiv
点击之后，鼠标变成十字心，随便画一个apdiv再修改它的高和宽分别为500和800像素
为了使效果更好些，我们找了一张木板作为背景图片，最终效果如下
拆分后每个拼图单位为200*125的
再画16个200*125的apdiv将各个拼图单位插入，最终效果如下：
添加行为：所谓行为，可以看做是用户通过鼠标和网页的元素间进行的互动的方式，这里介绍其中一种。
篇二：拼图游戏制作
[教學]拼圖遊戲的製作你會了嗎?
A. 在Photoshop裡先製作出拼圖的切圖動作
步驟一.選擇"切圖選取工具"後選擇"分割"選項
步驟二.自己隨意切割數量
步驟三.在檔案下選取"儲存為網頁用"
步驟四.
1.選JPEG
2.按儲存後會出現"另存最佳化檔案"的視窗
3.存檔類型:HTML和影像
4.切片:全部切片
5.自己開一個資料夾
6.檔名自取
7.儲存
註:存完後會發現建立的資料夾裡會出現一個HTML檔和一包"images"的資料夾
B.在Dreamweaver下完成拼圖的製作
步驟一.在頁面屬性下設定左邊界和上邊界的值(可自訂)
步驟二.在隨意的地方製作出一個圖層並設定大小為自製的拼圖的尺寸
篇三：用flash制作拼图游戏图解
用flash8.0 + Macromedia Fireworks 8轻松制作拼图游戏
作者：王维钧 素材：自己制作 日期：2016 /6 /4
1、 素材制作:
先找一张图片，打开Macromedia Fireworks 8，文件/导入，将图片导入进来， 并在工具菜单中点 “切片”工具
（3）、将图片切割成12块，每块80×80，并把他们保存在一个文件夹里。
2、 游戏制作
（1） 打开Flash8.0，新建一个文件，大小、背景默认（白色、550×400），如图建立五个
图层，并命名：背景、按钮、图片1、图片2、AS，背景层如图的两个矩形，和一个青绿填充矩形，按钮层放了五个按钮：初级、中级、高级、原图、刷新，一个影片剪辑提示框和游戏名《美女拼图》.五个按钮分别命名：cj_btn ,zj_btn, gj_btn ,yt_btn, cw_btn, 影片剪辑提示框命名：xz_mc.
（2）在图片1层，把用Photoshop制作的图片导入到舞台上左边红色矩形框中，并按如图顺序排列好，然后将每个图片转化为影片剪辑（修改→转换为元件→影片剪辑，命名为t1,t2,??），再将每个影片剪辑命名（属性→名称分别为：tu1,tu2,??）
（3）选中图片1层所有图片复制，粘贴到图片2层，重新命名为：mc1,mc2,??，然后打乱顺序，放到右边矩形框中，如图。（注意：一定要先命名完了再打乱）
（4）在AS层写入以下代码：var dj = 1;
var pices = 20;
for (i=1; i<=pices; i++) {
mymc_mc = this["mc"+i];
tumc_mc = this["tu"+i];
tumc_mc._visible = false;
td(mymc_mc,tumc_mc);
}
function td(my_mc, tu_mc) {
mymc_mc.onPress = function() {
this.startDrag(false,25,60,550,400);
};
mymc_mc.onRelease = function() {
stopDrag();
if (dj == 1) {
if (this.hitTest(tu_mc)) {
this._x = tu_mc._x;
this._y = tu_mc._y;
s=new Sound()
s.attachSound("ok");
s.start();
}
}
if (dj == 2) {
if (this._x<=(tu_mc._x+20) and this._x>=(tu_mc._x-20) and this._y<=(tu_mc._y+20) and this._y>=(tu_mc._y-20)) {
this._x = tu_mc._x;
this._y = tu_mc._y;
s=new Sound()
s.attachSound("ok1")
s.start()
}
}
if (dj == 3) {
if (this._x<=(tu_mc._x+6) and this._x>=(tu_mc._x-6) and this._y<=(tu_mc._y+6) and this._y>=(tu_mc._y-6)) {
this._x = tu_mc._x;
this._y = tu_mc._y;
s=new Sound()
s.attachSound("ok")
s.start()
}
}
var finish_num = 0;
for (m=1; m<=pices; m++) {
if (_root["mc"+m]._x == _root["tu"+m]._x and _root["mc"+m]._y == _root["tu"+m]._y) {
finish_num += 1; }
if (finish_num == pices) { finish._alpha = 100; finish._x=412 finish._y=320 s=new Sound() s.attachSound("end")
s.start()
} else {
finish._alpha = 0; finish._x=1980 finish._y=123 }
}
};
}
cw_btn.onRelease = function() { finish._alpha = 0;
for (j=1; j<=pices; j++) {
mymc_mc = eval("mc"+j);
mymc_mc._x = 325+random(170);mymc_mc._y = 110+random(220); }
};
yt_btn.onRollOver = function() { for (k=1; k<=pices; k++) {
tumc_mc = eval("tu"+k);tumc_mc._visible = true; }
};
yt_btn.onRollOut = function() {
for (k=1; k<=pices; k++) {
tumc_mc = eval("tu"+k);tumc_mc._visible = false; }
};
yc_btn.onRelease = function() {
for (k=1; k<=pices; k++) {
tumc_mc = eval("tu"+k);tumc_mc._visible = false; }
};
cj_btn.onRelease = function() {
《如何使用ppt制作图片拼图游戏》出自：百味书屋
链接地址：http://www.850500.com/news/36917.html
转载请保留,谢谢!