纯javascript仿金山苹果打字游戏

周末2天在家无聊，女朋友要练打字，一直都是在用金山的苹果打字，哈哈，干脆就自己用JS写一个苹果打字游戏，内容比较简单，本人不会美工，页面没有美化，贴出来跟大家一起学习。

    本打字游戏共分10关，第一关:初出茅庐";第二关:步入江湖";第三关:小试牛刀";"第四关:逐鹿中原";第五关:傲视群雄";"第六关:楚汉争霸";"第七关:惨绝人寰";"第八关:人间地狱";"第九关:东方不败";"第十关:一统江湖";，哈哈，纯属自娱自乐，每一关死扛60秒即可通关，超过10个苹果落地则挑战失败，可重复挑战本关，前三关只有字母，三至七关字母和数字混合，最后三关加上了一些常用符号。代码水平有限，多指教！如果你觉得自己打字水平够牛可以挑战一下，把挑战的结果贴出来哈，我的水平就只能通到第四关哈，丢人了哈，哈哈...

     注：只有在IE下才有背景音乐，FF下不支持bgsound标签，本版本仅为测试版，不支持FF,代码不够兼容，有待改进哈。本文可转载，转载请注明转载出处：http://linshouyi.iteye.com/admin/blogs/652939，游戏可以随意下载，修改。有共同爱好者可以一起探讨研究学习，QQ:122437812。谢谢！

 

 

 把关键的JS代码贴出来，并加上了注释，游戏全部代码在附件中。

 

/*
   作者：林寿怡
   时间：2010年4月25日
   QQ号码：122437812
   本打字游戏纯属个人兴趣爱好，学习使用，可以复制转载改进，请勿用于商业，希望有志同道合的朋友一起探究，学习!
   转载请注明转载出处：http://linshouyi.iteye.com/admin/blogs/652939
   */
