javascript 写植物大战僵尸（一）

我在网上看了别人写的Javascript版植物大战僵尸，没想抄她的，自己已经有思路了。只用了她的images和musics. 一步一步来嘛，能写到哪就写到哪吧。当然如果大家有什么思路，多多指教。

 

 代码文件存放目录：

 

demo.html   

引入声音文件，僵尸，射手，向日花，子弹。

 

css/css.css

僵尸，射手，向日花，子弹这些dom都隐藏，以备复制。

#tGround {
	position: absolute;
	width: 1400px;
	height: 600px;
	visibility: visible;
	z-index: 0;
	background-image: url(../images/interface/background1.jpg);
	left: -115px;
	background-position: initial initial;
	background-repeat: no-repeat no-repeat;
}

.SunFlower {
	position: absolute;
	z-index: 6;
	display:none;
}

.Repeater {
	position: absolute;
	z-index: 9;
	display:none;
}

.PB {
	position: absolute;
	z-index: 9;
	display:none;
}

.Zombie {
	position: absolute;
	z-index: 6;
	display:none;
}
body{
margin:0px;
}

js/PB.js

子弹对象，包括移动自己和删除div

function PB() {

	this.move = function() {
		if (this.speed == undefined) {
			this.speed = PBSpeed;
		}
		
			this.left = this.left + this.speed;
		$(this.PBDiv).css("left", this.left);

	}
	
	this.removeDiv = function() {
		$(this.PBDiv).remove();
	}
}

 

js/Zombie.js 

僵尸对象，包括移动自己和删除div

function Zombie(top, left, speed) {

	this.top = top;
	this.left = left;
	this.speed = speed;

	this.move = function() {
		if (this.speed == undefined) {
			this.speed = ZombieSpeed;
		}

		this.left = this.left + this.speed;
		$(this.zombieDiv).css("left", this.left);

	}
	
	this.removeDiv = function() {
		$(this.zombieDiv).remove();
	}

}

 

js/demo.js

主要的逻辑在这里面，包括复制显示向日花，射手，随机产生僵尸，有射手的行，发射子弹。子弹和僵尸过界都会移除。

