【习作向】html5换装小游戏

发表于 | 更新于 | 分类于
本文字数： 2.4k | 阅读时长 ≈ 5 分钟 | 评论数：

　　说是换装小游戏其实只能换美瞳和粉底液【其它素材还没画x
　　上次的“自学JS的开始”经过我一番百度，发现我改的文件叫swig，跟JS完全两个东西，丢人【
　　这次是真的自学JS啦！
　　对着菜鸟教程的JS简介研究了5分钟（就是只看了那个小灯泡的案例……）我就开始画模型了，因为懒得插板子所以是鼠绘的像素图，说起来这个脸怎么越看越像面包啊……
　　然后因为只看了5分钟教程的原因，每个按钮我都写了5行代码，虽然看起来很沙雕但是……它能跑哎！能跑就已经很了不起了！【←太吾精神，启动！
　　发到草莓县给大家围观的时候fomm给我发了个很简洁的写法，等我吃完晚饭再回来研究一下ヾ(*´∀｀*)ﾉ
　　不过比起按钮换颜色我觉得我还是做一个只有线稿的换装小游戏吧，导出线稿之后拿别的软件自己上色也挺方便的，当然如果我能研究出如何用JS给svg路径上色，那用软件直接导出彩图也是指日可待。
　　听起来这个小游戏已经可以开放氪金了哎【？前提是我得先做出来再说_(:з」∠)_


.+†+.

肤色
眼睛

181229-更新

　　感谢fomm和 旋岚，我的JS代码从60行简化到了14行！！！
　　因为过程过于玄学导致我一时不知道该怎么记笔记emmmmmmm直接全抄下来吧x

　　首先直接照搬fomm的代码没成功，提示url没有被定义(url被识别成了变量），按照原来的写法加了引号，直接输出成了background-image: url(filePath)（变量被识别成了文本），最后经过旋岚提醒改成了这样：

1
2
3
4
5
6
7
function changeBody(bodyPic)
{
	var filePath = "181227-game/body-" + bodyPic + ".png";
	var bodyUrl = "url(" + filePath +")"
	var x = document.getElementById("game-body");
	x.style.backgroundImage = bodyUrl;
}

　　重新定义了一个变量把url和变量拆分开再输入到css样式里，它能跑了！！！
　　然后经过一位热心群众bluelovers的指点，更简洁的写法是这样：

1
var bodyUrl = `url(${filePath})`

　　用【`文本$变量`】这个语法可以省略引号和加号（虽然我觉得引号和加号比较容易看懂QAQ