周末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编写
这是一个用JavaScript编写的简单的打字游戏,高手的话可以加以完善哦。。。
jquery+html5仿金山打字游戏特效.zip
JS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 .htmlJS和HTML和JAVAScript写的打字小游戏 ....
JavaScript实现金山打字功能 全面了解键盘与网页之间的交互!
利用JavaScript编写的金山打字通游戏,分为三种难度,区别在于砖块生成速度不同,结束时会结算积分,闲暇时也可用来练习打字。
这是一款模仿金山打字通而来的网页版打字游戏,游戏由 javascript编写
纯javascript模仿微信打飞机游戏代码 纯javascript模仿微信打飞机游戏代码
蔡世友老师课程之javascript制作的网页打字小游戏
JavaScript做的打字游戏(有速度快慢的),还是可以哈!
使用Javascript语言实现的一个网页打字游戏,主要是在学习Javascript基础时写的一个小程序,适合初学者。
javascript做的一个简单打字游戏,和初学者们一起分享一下
JavaScript 仿苹果风格图标滑出式导航菜单 apple menu
js金山打字通2011.exe
AutoType 原生 JavaScript 实现的自动打字效果
HTM5L+css3+JavaScript实现,打字游戏是用于电脑初学者练习打字,熟悉键盘的游戏。初学者可以根据自己的水平设置游戏难度,逐步提高打字速度。
纯javascript仿做土豆网豆单列表载入图片特效.zip
纯JavaScript实现:无需依赖其他框架或库,仅使用纯JavaScript实现游戏的全部功能,展示了JavaScript在网页游戏开发中的强大能力。 随机迷宫生成:通过算法随机生成迷宫地图,每次游戏都有不同的挑战和体验。 简单...