周末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 = "<h1>" + this.content + "</h1>";
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;
};
}
- 大小: 14.7 KB
分享到：
相关推荐
【标题】"仿金山打字通网页版打字游戏基于JavaScript实现" 【正文】 在IT领域，编程游戏是一种有效的学习工具，尤其是对于初学者来说，它们可以将枯燥的编程概念转化为有趣的游戏体验。"仿金山打字通网页版打字...
《苹果打字游戏JS版（仿金山打字）》是一个基于JavaScript编程语言开发的互动打字练习应用。这个项目旨在为用户提供一个类似金山打字的打字训练体验，旨在提高用户的打字速度和准确性。通过JavaScript，开发者可以...
《基于jQuery+HTML5的金山打字游戏特效详解》 在现代互联网技术中，前端开发是至关重要的一环，它直接关系到用户与网站的交互体验。本教程将深入解析一个利用jQuery、HTML5和CSS技术实现的金山打字游戏特效，帮助...
HTML5金山打字游戏源码是一个利用HTML5、CSS3技术构建的互动打字练习应用。这个源码提供了一个有趣的方式，帮助用户提高打字速度和准确性，特别适合初学者和想提升指法技巧的人。下面我们将深入探讨HTML5和CSS3在...
【网页版打字游戏】是基于JavaScript编程语言开发的一款在线打字练习应用，它借鉴了经典的金山打字通设计理念，旨在帮助用户通过游戏化的方式提高打字速度和准确性。JavaScript是一种广泛应用于网页开发的轻量级脚本...
金山打字通速刷脚本利用编程语言（如Python、JavaScript等）编写，能够自动执行打字练习中的重复性任务。当用户运行这些脚本时，他们可以体验到几乎无需手动操作的练习过程。例如，自动播放功能允许脚本自动翻页和...
金山打字通是一款在中国广受欢迎的打字训练软件，它提供了丰富的练习材料和游戏化的方式帮助用户提升打字速度和准确性。这个开源项目可能是为了在网页端实现类似的功能，让用户无需安装软件就能进行在线打字练习。 ...
HTML5金山打字游戏源码是一款基于HTML5技术开发的互动式打字练习应用，它旨在帮助用户提高打字速度和准确性。此源码提供了一个完整的框架，包括游戏设计、用户交互以及数据处理等关键部分，是学习和研究HTML5游戏...
利用JavaScript编写的金山打字通游戏，分为三种难度，区别在于砖块生成速度不同，结束时会结算积分，闲暇时也可用来练习打字。
该压缩包文件"jquery+html5实现的仿金山打字游戏特效源码.zip"是一个基于jQuery和HTML5技术开发的打字游戏项目。这个项目旨在模仿金山打字游戏的交互效果，提供一种寓教于乐的方式帮助用户提高打字速度和准确性。...
本项目“jquery+css3+html5仿金山打字游戏特效.zip”正是利用这些技术，为用户提供了类似金山打字游戏的体验。下面，我们将深入探讨这个项目中的关键知识点。 首先，HTML5是新一代的超文本标记语言，它强化了网页...
JavaScript打字游戏是一款适合初学者练习HTML、CSS和JavaScript基础的互动项目。在这个游戏中，用户需要根据屏幕上的提示快速准确地输入文字，以此提高打字速度和准确性。这个项目不仅涵盖了网页开发的基本技术，还...
JavaScript打字游戏是一种利用网页技术实现的互动娱乐应用，它结合了编程语言JavaScript与HTML、CSS等技术，为用户提供了练习打字速度和准确性的平台。在这个游戏中，玩家需要按照屏幕上显示的文字或句子进行快速...
HTML5 打字游戏是一种利用 HTML5、CSS3 和 JavaScript 技术开发的交互式学习应用，旨在提高用户的打字速度和准确性。这种游戏通常包括一个显示文本的区域，用户需要在限定时间内正确输入显示的字符，从而得分并逐步...
《H5游戏源码解析：打字游戏》 在当今数字化时代，HTML5（简称H5）技术以其跨平台、易开发的特点，逐渐成为游戏开发领域的重要选择。本压缩包中的“H5游戏源码 打字游戏.zip”提供了一个以打字练习为主题的H5游戏的...
javascript实现网页上打字练习
在这款打字游戏中，JavaScript监听键盘事件，通过比较用户输入的文字与预设的游戏文本，判断是否正确并实时更新得分。此外，JavaScript还能实现动态反馈，如错误提示和正确输入的动画效果，增强游戏互动性。 接下来...