学习记录——动画射击游戏<body><divid="range"><divid="score"></div><imgsr

<body>
	<div id="range">
	<div id="score"></div>
	<img src="ufo.png" alt="" id="img1">
	</div>
	<script>
	var timer = null;
	var el = null;
	var score = 0; // 得分：射中的次数
	var shots = 0; // 总的射击数
	function moveIt() {

	// 在元素到达屏幕最右侧时把它重新移动到屏幕最左侧
	if (parseInt(el.style.left) > (screen.width - 50)) {
	el.style.left = 0;
	}

	// 每次把指定元素向右移动6个像素
	el.style.left = parseInt(el.style.left) + 6 + 'px';

	// 垂直方向的变化，top属性值从 100-80= 20(px) 变化到 100+80 = 180(px)
	el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left) / 50)) + "px"

	// 利用setTimeout()每隔25毫秒调用自己一次
	timer = setTimeout(moveIt, 25)
	}

	function scoreUp() {
	score++;
	}

	function scoreboard() {
	document.querySelector("#score").innerHTML = "Shots:" + shots + " Score:" + score;
	}
	window.onload = function () {
	el = document.querySelector("#img1")

	// 当动画元素（ufo图片）上检测到鼠标点击时，就会调用函数scoreUp()，增加用户得分。
	el.onclick = scoreUp;

	// 通过鼠标点击实现射击，在range范围内，鼠标指针会变成十字符号
	document.querySelector("#range").onclick = function () {
	shots++;
	scoreboard();
	}
	scoreboard()
	el.style.left = "50px"
	moveIt();
	}
	</script>
	</body>