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

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

难度中级
时长 2小时34分
学习人数
综合评分9.50
139人评价 查看评价
9.6 内容实用
9.5 简洁易懂
9.4 逻辑清晰
图片资源不全 小鱼尾巴少7张图片 ,故意的吧老师
背景出不来啊
我只想要一个编译器一样的主题
老师讲的不错,跟着做觉得挺有意思的,虽然有时候出现和教程的不一样效果,但是通过自己思考,自己改,还是有收获的,阶段一代码欢迎fork,适合谷歌浏览器,顺便给个star啦
https://github.com/zhongshanxian/SUM/tree/master/fish
老师,你的代码前后对不上啊喂
可否用hbuilder编译器
如果在写的时候,发现有问题的,可以参考我的代码,在gitHub上。可以在这里找到https://github.com/cj96248/tinyHeart,图片和js代码都有,可以完美运行。
绘制果实偏移的原因是因为lineWidth和lineCap两个属性,指定lineWidth,canvas绘制逻辑是是指定x坐标左右各8px的宽度这样绘制,lineCap属性会增加8px的高度 所以果实的位置x和y各偏移了8px
要是这个也能实现弹幕就好了,走神的遇到走心的就变得值得了
ctx1.drawImage(this.bigBody,-this.bigBody.width*0.5,-this.bigBody.height*0.5);
ctx1.drawImage(this.bigTail,-this.bigTail.width*0.5+30,-this.bigTail.height*0.5);
ctx1.restore();
}
大鱼:
momObj.prototype.draw = function(){
ctx1.save();
ctx1.translate(this.x,this.y);/*方法转换画布的用户坐标系统。平移,将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0)*/
ctx1.drawImage(this.bigEye,-this.bigEye.width*0.5,-this.bigEye.height*0.5);
老师好厉害,之前背景一直出不来,又看了一遍发现少漏了一个点,老师棒棒的
为什么果实出不来喃?求大神解答
原background.js:
function drawBackground(){

bgPic.onload=function(){

ctx2.drawImage(bgPic,0,0,canWidth,canHeight);

}

}
修改后的:
function drawBackground(){

ctx2.drawImage(bgPic,0,0,canWidth,canHeight);
}
解决了海葵透明度问题和漂浮直线问题
我的js之间不能跨用,要加上var new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src","js/background.js");
document.body.appendChild(new_element);
课程须知
1、对html、css基础知识已经掌握。 2、对JavaScript的基础知识掌握,如数组、类、对象。
老师告诉你能学到什么?
1、html5 canvas制作游戏理念 2、html5 canvas 绘图API 3、游戏中的碰撞检测 4、认识几个数学函数 5、物体池概念 6、序列帧动画的控制

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消