纯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);//苹果掉落的每列宽度，最小为60var 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;//苹果标签的codethis.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;};
}

纯javascript仿金山苹果打字游戏相关推荐

JavaScript实现简单的打字游戏
完整项目下载:https://download.csdn.net/download/weixin_44893902/13131694 演示地址:https://url_777.gitee.io/typ ...
html简单打字游戏,javascript实现的简单打字游戏
传智打字游戏 .label{ position:absolute;left: 0px; } var CODE = "QWERTYUIOPASDFGHJKLZXCVBNM"; var ...
纯JavaScript山寨腾讯手机游戏《天天爱消除》开发过程详细
前言貌似最近腾讯手机游戏天天爱消除挺火的,我也是粉丝之一,最近对javascript一直比较感兴趣然后想用js仿造一个,应该不是太难,本文系边写代码别写博客,详细叙述开放过程,如果最后开发成功就发表 ...
html5扑克牌游戏源码,【web】纯JavaScript实现window经典纸牌游戏
[JavaScript] 纯文本查看复制代码// 循环遍历将poker图片添加到数组中 var pokersList = []; var flower = 0; for (var i = 1; i ...
Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站
HTML5期末考核大作业基于HTML+CSS+JavaScript仿王者荣耀首页游戏网站开发游戏官网设计与实现
HTML5+JS游戏开发模块----canvas打字游戏升级版
之前发了简单版本打字游戏,现在增加图片,设置开始按钮,记录分数,字母显示也改成对象数组,直接操作对象而不是操作对象属性,孰好孰坏,我也不懂,我也是初学者. 直接上代码字母类 //字母类 functi ...
java swing游戏编程高仿金山打字教程-拯救苹果
原文:java swing游戏编程高仿金山打字教程-拯救苹果源代码下载地址:http://www.zuidaima.com/share/1786650901515264.htm 这几天学习了一下ja ...
仿金山打字通游戏 Java代码
Code: package com.mxs.util;import javax.swing.*; import java.awt.*; import java.awt.event.*;public c ...

纯javascript仿金山苹果打字游戏

纯javascript仿金山苹果打字游戏相关推荐

最新文章

热门文章