var errorNum = 10;//设置每关允许的错误数量
var timeOver = 60;//设置每关的时间
var g = new game(0, errorNum);
function begin() {
	if (g.isOver) {
		g.begin();
	}
}
function end() {
	alert("\u6682\u505c\u4e2d...\u662f\u5426\u7ee7\u7eed\uff1f");
}
/*游戏对象*/
function game(step, totalError) {
	this.step = step;//游戏关数
	this.totalError = totalError;//游戏每关允许的错误数量
	this.isOver = true;//游戏是否结束
	this.music;//游戏音乐
	this.clock;//游戏时间
	this.gameTitle;//游戏标题
	this.configs = new Array();//游戏所有关的参数设置
	this.configs[this.configs.length] = new Array(15, 20, 480, 2, 1, 26);
	this.configs[this.configs.length] = new Array(15, 20, 480, 3, 1.5, 26);
	this.configs[this.configs.length] = new Array(15, 20, 480, 2, 2, 26);
	this.configs[this.configs.length] = new Array(15, 20, 480, 3, 2, 36);
	this.configs[this.configs.length] = new Array(15, 20, 480, 3, 2.2, 36);
	this.configs[this.configs.length] = new Array(15, 20, 480, 2, 2.5, 36);
	this.configs[this.configs.length] = new Array(15, 20, 480, 3, 2.5, 36);
	this.configs[this.configs.length] = new Array(15, 20, 480, 2, 2, 46);
	this.configs[this.configs.length] = new Array(15, 20, 480, 3, 3, 46);
	this.configs[this.configs.length] = new Array(15, 20, 480, 4, 4, 46);
	this.appleTree;//游戏产生苹果的苹果树
	this.errorCounter;//游戏错误计数器，每掉落一个苹果，则加1
	/*游戏开始*/
	this.begin = function () {
		this.music = new music();
		this.music.start();
		this.clock = new clock(this, timeOver);
		this.clock.start();
		this.appleTree = new appleTree(this, this.configs[this.step][0], this.configs[this.step][1], this.configs[this.step][2], this.configs[this.step][3], this.configs[this.step][4], this.configs[this.step][5]);
		this.appleTree.start();
		this.gameTitle = new gameTitle(this.step);
		this.gameTitle.show();
		this.errorCounter = new errorCounter(this, this.totalError);
		this.isOver = false;
	};
	/*游戏结束*/
	this.over = function () {
		this.music.end();
		this.appleTree.stop();
		this.clock.stop();
		this.errorCounter.clear();
		this.isOver = true;
	};
	/*游戏闯关成功*/
	this.success = function () {
		if (!this.isOver) {
			this.over();
			this.step++;
			if (this.step == 10) {
				this.step = 0;
				alert("\u606d\u559c\u4f60\uff0c\u6210\u529f\u95ef\u8fc7\u6240\u6709\u5173\uff0c\u4f60\u592a\u5e05\u4e86\uff01");
			} else {
				alert("\u606d\u559c\u4f60\uff0c\u6210\u529f\u95ef\u8fc7" + this.gameTitle.steps[this.gameTitle.step] + "\uff01\n\u70b9\u51fb\u5f00\u59cb\u8fdb\u884c\u4e0b\u4e00\u5173\uff01");
			}
		}
	};
	/*游戏闯关失败*/
	this.failure = function () {
		if (!this.isOver) {
			if (confirm("\u5f88\u9057\u61be\uff0c\u95ef\u5173\u5931\u8d25\uff01\u662f\u5426\u8981\u91cd\u65b0\u6311\u6218\u672c\u5173\uff01")) {
			} else {
				this.step = 0;
			}
			this.over();
		}
	};
}
/*游戏标题*/
function gameTitle(step) {
	this.step = step;
	this.steps = new Array();
	this.steps[this.steps.length] = "\u7b2c\u4e00\u5173:\u521d\u51fa\u8305\u5e90";
	this.steps[this.steps.length] = "\u7b2c\u4e8c\u5173:\u6b65\u5165\u6c5f\u6e56";
	this.steps[this.steps.length] = "\u7b2c\u4e09\u5173:\u5c0f\u8bd5\u725b\u5200";
	this.steps[this.steps.length] = "\u7b2c\u56db\u5173:\u9010\u9e7f\u4e2d\u539f";
	this.steps[this.steps.length] = "\u7b2c\u4e94\u5173:\u50b2\u89c6\u7fa4\u96c4";
	this.steps[this.steps.length] = "\u7b2c\u516d\u5173:\u695a\u6c49\u4e89\u9738";
	this.steps[this.steps.length] = "\u7b2c\u4e03\u5173:\u60e8\u7edd\u4eba\u5bf0";
	this.steps[this.steps.length] = "\u7b2c\u516b\u5173:\u4eba\u95f4\u5730\u72f1";
	this.steps[this.steps.length] = "\u7b2c\u4e5d\u5173:\u4e1c\u65b9\u4e0d\u8d25";
	this.steps[this.steps.length] = "\u7b2c\u5341\u5173:\u4e00\u7edf\u6c5f\u6e56";
	this.div;
	this.show = function () {
		this.div = document.getElementById("title");
		this.div.innerHTML = this.steps[this.step];
	};
	this.display = function () {
		this.div = document.getElementById("title");
		this.div.innerHTML = "";
	};
}
/*游戏错误计数器*/
function errorCounter(game, totalError) {
	this.game = game;
	this.error = 0;//初始化错误数量
	this.totalError = totalError;//允许最大错误数量
	this.add = function () {
		this.error++;
		this.create();
		if (this.error >= this.totalError) {
			this.game.failure();
		}
	};
	this.create = function () {
		var img = document.createElement("img");
		img.src = "images/apple.gif";
		img.width = "21";
		img.height = "25";
		document.getElementById("errorCounter").appendChild(img);
	};
	this.clear = function () {
		document.getElementById("errorCounter").innerHTML = "";
	};
}
/*游戏时间*/
function clock(game, second) {
	var clock = this;
	this.game = game;
	this.second = second;//时间秒数
	this.isGo;//时间是否进行
	this.div = document.getElementById("clock");
	/*开始计时*/
	this.start = function () {
		this.isGo = true;
		this.timeGo();
	};
	/*不停计时*/
	clock.timeGo = function () {
		if (clock.isGo) {
			clock.second--;
			clock.div.innerHTML = "\u5269\u4f59\u65f6\u95f4\uff1a" + clock.second;
			if (clock.second <= 0) {
				clock.game.success();
			}
			window.setTimeout(clock.timeGo, 1000);
		}
	};
	/*计时结束*/
	this.stop = function () {
		this.isGo = false;
	};
}
/*游戏音乐*/
function music() {
	this.music;
	/*音乐开始*/
	this.start = function () {
		this.music = document.createElement("bgsound");
		this.music.src = "music/apple.mp3";
		this.music.loop = "infinite";
		document.body.appendChild(this.music);
	};
	/*音乐结束*/
	this.end = function () {
		document.body.removeChild(this.music);
	};
}
/*苹果树，可以掉落苹果*/
function appleTree(game, col, height, length, speed, count, limit) {
	var appleTree = this;
	this.game = game;
	this.col = col;//掉落苹果的列数
	this.height = height;//苹果开始掉落的位置
	this.length = length;//苹果掉落地上消失的位置
	this.speed = speed;//苹果掉落的速度
	this.count = count;//每秒掉落的苹果数量
	this.limit = limit;//限制苹果种类的范围
	this.apples = new Array();//放苹果的篮子
	this.keys = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "`", "-", "=", "[", "]", "\\", ";", "'", ",", "/");//所有苹果上的标签字符数组，包括字母，数字和符号
	this.more;//是否能够掉落苹果
	this.start = function () {
		this.more = true;
		this.produceApple();
	};
	/*生产苹果*/
	appleTree.produceApple = function () {
		if (appleTree.more) {
			var index = Math.floor(Math.random() * Math.min(appleTree.keys.length, appleTree.limit));//随机产生标签字符数组的下标
			var width = Math.max(document.body.clientWidth / appleTree.col, 60);//苹果掉落的每列宽度，最小为60
			var x = Math.floor(Math.random() * appleTree.col) * width;//随机产生苹果掉落的X坐标位置
			var key = appleTree.keys[index];//得到苹果的标签字符
			var keyCode = key.charCodeAt(0);//得到苹果标签字符的code,用于和事件对象的keyCode做比较
			var a = new apple(appleTree.game, x, appleTree.height, true, appleTree.speed, appleTree.length, key, keyCode);
			a.create();
			appleTree.apples[appleTree.apples.length] = a;//将掉落的苹果放入苹果篮子中
			window.setTimeout(appleTree.produceApple, 1000 / appleTree.count);
		}
	};
	/*停止掉落苹果*/
	this.stop = function () {
		if (this.more) {
			var alength = this.apples.length;
			for (var i = 0; i < alength; i++) {
				var a = this.apples[i];
				a.clear();
			}
		}
		this.more = false;
	};
	/*监听键盘*/
	document.onkeypress = function (e) {
		var e = e ? e : event;
		var length = appleTree.apples.length;
		for (var i = 0; i < length; i++) {
			if (appleTree.apples[i].isLive && appleTree.apples[i].keyCode == e.keyCode) {//杀死活着的并且敲击的键为苹果的标签的最早产生的苹果
				appleTree.apples[i].clear();
				return;
			}
		}
	};
}
/*苹果（很好吃，O(∩_∩)O哈哈~）*/
function apple(game, x, y, isLive, speed, length, content, keyCode) {
	var apple = this;
	this.game = game;
	this.x = x;//苹果的X轴位置
	this.y = y;//苹果的Y轴位置
	this.isLive = isLive || false;//苹果的生死
	this.speed = speed;//苹果掉落的速度
	this.length = length;//苹果落地的位置
	this.content = content;//苹果的标签
	this.keyCode = keyCode;//苹果标签的code
	this.div;
	/*苹果产生*/
	this.create = function () {
		if (this.isLive) {
			this.div = document.createElement("div");
			this.div.className = "apple";
			this.setX(this.x);
			this.setY(this.y);
			this.div.innerHTML = "
" + this.content + "
";
			document.body.appendChild(this.div);
			this.drop();
		}
	};
	/*苹果掉落*/
	apple.drop = function () {
		if (apple.isLive) {
			if (apple.y < length) {
				var cy = apple.y + apple.speed;
				apple.setY(cy);
				window.setTimeout(apple.drop, 20);
			} else {
				apple.clear();
				apple.game.errorCounter.add();
			}
		}
	};
	/*杀死苹果*/
	this.clear = function () {
		if (this.isLive) {
			this.div.parentNode.removeChild(this.div);
			this.isLive = false;
		}
	};
	this.setX = function (x) {
		this.x = x;
		this.div.style.left = this.x;
	};
	this.setY = function (y) {
		this.y = y;
		this.div.style.top = this.y;
	};
	this.getX = function () {
		return this.x;
	};
	this.getY = function () {
		return this.y;
	};
}