首页 > 代码库 > 关于慕课网上爱心小鱼的讲解
关于慕课网上爱心小鱼的讲解
大家好!我是super喵二,这两个游戏是我学了h5之后,开始做的。主要是参照了慕课网的视频 :话不多说,先讲思路吧:
1.爱心小鱼(这个小游戏是看着视频敲的,之前不是太熟悉的时候):先上图
一、当然是需要两个canvas啦:
看图分析就是一个canvas用于画背景,芦苇,和果实
另一个canvas画鱼,记录分数,以及产生的水圈
二、绘制:
芦苇:定义一个芦苇类,包含芦苇根的位置,以及芦苇的高度,和透明值,在芦苇类上定义初始化与绘制方法,主要注意取好芦苇与芦苇宽度之间的随机值,以及芦苇高度的变化,重要的是芦苇来回摆动的振幅大小的取法:取一个振幅随机值,然后画芦苇的头部的位置时可乘上振幅的变化。
View Code
果实:定义一个果实类,属性主要包括果实颜色,存活状态(boolen值),果实大小,果实速度,以及果实才开始生长的位置。主要方法包含:初始化,绘制,出生,死亡,及画面上果实数量的监视。绘画时主要用到的
context.drawImage(img,x,y,width,height);//在画布上定位图像,并规定图像的宽度和高度。当然果实的位置会变化,所以x,y,width,height是随每一帧变化的,主函数中定义了帧变化的时间
View Code
大鱼:定一个大鱼类,包含坐标的变化,角度的变化,鱼眼睛,尾巴,以及身体的绘制。注意鱼眼睛与尾巴是不停变化的,而且变化速度相对每一帧较快,所以分别需要设置眼睛与尾巴的帧,角度的变化主要是引入了一个角度,距离变化的公用js,这里就不细说了。
View Code
小鱼同上:(小鱼多了身体颜色的变化)
View Code
碰撞检测函数:(大鱼与果实,小鱼与大鱼):当大鱼吃掉果实(蓝色与黄色分数倍数变化),大鱼喂给小鱼,分数增加。
View Code
分数的变化(以及gameover),大鱼吃到果实后出现圆圈,大鱼喂给小鱼出现圆圈,相对简单,这里就不细说,上代码吧:
View Code
View Code
View Code
最重要的主函数来了:(其它函数大概分析之后,在主函数里new对象时就easy了):
View Code
关于慕课网上爱心小鱼的讲解
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。