HTML5游戏实战：计时拼图游戏制作

这次使用www.tangide.com制作了一款推广类拼图游戏 ,

这游戏复杂点在各种拖动, 滑动的动画实现上. 下面我主要分享下动画部分的实现方法.

0 在线运行: 

http://www.tangide.com/apprun.html?appid=previewupyunosgames1-241435729564104

1: 确认界面布局

首先是对游戏功能区域的设计和

划分

滑动选择区在屏幕最下方, 每一块小的拼图会出现在这里, 玩家可以左右滑动让整个滑动区域轮动以查看全部拼图块.

这里我放入了一张图片在屏幕最左下角,游戏开始时通过对这张图的自动复制, 随机排序, 插入图片等操作来

拼图放置区在计时器下方, 玩家需要吧小拼图从滑动选择区拖到这个区域的正确位置以完成游戏.

这里是4X4的游戏, 我放置了16张小图片用来确认16个格子的位置, 并让这16个格子以第一个格子为基准自动对齐.

这么做确认麻烦但由于我是首次开发此类型游戏,这样做利于调试.

可以看到滑动选择区和拼图放置区之间有一段空隙, 这主要是为不同分辨率的手机预留的.截图分辨率为480*800.

这样的布局可以在不同屏幕比的设备 例如ip4S,5S上都显示得体.

2: 滑动区域初始化

win.initPictrue = function() {
    var tempPicList = [];
    
    for (var i=1;i<=16;i++) {//排列图片
        picBar[i-1] = "图片"+i;
        tempPicList[i-1] = i-1;
        if (! win.find("图片"+i)) {
            win.dupChild("图片1").setName("图片"+i);
        }
        var x = (i-1)*basePic.w;
        win.find("图片"+i,true).setPosition(x,win.h-basePic.h);
        win.find("图片"+i,true).setVisible(true);
    }
    //打乱图片顺序
    
    var w = 404/4;
    var h = 404/4;
    
    for (i=0; i<16; i++) {
        var random = Math.floor(Math.random()*tempPicList.length);
        if (!DEBUG) {
            picOrder[i] = tempPicList[random];
            tempPicList.splice(random,1);
        }else {
            picOrder[i] = i;
        }
        var s = {xx:0,yy:0};
        coord.push(s);
        coord[i].xx = w*((i+1)%4 === 0 ? 3 : ((i+1)%4) - 1);
        coord[i].yy = h*(Math.ceil((i+1)/4) - 1);
        if (DEBUG) {
            console.log("dd_initPictrue x="+coord[i].xx+" y="+coord[i].yy);
        }
    }
    
    for (i=0;i<16;i++) {//给picBar的位置设置图片
        win.find(picBar[i]).setImageSrc(PUZZLEIMAGE);
        win.find(picBar[i]).setImageSrcRect(
            coord[picOrder[i]].xx, coord[picOrder[i]].yy, w, h);
        
        if (DEBUG) { 
            win.find(picBar[i]).setText(picOrder[i]+1);
        }
        win.find(pi