为小游戏增加中秋气氛-一一网

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛。

前言

之前做了个微信版小游戏（PANDA过河），改编自一个H5页游，一直以来秉持能不用图片就不用图片，尽量用canvas来画游戏中场景、角色。所以一开始的版本大约长这样：

简直一片春明景和啊。可是这不中秋节要到了嘛，怎么也得弄点节日气氛，于是进行了紧锣密鼓的小游戏装修，昨天基本装修完毕，写出来和大家分享。

装修后效果（被吐槽有点像万圣节），声明一下：部分素材取自网络。

正文

1、改变整体色调，改成中秋之夜的色调

游戏中背景、hero，山、树等都是用基础图形化的：

dot

function dot(ctx, v, r) 
{  
  ctx.beginPath();   
  ctx.arc(v.x, v.y, r, 0, Math.PI * 2);  
  ctx.fill();   
  ctx.closePath();
}
复制代码

line

function line(ctx, a, b) 
{    
    ctx.beginPath();    
    ctx.moveTo(a.x, a.y);    
    ctx.lineTo(b.x, b.y);    
    ctx.stroke();    
    ctx.closePath();
}
复制代码

然后用dot和line画了hero–一只熊猫

function drawHero() 
{    
    ctx.save();    
    ctx.translate(        
        heroX - heroWidth / 2,        
        heroY + canvasHeight - platformHeight - heroHeight / 2    
    );    
    ctx.fillStyle = 'rgba(0,0,0,1)';    
    ctx.strokeStyle = 'rgba(0,0,0,1)';    
    ctx.lineWidth = 10;    
    ctx.lineCap = 'round';   
 
    //ears    
    line(ctx, 
    {        
        x: -10,        
        y: -15    
    }, 
    {        
        x: 0,        
        y: -10    
    });    
    line(ctx, 
    {        
    x: 10,        
    y: -15    
    }, 
    {        
    x: 0,        
    y: -10    
    });    

    //hand    
    ctx.lineWidth = 15;    
    line(ctx, {x: -10,y: 0 },{x: -8,y: 8 });    
    line(ctx, {x: 10, y: 0 },{x: 8,y: 8 });    

    //face,body    
    ctx.fillStyle = 'rgba(255,255,255,1)';    
    drawRoundedRect(-15, -20, 30, 28, 12); 
   
    //eyes    
    ctx.fillStyle = "black";    
    ctx.lineWidth = 5;    
    line(ctx, { x: -8,y: -9}, {x: -5,y: -10});    
    line(ctx, { x: 8,y: -9}, {x: 5,y: -10    });    

    //mouth    
    ctx.beginPath();    
    ctx.arc(0, -4, 5, Math.PI / 6, Math.PI / 1.2, false);    
    ctx.fill();    ctx.closePath();    
    ctx.restore();
}
复制代码

背景（天空、树、山、月亮）

function drawBackground() 
{    
    // Draw sky    
    var gradient = ctx.createLinearGradient(0, 0, 0, windowHeight);    
    gradient.addColorStop(0, colors[2][0]);    
    gradient.addColorStop(0.3, colors[2][1]);    
    gradient.addColorStop(0.7, colors[2][2]);    
    ctx.fillStyle = gradient;    
    ctx.fillRect(0, 0, windowWidth, windowHeight);
    
    //画月亮   
     ctx.beginPath();    
    gradient = ctx.createLinearGradient(0, 0, 0, 200);    
    gradient.addColorStop(0, colors[3][0]);    
    gradient.addColorStop(1, colors[3][1]);    
    ctx.fillStyle = gradient;    
    ctx.arc(180, 150, 100, 0, Math.PI * 2);    
    ctx.fill();    
    ctx.closePath();    

    //画logo //广告位招租   
    ctx.drawImage(logoImg, 80, 50, 220, 220)
    
    //画灯笼    
    ctx.drawImage(dengImg, windowWidth - 120, 50, 88, 117)    
    ctx.drawImage(dengImg, windowWidth - 300, 50, 44, 58)   
 
    // Draw hills    
    drawHill(hill1BaseHeight, hill1Amplitude, hill1Stretch, colors[0][0]);    
    drawHill(hill2BaseHeight, hill2Amplitude, hill2Stretch, colors[0][1]); 
   
    // Draw trees    
    trees.forEach((tree) => drawTree(tree.x, tree.color));
}
复制代码

故，可通过改变全局色彩体系改变游戏色调

//【0,0-2树冠、山,3树干】，【1，0-柱子，1-柱子上的perfect框】，【2天空背景】，【3月亮】
colors = [
    ["#cfadd0", "#874a89", "#4e175a", "#462155"],
    ["#410e51", "#f4d42e"],
    ["#411151", "#6f46ac", "#f7f5f8"],
    ['#cfadd0', '#f7f5f8']]
复制代码

2、为中秋添加节日元素

