JS實現小女孩行走

用JS實現小女孩行走，行走的過程實際上就是圖片不斷移動的過程，把多張圖片組合在一塊兒，利用人眼反應速度沒有圖片更換速度快的原理，實現了小女孩行走。javascript

基本思路是小女孩從瀏覽器最左邊開始出現，每一個小女孩出現的高度位置是隨機的，速度也是隨機的。css

實現起來並不難，但用到了js面向對象的思惟，下面經過代碼方式來分析小女孩行走。html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.girl {
			position: absolute;
			/* 大小設置爲小女孩的大小，不是整張圖片的大小 */
			width: 79px;
			height: 108px;
			/* 設置整張背景圖片 */
			background-image: url(img/girl.png);
			/* 定位到小女孩從左往右走的圖片 */
			background-position: 0px -216px;
			left: 0px;
			top: 0px;
		}
	</style>
	<body>
		<div class="girl"></div>
	</body>
</html>

<script type="text/javascript">
	function Girl() {
    	//步子爲0
		this.buzi = 0;
		//步長的隨機1-10
		this.step = parseInt(Math.random() * 8 + 1);
		this.timer = null;
    	//小女孩都是從最終版出現
		this.left = 0;
		this.dom = null;
		// 瀏覽器高度
		this.maxTop = (document.documentElement.clientHeight || document.body.clientHeight) - 108;
    	//小女孩出現的高度
		this.top = parseInt(Math.random() * this.maxTop);
		this.dom = null;
		// 構造函數的調用方法
		this.init();
		//再調用行走的方法
		this.walk();
	}

	// 方法綁定到原型上面
	Girl.prototype.init = function() {
		// 添加一個元素，並添加到頁面
		this.dom = document.createElement('div');
		// 添加類名
		this.dom.className = 'girl';
		// 設置不一樣的top定位
		this.dom.style.top = this.top + 'px';
		// 添加到頁面
		document.body.appendChild(this.dom);
	}

	// 行走的方法
	Girl.prototype.walk = function() {
		//橋接，這裏的this賦值給一個變量
		var that = this;
		// 在定時器中用this是window，因此下把this保留下來，指向問題，每隔100毫秒走一步
		this.timer = setInterval(function() {
			//步子累加
			that.buzi++;
			//驗證
			that.buzi = that.buzi > 7 ? 0 : that.buzi;

			that.left += that.step;
			if (that.left > 1200) {
				that.die();
			}
			// 設置當前元素的變化
			that.dom.style.backgroundPositionX = -79 * that.buzi + "px";
			that.dom.style.left = that.left + 'px';
		}, 100)
	}

	// 死亡的方法
	Girl.prototype.die = function() {
        //中止定時器
		clearInterval(this.timer);
        //移除這個div
		document.body.removeChild(this.dom)
	}
	
	//沒隔500毫秒建立一個小女孩對象
	setInterval(function() {
		new Girl();
	}, 500)
</script>

效果：
java

JavaScript(2)：JS實現小女孩行走

JS實現小女孩行走