植物大战僵尸

知识点：
1.铺满全屏
background: url(img/b.jpg) fixed;
background-size: 100% 100%;
2.一般动画的原理就是改变位移量
3.节点：就是一个标签
父节点就是这个标签上一个的标签
植物大战僵尸
(1)填充背景图
(2)先添加僵尸
(3)先让一个僵尸动
a.获取僵尸
b.用定时器对僵尸进行刷新，让僵尸移动
(4)克隆大量僵尸，并让这些僵尸随机出现在不同的指定位置
把克隆僵尸封装起来，创建僵尸函数
a.获取僵尸模板
var Zombie = document.getElementById(“js”);
b.写克隆节点函数
var newZombie = Zombie.cloneNode(true);
c.需要把克隆出的新僵尸设置样式属性
newZombie.style.position = “absoulte”;
d.给新僵尸一个随机位置
newZombie.style.top = 30 + parseInt((Math.random()*5))*98+“px”;
newZombie.style.left = 900 + “px”;
e.重要的一步，把僵尸真正的加入到body中（目前以上的代码还是只有一个僵尸）
document.body.appendChild(newZombie);
f.s最后返回创建的这一个新僵尸，目的是在写僵尸行走函数时能够直接获取到克隆的新僵尸，然后改变它的位移量
return newZombie;
(5)让僵尸动
创建僵尸行走函数
用定时器让僵尸走
var dong = setInterval(function(){
newJS.style.left = newJS.offsetLeft-5+“px”;

				},200)

注：定义dong变量可以辨别是哪个定时器，在这个地方可以不定义dong变量，但在后来的让子弹飞时的那个函数必须定义变量，因为那里会用到清除定时器这一函数，清除哪个定时器就是用这一变量来区分的
代码中的注释：
//延时函数：让僵尸3s中之后去走
//延时3s中之后去执行匿名函数里面的内容
/* setTimeout(function(){
//用定时器让僵尸刷新，就能移动
//让僵尸移动
var dong = setInterval(function(){
//每隔400毫秒改变一次僵尸的left
Zombie.style.left = Zombie.offsetLeft-5+“px”;

		},400)
		},3000)*/
		//把僵尸随机出现在不同的跑道中间
		//弄出一个僵尸先停几秒再走

(6)创造子弹的函数和让子弹飞的函数同理，原理一样
(7)子弹超出一定范围，让子弹爆炸
原理：让子弹碎，换一张子弹碎的图片即可
newZiDan.src = “img/za.gif”;
让碎子弹停止，别走了，需要清除定时器:
clearInterval(ZiDanFly);
//延时函数，延时半秒之后让碎的子弹消失
setTimeout(function(){
//通过newZiDan，找到父节点，杀死子节点
newZiDan.parentNode.removeChild(newZiDan);
//法二：找到终极boss，把子弹的子节点删掉
//document.body.removeChild(newZiDan);

						},500)

(8)子弹碰到僵尸，子弹碎了并且消失，并且僵尸头掉了
通过点设置，在子弹上一个点，僵尸上一个点