I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details.

preface

I made a wechat game (PANDA Crossing the River), which was adapted from an H5 page tour. I always adhere to the principle of using canvas to draw scenes and roles in the game. So the initial version would look something like this:

It’s a beautiful spring scene. But this Mid-Autumn festival is coming, how also have to get some festive atmosphere, so carried out a tight little game decoration, basic decoration finished yesterday, write out and share with you.

After the decoration effect (was teased a bit like Halloween), it is clear: part of the material from the network.

The body of the

1, change the overall tone, to the Mid-Autumn night tone

Background, hero, mountain, tree, etc. are all graphically based:

dot

function dot(ctx, v, r) 
{  
  ctx.beginPath();   
  ctx.arc(v.x, v.y, r, 0, Math.PI * 2);  
  ctx.fill();   
  ctx.closePath();
}
Copy the code

line

function line(ctx, a, b) 
{    
    ctx.beginPath();    
    ctx.moveTo(a.x, a.y);    
    ctx.lineTo(b.x, b.y);    
    ctx.stroke();    
    ctx.closePath();
}
Copy the code

Then he drew hero– a panda — with dot and line

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 (255255255, 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(); }Copy the code

Background (sky, trees, mountains, moon)

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); // Draw the moon 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(); DrawImage (dengImg, windowwidth-120, 50, 88); 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)); }Copy the code

Therefore, the game tone can be changed by changing the global color system

// [0,0-2 crown, mountain,3 trunk], [1, 0-pillar, 1-perfect frame on pillar], [2 Sky background], [3] the moon colors = [[# cfadd0 ""," # 874 a89 ", "# 4 e175a", "# 462155"], [410 e51 "#", "# f4d42e"], [" # 411151 ", "# 6 f46ac", "#f7f5f8"], ['#cfadd0', '#f7f5f8']]Copy the code

2, add festival elements for the Mid-Autumn Festival

By adding festive elements to increase the festive atmosphere, this change uses pictures in the moon and sky lanterns, and the materials are taken from the Internet.

// Draw the moon 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(); DrawImage (logoImg, 80, 50, 220, 220); drawImage(dengImg, windowWidth-120, 50, 88); 117) ctx.drawImage(dengImg, windowWidth - 300, 50, 44, 58)Copy the code

3. Add holiday gameplay. Well, that’s a change of focus

In order to coincide with the Mid-Autumn Festival, this time we added a box that randomly appeared when the panda crossed the river. Inside the box are random gifts. There are 10 kinds of moon cakes with different flavors, and different moon cakes can increase different points. Collect all the different flavors of mooncakes, and you can double the score. If you encounter something negative, you will lose points or lose mooncakes. Pray for good luck.

Function openBox() {let targetCake = [' five kernel ', 'flow custard ',' lotus seed cake ', 'bean paste ',' flower cake ', 'fruit cake ',' chocolate cake ', 'ice cream cake ',' cloud leg ', Const awards = [{cake: 'Five kernel cake ', Score: 1}, {cake:' Yolk lotus seed cake ', Score: 2}, {cake: 'Egg yolk lotus seed cake ', Score: 3}, {cake:' Egg yolk lotus seed cake ', score: 3}, {cake: {cake: 'Mooncake ', score: 4}, {cake:' mooncake ', score: 5}, {cake: 'mooncake ', score: 6}, {cake:' mooncake ', score: 7}, {cake: 'mooncake ', score: 5}, {cake:' mooncake ', score: 6}, {cake: 'mooncake ', score: 7}, {cake: 'ice cream mooncake ', score: 8}, {cake:' ice cream mooncake ', score: 9}, {cake: 'ice cream mooncake ', score: 10}, {cake:' bomb ', score: -20}, {MSG: 'Oops, Trump stole all your mooncakes'}, {MSG: 'oh shit, }] let index = math.floor (math.random () * award.length) console.log(index) let MSG = ", Img = "if (index >= 0 && index <= 9) {MSG = '${awards[index].cake}' + ${allow [index]. Score} points ` 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 = 'oh! - 20 points ` 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 = 'bad ~, Trump robbed all your moon cake ` img = 'https://656d-emotion-3d649a-1256716429.tcb.qcloud.la/assets/game/trump.png? Sign myCake = = 42 cc0a7c44e8f5bb9807bad8f5adfa36 & t = 1631341102 '[]} the if (index = = 12) {MSG = ` Oh shit, Trudeau and dog ate your half moon cakes together ` 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, Console. log(myCake) let tempCake = array. from(new Set(myCake)) console.log(tempCake Let interCake = tempcake. filter((v) => targetcake.includes (v)) console.log(interCake) // Compare the number of intersections with the number of targets if (interCake. Length == targetCake. Length) {score = score * 2 MSG = MSG + ', you have collected a box of mooncakes, double the score. 'myCake = subArr(myCake, targetCake) console.log(' after ', myCake)} appthis.setData({MSG, img, openbox: true }) // wx.setStorageSync('myCake', myCake) }Copy the code

In this way, the renovation is completed, but there are still many regrets:

1. There is no time to increase the dynamic effect of festival elements;

Lazy in drawing, the interface is not beautiful enough.

The last

Said so lively, how to experience it, because of Posting norms I will not directly post the experience code, look at my hair boiling point should be able to find.

Comments are welcome.