js开发bird小鸟

15分钟上手前端小游戏开发

    • 演示效果
    • 代码
    • 解析

演示效果

js开发bird小鸟_第1张图片

代码





    
    
    Document
    



    

解析

解析一下这一坨长长的代码,是一个面向对象编程的超级小游戏
有一个鸟,一个天空,几个管子
鸟有宽度高度,有飞行的速度,还有自己的x、y值,就是定位的left与top
天空有背景图,这玩意一直跑,一直跑
每个柱子都是一个对象,他们生出来就开始往左边跑,直到出屏幕后被回收
当小鸟的坐标(x,y)与一些障碍物的坐标(x,y)冲突时,调用stop结束定时器,游戏结束。
游戏开始后,背景往左边滚,小鸟往下掉,柱子往左滚,按键盘上键,小鸟的向上的速度增加很多,但是定时器里,每次执行都会把小鸟向下的速度增加,所以小鸟迟早会往下掉,就需要适时的按上键来维持。

语法上一个是定时器,对象来存数据,dom操作与内存中数据同步
先说对象,是一种以键值对形式存储数据的方式,然后还是对显示一类事物抽象后又具象的一个有特点的家伙。鸟在这里有宽高有颜色有速度有坐标。天空和树又何尝不是?
再说dom操作,相信现在dom已经拦不住大家了,如果还是不熟练,dom操作案例讲解
再说定时器:
1、setTimeout允许设置一个超时对象,超时后执行这个对象,但是只执行一次,无周期
2、setInternval允许设置一个超时对象,超时后执行这个对象,周期等于超时对象指定的时间,周期为无限循环

定时器是在指定时间, 将任务放入事件队列,等待js引擎空闲后被执行.
就是说,到了时间,我把线程给你放到事件队列,主线程要是很忙,那么它就在队列放着,没法确保它执行。
使用setInterval时,并不能保证两次执行之间间隔具体是多少,因为我只是按时间差放到队列的,一切都要看它怎么执行的,电脑卡写啥代码也不会好使!
定时器还可以拿来渲染页面,有些好看的页面,一下子渲染出来会显得比较卡,慢慢来比较快。
另外记得clearInterval或clearTimeout,不然可能会出奇奇怪怪的事情

下一篇讲
js运行原理与机制
里面详细讲了定时器存在的潜在问题

你可能感兴趣的:(乾坤未定,你我皆是黑马)