|
|
// 不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。
//
//
// 每次设定beginPath();后 都要专门设定起始位置 ctx.moveTo(x,y);
// 注意了 可以使用moveTo()绘制一些不连续的路径， 就是说 即使我不使用beginPath(),我依旧可以重新做一个起点画一个不连续的图
//
//
// 绘制直线使用 lineto(x,y);
// 绘制圆形： arc(x,y,radius,startAngle,endAngle,anticlockwise) ; 注意 这是开始的弧度 而不是 角度
// 弧度=(Math.PI/180)*角度。 anticlockwise 给定的方向，默认是顺时针 值为 true,false
//
//
//
// 当调用fill() 时 所有没有闭合的形状都会自动闭合，不需要调用closePath();
//
//
// Path2D对象：用来缓存或者记录绘画命令；
//
// 像素鸟起步
//
// 1.游戏第一步：视口的匹配 任何屏幕上都是充满屏幕的；
//
//
// 本文需要一个：
// 鸟类、
// 管子类，
// 背景类
//
// 然后需要一个统筹全局的 中介类 ganme
//
//
//
//
//
//
// 1.一个类是一个闭包
//
// 2. document.body.clientHeight 与 document.documentElement.clientHeight 不一样，选后者
//
// 3.景参 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素【仅限第一个元素】。
//
// 4.直接请求json文件时， json 文件格式必须标准 否则会报错
//
// 5.callback.call(self); //不同于上面直接调 这个是表示让该函数以正确的上下文执行
//
// 物体下落 的公式计算[规律性的越下越快]
// 时间 = t ;
//
//
// 遇到一个错， 开局后，小鸟咔咔往后跑，已知 我没有移动过X轴 。
// 后来的解决方法是，将translate放到game 里
// var ctx = myCanvas.getContext("2d"); //这里的 是小写 d 大写就会报错
// 碰撞检测
// 因为鸟只有一个，所以是检测管子碰没碰到鸟（而不是鸟碰没碰到管子）； 所以碰撞检测是管子的方法， 所以使用aabb盒
// 第一个事： 确定鸟的 前后左右四个点
//
//
// 先算撞上管子
// 1.this.out > game.bird.T && this.x< game.bird.R && this.x+this.w >game.bird.L
//
// 管子在资源管理器中，如何更新与渲染 随便整，实在为了美观可以在
//
//
// 如何加载预加载音频 并确定音频加载完毕呢？ onload 事件不可用
// 答： 使用 onloadedmetadata 事件 【经过测试 该事件不兼容于iphone】
// 后多次改写事件，最终定稿： onloadeddata
// 又试用了 canplay 事件，其 会重新载入资源，出现白色闪屏
// for(var i=0; i<Robj.radio.length; i++){
// 创建一个同名的类
self.R[Robj.radio[i].name] = new Audio();
self.R[Robj.radio[i].name].src = Robj.radio[i].url;
// 监听
self.R[Robj.radio[i].name].onloadedmetadata = function(){
}
// 声音的控制；
// 如何控制声音？ 我点击一下 执行 .play() ; 事件 可是我再点的时候，如果时间短， 就触发不了这个事件。咋整？
// 就是如何 重置 音频
// 已知：
// self.radio_jump.pause();// 这个就是暂停
// 以下两个：重新加载，可以达到对应的效果，但是加载时会闪屏
// self.radio_jump.load();
// self.radio_jump.play();
// 最后我找到个属性 ： currentTime 在play 之前重置为0 即可保证音效每次都是 0
// 播放时间
console.log(self.radio_jump.duration);
// 播放进度
console.log(self.radio_jump.currentTime);
|
|
发表于 2019-1-2 22:23:33