(function($) {
	// ready
	$(function() {

		// SunFlower
		var $SunFlower = $(".SunFlower");

		$SunFlower.clone().css( {
			"top" : "70px",
			"left" : "140px"
		}).appendTo("body").show();

		$SunFlower.clone().css( {
			"top" : "170px",
			"left" : "140px"
		}).appendTo("body").show();

		$SunFlower.clone().css( {
			"top" : "270px",
			"left" : "140px"
		}).appendTo("body").show();

		$SunFlower.clone().css( {
			"top" : "370px",
			"left" : "140px"
		}).appendTo("body").show();

		$SunFlower.clone().css( {
			"top" : "470px",
			"left" : "140px"
		}).appendTo("body").show();

		$SunFlower.clone().css( {
			"top" : "70px",
			"left" : "220px"
		}).appendTo("body").show();
		$SunFlower.clone().css( {
			"top" : "170px",
			"left" : "220px"
		}).appendTo("body").show();
		$SunFlower.clone().css( {
			"top" : "270px",
			"left" : "220px"
		}).appendTo("body").show();
		$SunFlower.clone().css( {
			"top" : "370px",
			"left" : "220px"
		}).appendTo("body").show();
		$SunFlower.clone().css( {
			"top" : "470px",
			"left" : "220px"
		}).appendTo("body").show();

		// Repeater
		var $Repeater = $(".Repeater");
		repeaterArr = new Array();

		repeaterArr.push($Repeater.clone().css( {
			"top" : "70px",
			"left" : "300px"
		}).appendTo("body").show());

		repeaterArr.push($Repeater.clone().css( {
			"top" : "170px",
			"left" : "300px"
		}).appendTo("body").show());
		repeaterArr.push($Repeater.clone().css( {
			"top" : "270px",
			"left" : "300px"
		}).appendTo("body").show());
		repeaterArr.push($Repeater.clone().css( {
			"top" : "370px",
			"left" : "300px"
		}).appendTo("body").show());

		repeaterArr.push($Repeater.clone().css( {
			"top" : "470px",
			"left" : "300px"
		}).appendTo("body").show());

		$Zombie = $(".Zombie");
		ZombieLeft = 800;
		ZombieSpeed = -1;// "px/100ms"
		ZombieMinLeft = -100;
		zombieArr = new Array();

		$PB = $(".PB");
		PBSpeed = 30;
		PBArr = new Array();
		PBMaxLeft = 800;
		PBMinLeft = 0;
		var counter = 0;

		// and loop call this.

		var newZombieId = window.setInterval("window.createRandomZombie()",
				10000);

		var updateScreenId = window.setInterval("window.check()", 100);

		window.fire = function() {
			// every repeater
			for ( var i = 0; i < repeaterArr.length; i++) {
				var repeater = repeaterArr[i];
				var pb = new PB();
				pb.left = $(repeater).offset().left;
				pb.top = Math.floor($(repeater).offset().top);
				pb.PBDiv = $PB.clone().css( {
					"top" : pb.top + "px",
					"left" : pb.left + "px"
				}).appendTo("body").show();
				PBArr.push(pb);

			}
		}

		window.check = function() {
			// if there is zombie ,then fire
			if (counter == 0) {
				window.fire();
			}
			counter = ++counter % 10;
			window.checkCollide(); 

			// update the screen;
			window.updateScreen();

		}

		window.checkCollide = function() {
			var PBArrTemp = new Array();
			for ( var j = 0; j < PBArr.length; j++) {
				for ( var i = 0; i < zombieArr.length; i++) {
				console.log("PBArr[j].top : "+PBArr[j].top);
				console.log("PBArr[j].top " +PBArr[j].top);
					if(PBArr[j].top==zombieArr[i].top&&PBArr[j].left>zombieArr[i].left){
						//pb remove
						PBArr[j].removeDiv();
						break;
					}
				}
			}
			//PBArr = PBArrTemp;
			PBArrTemp = null;
		}
		window.updateScreen = function() {
			var zombieArrTemp = new Array();
			var PBArrTemp = new Array();
			// before remove,check it is dead or not
			for ( var i = 0; i < zombieArr.length; i++) {

				if (zombieArr[i].left > ZombieMinLeft
						&& zombieArr[i].left <= ZombieLeft) {
					zombieArrTemp.push(zombieArr[i]);
					zombieArr[i].move();
				} else {
					zombieArr[i].removeDiv();
				}

			}
			zombieArr = zombieArrTemp;
			zombieArrTemp = null;
			// a js function var equals the scope
			for ( var j = 0; j < PBArr.length; j++) {
				if (PBArr[j].left < PBMaxLeft && PBArr[j].left > PBMinLeft) {
					PBArrTemp.push(PBArr[j]);
					PBArr[j].move();
				} else {
					PBArr[j].removeDiv();
				}
			}
			PBArr = PBArrTemp;
			PBArrTemp = null;

		}

		// create Zombie
		window.createZombie = function(topParam, leftParam) {
			if (topParam == undefined) {
				var top = 0;
			} else {
				top = topParam;
			}
			if (leftParam == undefined) {
				var left = ZombieLeft;
			} else {
				left = leftParam;
			}

			var zombie = new Zombie(top, left);

			zombie.top = top;
			zombie.left = left;
			zombie.zombieDiv = $Zombie.clone().css( {
				"top" : top + "px",
				"left" : left + "px"
			}).appendTo("body").show();

			zombieArr.push(zombie);

		}
		// random zobies
		window.createRandomZombie = function() {
			var top = Math.floor(Math.random() * 5) * 100;
			window.createZombie(top, ZombieLeft);

		}

	});

})(jQuery);

 

效果图：