在网上偶尔看到上吊火柴人猜单词游戏,游戏很简单,首先单词是隐藏的,用户开始键盘输入字母,如果包含这个字母,就显示出来,如果猜错了,上吊的小人就画出一笔,直到小人全部画完整了时还没猜出单词的全部,就算输。
游戏简单,其实实现也很简单,这里就用vue+canvas来实现,当然了,用JQ或者SVG实现都可以,大同小异~~
主体当然分为2块:1、分步骤画出上吊的小人 2、随机单词伴随用户输入的显示
这里就先来实现画上吊的火柴人:
(1)上吊的架子:
吊小人的架子很简单,就是几条直线,注意canvas的(0,0)坐标是在左上角,然后根据长宽画出自己想要的架子就行了,这里作为初始化代码写入函数init()中
<canvas id="canvas" width="500" height="500"></canvas>
....
init() {
this.step = 0;
this.wrongWordsArr = [];
this.rightWordsArr = [];
let container = document.getElementById("canvas");
let ctx = container.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "#FFF";
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(100, 450);
ctx.lineTo(200, 450);
ctx.moveTo(150, 450);
ctx.lineTo(150, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 100);
ctx.stroke();
this.createWords();
},
接下来就是画上吊的火柴人,因为是输错了字母就得画一笔,所以要把笔数拆分到switch-case中,用step计数当前应画的笔数步骤:
drawMan() {
let container = document.getElementById("canvas");
var ctx = container.getContext("2d");
ctx.strokeStyle = "#FFF";
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.beginPath();
switch (this.step) {
case 0:
ctx.arc(300, 140, 40, 0, 2 * Math.PI);
ctx.stroke();
break;
case 1:
ctx.moveTo(300, 180);
ctx.l