一起用代码吸猫!本文正在参与【喵星人征文活动】。
介绍
在看到官方这个互动宣传文时,偶然间发现了下面这样一张图片,于是突发奇想,做一个类似的超简洁小游戏,来参与进来这次活动。
思考片刻后,就决定开始来完成这个小玩意儿了,先放一放最终效果:
可以点开玩一下哦:游戏链接
实现
这个小游戏分为两块,一个是上面部分的canvas
画板,来完成猫咪的头像,另一个则是使用div+css
的方式完成下面的面板。
使用canvas画猫猫
怎么使用canvas
来画一个小喵咪头像呢?很简单,还记得我前面的截图嘛,那个有一个16*16
的像素风音箱截图。
于是,我就可以模拟一个二维数组,通过数组不同的值来画出对应的色彩,这样一个猫咪头像,不就实现了嘛?说的再多也无用,开搞!
- 依葫芦画瓢,模拟出二维数组,看代码:
const cat = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 1, 2, 1, 0, 0, 0, 0, 0, 0, 1, 2, 1, 0, 0],
[0, 0, 1, 2, 3, 1, 1, 1, 1, 1, 1, 3, 2, 1, 0, 0],
[0, 0, 1, 2, 3, 3, 1, 1, 1, 1, 3, 3, 2, 1, 0, 0],
[0, 0, 1, 2, 1, 1, 3, 3, 3, 3, 1, 1, 2, 1, 0, 0],
[0, 1, 1, 1, 3, 3, 3, 3, 3, 3, 3, 3, 1, 1, 1, 0],
[0, 0, 1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 0, 0],
[0, 0, 1, 3, 1, 3, 3, 3, 3, 3, 3, 1, 3, 1, 0, 0],
[0, 1, 3, 3, 1, 3, 3, 3, 3, 3, 3, 1, 3, 3, 1, 0],
[0, 1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 0],
[1, 3, 3, 3, 3, 3, 2, 1, 1, 2, 3, 3, 3, 3, 3, 1],
[0, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 0],
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
- 模拟了一个
16*16
的二维数组后,并且分别通过0,1,2,3
来记录不同的色彩,然后通过canvas
来遍历数组并绘画,代码如下:
const _cat = this.catObject;
const colors = ['rgb(95, 205, 233)', '#333', 'rgb(214, 240, 255)', 'orange'];
for (let i = 0 ; i < _cat.length ; i ++) {
for (let j = 0 ; j < _cat[i].length; j ++) {
const c = _cat[i][j];
const color = colors[c];
this.ctx.beginPath();
this.ctx.fillStyle = color;
this.ctx.rect(j * this.width, i * this.width, Math.ceil(this.width), Math.ceil(this.width));
this.ctx.fill();
}
}
这样一个猫咪头像,就成了:
操作面板
操作面板的实现就是通过div+css
来完成的,通过js
来完成事件的监听以此来达到控制猫猫状态的一个效果。例如:我这里修改猫咪表情则是通过修改数组对应下标元素来完成的:
// 设置猫咪的表情
setCat(type = 0) {
this.catObject = JSON.parse(JSON.stringify(cat));
switch (type) {
// 默认
case 0:
this.initCat();
break;
// 无奈
case 1:
this.catObject[9][5] = 1;
this.catObject[9][6] = 1;
this.catObject[9][9] = 1;
this.catObject[9][10] = 1;
this.catObject[10][4] = 3;
this.catObject[10][11] = 3;
this.initCat();
break;
}
}
至于状态的变化,可以是复杂的也可以是简单的,于是我就做的很简单啦,然后根据自己定义的状态来显示对应的猫咪表情就行了。
操作优化
避免用户不断点击一个按钮来刷状态,我们可以通过加入节流的方式来优化操作,给三个按钮的事件加上节流后,还可以让游戏的操作变得有“计划”,而不是随便点点就行,当然这个的前提是状态变化设计的好。
记录面板的滚动条随消息会超过记录的盒子的,所以我们需要在有新消息时,让滚动条触底(就像QQ聊天那样),这样的实现也很简单啦,只需要简单的一行代码:
el.scrollTop = el.scrollHeight;
这样一个简单的猫猫养成小游戏就算完成了。
小彩蛋
可以点开玩一下哦:游戏链接
游戏里,我加了一个元素(小彩蛋)。猫咪会随时间推移必然逝去(不同于常规死去),如果猫咪时你照顾得当的话,猫咪就会有话对你说哦~