通过增加节日元素增加节日气氛，本次改在月亮、天灯用了图片，素材取自网络。

    //画月亮    
    ctx.beginPath();    
    gradient = ctx.createLinearGradient(0, 0, 0, 200);    
    gradient.addColorStop(0, colors[3][0]);    
    gradient.addColorStop(1, colors[3][1]);    
    ctx.fillStyle = gradient;    
    ctx.arc(180, 150, 100, 0, Math.PI * 2);    
    ctx.fill();    
    ctx.closePath();

    //画月亮上的logo
    //广告位招租

    ctx.drawImage(logoImg, 80, 50, 220, 220)  
  
    //画天灯    
    ctx.drawImage(dengImg, windowWidth - 120, 50, 88, 117)    
    ctx.drawImage(dengImg, windowWidth - 300, 50, 44, 58)
复制代码

3、增加节日玩法，嗯这才是改变重点

为了和中秋节契合，本次增加了熊猫过河中碰到随机出现的盒子，盒子里面是随机的礼物，礼物有10种不同口味的月饼，不同月饼可以增加不等的分数，盒子里也有炸弹、特朗普、特鲁多等反面东西，碰到了或减分或抢月饼。收集齐不同口味的月饼，分值可以翻倍，碰到反面东西则会损失分数或者损失月饼，祈求好运吧。

function openBox() {
    let targetCake = ['五仁月饼', '流心奶黄月饼', '蛋黄莲蓉月饼', '豆沙月饼', '鲜花月饼', '水果月饼', '巧克力月饼', '冰淇淋月饼', '云腿月饼', '冰皮月饼']
    const awards = [{
            cake: '五仁月饼',
            score: 1
        },
        {
            cake: '流心奶黄月饼',
            score: 2
        },
        {
            cake: '蛋黄莲蓉月饼',
            score: 3
        },
        {
            cake: '豆沙月饼',
            score: 4
        },
        {
            cake: '鲜花月饼',
            score: 5
        },
        {
            cake: '水果月饼',
            score: 6
        },
        {
            cake: '巧克力月饼',
            score: 7

        },
        {
            cake: '冰淇淋月饼',
            score: 8
        },
        {
            cake: '云腿月饼',
            score: 9
        },
        {
            cake: '冰皮月饼',
            score: 10
        },
        {
            cake: '炸弹',
            score: -20
        },
        {
            msg: '糟糕~，特朗普抢光了你的月饼'
        },
        {
            msg: 'oh shit，特鲁多和狗一起偷吃了你的一半月饼'
        }
    ]
    let index = Math.floor(Math.random() * awards.length)
    console.log(index)
    let msg = '',
        img = ''
    if (index >= 0 && index <= 9) {

        msg = `恭喜收集到【${awards[index].cake}】一个，+${awards[index].score}分`
        img = 'https://656d-emotion-3d649a-1256716429.tcb.qcloud.la/assets/game/cake.png?sign=17afcc6c7e675e551351ec0283a4ebb4&t=1631367351'
        myCake.push(awards[index].cake)
        // wx.setStorageSync('myCake', myCake)
        score += awards[index].score
    }
    if (index == 10) {
        msg = `糟糕~，你碰到了一个炸弹，-20分`
        img = 'https://656d-emotion-3d649a-1256716429.tcb.qcloud.la/assets/game/bomb.png?sign=1f05ba74122ce1cc2e67934d43700fa8&t=1631345968'
        if (score >= 20)
            score += awards[index].score
        else
            score = 0
    }
    if (index == 11) {
        msg = `糟糕~，特朗普抢光了你的月饼`
        img = 'https://656d-emotion-3d649a-1256716429.tcb.qcloud.la/assets/game/trump.png?sign=42cc0a7c44e8f5bb9807bad8f5adfa36&t=1631341102'
        myCake = []
    }
    if (index == 12) {
        msg = `Oh shit，特鲁多和狗一起偷吃了你的一半月饼`
        img = 'https://656d-emotion-3d649a-1256716429.tcb.qcloud.la/assets/game/dog.png?sign=2882c470535c94869947dd6dfd2137f1&t=1631500831'
        let half = Math.floor(myCake.length / 2)
        myCake.splice(0, myCake.length - half)
    }

    console.log(myCake)
    //去重
    let tempCake = Array.from(new Set(myCake))
    console.log(tempCake)
    //找交集
    let interCake = tempCake.filter((v) => targetCake.includes(v))
    console.log(interCake)
    //比较交集的个数是否与目标个数一致
    if (interCake.length == targetCake.length) {
        score = score * 2
        msg = msg + '，你已收集起一盒月饼，分数翻倍。'
        myCake = subArr(myCake, targetCake)
        console.log('兑换后', myCake)
    }

    appthis.setData({
        msg,
        img,
        openbox: true
    })
    //  wx.setStorageSync('myCake', myCake)
}
复制代码

就这样，本次装修改造就完成了，不过还是有很多遗憾：

1、节日元素没来得及增加动态效果；

2、懒于作图，界面还不够精美。