周末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
分享到：
相关推荐
《苹果打字游戏JS版（仿金山打字）》是一个基于JavaScript编程语言开发的互动打字练习应用。这个项目旨在为用户提供一个类似金山打字的打字训练体验，旨在提高用户的打字速度和准确性。通过JavaScript，开发者可以...
《基于jQuery+HTML5的金山打字游戏特效详解》 在现代互联网技术中，前端开发是至关重要的一环，它直接关系到用户与网站的交互体验。本教程将深入解析一个利用jQuery、HTML5和CSS技术实现的金山打字游戏特效，帮助...
JS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 ....
在实际操作中，用户需要具备一定的计算机基础知识，包括了解脚本语言（如Python、JavaScript等）以及如何在金山打字通中正确导入和执行脚本。对于初学者，建议先了解脚本的基本概念和安全注意事项，再尝试使用这些...
【网页版打字游戏】是基于JavaScript编程语言开发的一款在线打字练习应用，它借鉴了经典的金山打字通设计理念，旨在帮助用户通过游戏化的方式提高打字速度和准确性。JavaScript是一种广泛应用于网页开发的轻量级脚本...
该压缩包文件"jquery+html5实现的仿金山打字游戏特效源码.zip"是一个基于jQuery和HTML5技术实现的打字游戏的源代码。这个项目可能是为了教学目的或者为开发者提供一个参考，以了解如何将这两项技术结合起来创建交互...
HTML5金山打字游戏源码是一款基于HTML5技术开发的互动式打字练习应用，它旨在帮助用户提高打字速度和准确性。此源码提供了一个完整的框架，包括游戏设计、用户交互以及数据处理等关键部分，是学习和研究HTML5游戏...
利用JavaScript编写的金山打字通游戏，分为三种难度，区别在于砖块生成速度不同，结束时会结算积分，闲暇时也可用来练习打字。
JavaScript打字游戏是一款适合初学者练习HTML、CSS和JavaScript基础的互动项目。在这个游戏中，用户需要根据屏幕上的提示快速准确地输入文字，以此提高打字速度和准确性。这个项目不仅涵盖了网页开发的基本技术，还...
JavaScript打字游戏是一种利用网页技术实现的互动娱乐应用，它结合了编程语言JavaScript与HTML、CSS等技术，为用户提供了练习打字速度和准确性的平台。在这个游戏中，玩家需要按照屏幕上显示的文字或句子进行快速...
HTML5金山打字游戏源码是一个使用HTML5、CSS3以及JavaScript技术开发的互动游戏，旨在帮助用户提高打字速度和准确性，进行有效的指法训练。在这个游戏中，玩家需要按照屏幕上显示的文字快速准确地在键盘上输入，以此...
在这款打字游戏中，JavaScript监听键盘事件，通过比较用户输入的文字与预设的游戏文本，判断是否正确并实时更新得分。此外，JavaScript还能实现动态反馈，如错误提示和正确输入的动画效果，增强游戏互动性。 接下来...
JavaScript 仿苹果风格图标滑出式导航菜单 apple menu
js金山打字通2011.exe
本案例中的"打字小游戏"是一个利用JavaScript实现的娱乐项目，旨在提高用户打字速度和准确性。下面将详细介绍这个项目的实现原理、核心技术和相关知识点。 1. **事件监听**：打字小游戏的关键在于监听用户的键盘...
接下来，我们需要在JavaScript中编写代码来控制自动打字的效果。基本思路是利用JavaScript的`setTimeout`函数来模拟延迟执行，逐步添加文本到目标元素。以下是一个简单的实现： ```javascript function typeText...
4. **金山打字小游戏**： 金山打字小游戏可能结合了HTML5的`<audio>`标签播放背景音乐，以及`<input type="text">`元素来接收用户输入。JavaScript用于实时检测用户的打字速度、正确率，以及与游戏进程的同步。游戏...