js在游戏行业的应用

一.思路(重要部分)

1.飞机和子弹的构造函数缺一不可

2.考虑飞机，子弹的移动（包括速度和方向）

3.碰撞判断（包括飞机与飞机的碰撞和敌机与子弹的碰撞）

4.通过按钮的开始函数（最重要的函数，包括创建本机，敌机，子弹，控制速度，判断碰撞...)

5.判断子弹和飞机是否移出边界函数

6.在子弹和敌机碰撞之后的血量计算

 

二.注意点和总结点汇总：

1.在不同状态显示不同游戏界面，不同界面之间的切换可以通过控制display:none来完成

注意点：visibility=hidden, opacity=0,display:none 之间的区别:

1. 空间占据方面：display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。
2. 子元素继承：display:none不会被子元素继承，父元素都不在了，子元素自然也就不会显示了，visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

2.在写js过程中，要注意call,apply和bind之间的区别

三者都可以改变指针的指向,call中的参数为参数列表，apply中的参数是参数数组，bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

3.构造函数和new

New函数被调用，然后新创建一个对象，并且成了函数的上下文（也就是此时函数内部的this是指向该新创建的对象，这意味着我们可以在构造器函数内部通过this参数初始化值），最后返回该新对象的引用

4.讲究this和prototype之间的区别：

This和prototype之间的区别：

1. 在于属性访问的顺序；
2. 占用空间不同，this在开辟的时候就占用了变量和方法的内存

 

三.遇到的问题：

1.对于不规则图形，怎么判断两个飞机碰撞？

在该游戏中，我为了简化，将不规则的飞机形状设置为长方形进行判断

2.在子弹飞出的过程中，子弹发出的位置一直错误，感觉完全没问题，呜呜呜

啊啊啊啊啊，最后终于发现了问题！！！！！！

一定一定要注意！！！！！

top和left:css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left的属性时，一定要确保定义position为absolute或者relative；

然鹅我在写代码的过程中完全忘记了这一点（无奈脸）

 

具体实现代码链接：https://pan.baidu.com/s/1nJZb3z_qXR6mPYSiOcybGQ

提取码：kock