为了账号安全,请及时绑定邮箱和手机立即绑定

HTML5小游戏---爱心鱼(上)

难度中级
时长 2小时34分
学习人数
综合评分9.50
139人评价 查看评价
9.6 内容实用
9.5 简洁易懂
9.4 逻辑清晰

最新回答 / LYUWENCHAO
你对函数表达式和函数声明的概念不是很清楚,建议先看看书吧。类似funcName=(function(){})()或者funcName=(function(){}())这种形式是自执行函数,你可以找点资料看看,大致就是funcName直接等于后面函数的执行结果。

最新回答 / 萌菌丶
var fruit=function(){ this.x=[]; this.y=[]; this.l=[]; this.spd=[]; this.alive=[]; this.orange=new Image(); this.blue=new Image(); }fruit.prototype.num=30;fruit.prototype.init=function(){ for(var i=0;i<this.num;i++){ this.alive[i]=false; this.x[i]=0;...
用迅雷就能下了

最新回答 / 千年虫v
this.alive=true; 应该这样写: this.alive[i]=true; 给数组中的元素赋值,而不是给整个数组赋值
如果使用firefox浏览器,老师的代码就没有问题。但是如果是chrome,就悲剧了。因为drawImage图片是异步加载的,只有等图片加载完毕了,才能drawImage,否则没有图像。
考虑到这个案例的图片较多。最好的办法是,在整个代码的开始做一个图片的预加载,加载完毕了之后,再进行代码的其他操作。这样会更好点。
代码改进下就看到果实了。要等图片加载完毕了,再循环生成果实就可以了。
fruitObj.prototype.draw = function(){
var _this = this;
_this.orange.onload = function() {
for (var i = 0; i &lt; _this.num; i++) {

_this.born(i);
ctx2.drawImage(_this.orange, _this.x[i], _this.y[i]);
}
}
}
声音听的好不舒服啊……
老师把最开始的html写成了thml。。。。。
谁能把完整代码发一份啊,急求。2563104749@qq.com
背景不动,因此我用了3个canvas,1个背景,1个海葵,1个其他。。。。这样就避免 了海葵看不到(其实是画出来了的,但是被image给盖住了)。
这样,海葵依然可以使用loopgame循环渲染。
http://img1.sycdn.imooc.com//down/560b6c8a000196af00000000.zip 这是素材地址。资料下载提供的有
drawImage 在chrome里是异步加载的。所以image没有加载完毕时就调用了drawImage,在chrome里是显示不了图片的。需要保证图片加载完毕后,才能显示图像。
function drawBackground(){
bgPic.onload=function(){
ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}
}
老师用的浏览器应该是firefox吧。firefox没有这个问题。
我感觉不用监听果实的数量,直接把果实数量设为15,每死一个果实,就重新生成该果实,这样游戏中的果实数量也始终为15.
课程须知
1、对html、css基础知识已经掌握。 2、对JavaScript的基础知识掌握,如数组、类、对象。
老师告诉你能学到什么?
1、html5 canvas制作游戏理念 2、html5 canvas 绘图API 3、游戏中的碰撞检测 4、认识几个数学函数 5、物体池概念 6、序列帧动画的控制

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消