JavaScript打字小游戏代码_javascript技巧

JavaScript打字小游戏代码_javascript技巧

主要代码设计：

复制代码 代码如下:

//——-全局变量——-

var data={

“10”:

,”11″:

,”12″:

,”13″:

“14”:

,”15″:

,”16″:

,”17″:

“18”:

,”19″:

,”20″:

,”21″:

“22”:

,”23″:

,”24″:

,”25″:

“26”:

,”27″:

,”28″:

,”29″:

“30”:

,”31″:

,”32″:

,”33″:

“34”:

,”35″:

};

var datas=new Array();//随机出现的 class样式以数组中偶数存储php小游戏代码php小游戏代码JavaScript打字小游戏代码_javascript技巧，图片以数组中奇数存储

var now=new Date();

var Image; //随机出现图片

var Divs;//随机出现层

var count=0;//积分系统

var key;//键盘的值

var =1;//出现字母图片的个数

var =30;//控制游戏的时间

var ;//时间为0

var =30;//显示时钟变量

var time1;//变量

var time2=5000;//设定的时间

var time3;

var tab;//用来记录，传递焦点位置的值

//——–这样写为了兼容FF浏览器——-

var plug = {

:(o,e,f){

if(o.){

o.(e,f,false);

else if(o.){

o.(“on”+e,f);

plug.(,”load”,(){Focus()});//兼容FF浏览器

//——1.控制游戏时间函数——–

(){

for(=;>=0;–) {

.(‘Show(‘ + + ‘)’,(-+2) * 1000);

Show(){

if(==0){

(time1);//停止游戏

alert(“游戏结束!你的得分为:”+count);

$(“#main”).empty();//清除main中的div

$(“.”).empty();

$(“#”).empty();

$(“#”).empty();

count=0;//得分清空为0

Score();//让分数框显示为0

Focus();//重新生成菜单选项

//———2.动画效果———

fun(){

datas.=0;

for(var i=0;=(Math.() * 26)+10;//随机出现字母图片

datas.push(Image);//图片以数组中偶数存储,从零开始

Divs=(Math.() * 8)+1;//随机出现层的class样式即层的不同位置

datas.push(Divs);//样式以数组中奇数存储

var time=(Math.() * 2000)+3000;//完成动画的时间

if( $divs=$(“

“+data

Image

+”

“);

$(“#main”).($divs);

//—–JQ动画函数—-

$(“.”+Divs).(

{“top”:$().() – $(“.”+Divs).() – $(“.”+Divs).().top},time,(){$(“#main”).empty()})

//——–3.设定字母图片出现的时间——

sets(){

time1 = (fun,time2);

//———4.绑定键盘———

//———兼容FF浏览器———

. = (e){

e = e||.event;

var key = e.||e.

(key)

//———5.判断函数———

(key){

if(key==13){

(tab){

case 0:();();time3=(,1000);sets();$(“#”).hide(2000);break;//开始游戏

case 1:();();time3=(,1000);sets();$(“#”).hide(2000);break;//开始游戏

case 2:alert(“可以在左侧设置游戏选项”);break;

case 3:.=null;.open(”,’_self’);.close();break;//退出游戏

case 4:.=null;.open(”,’_self’);.close();break;//退出游戏

for(var j=0;jif(key==datas

+55){

$(“.”+datas

j+1

).hide();//key值相等,隐藏该层

datas

; //为了避免有重复的字母，所以数组里面每遍历到一个(key==datas

+55)都要删除这个值

count+=10;

Score();

break;

//———6.游戏菜单——-

Focus(){

//———初始化游戏界面——–

var $=$(“

“);

$(“.”).($);

for(var i=30;i$(“#”).(” + i+ ”)

for(var j=1;j$(“#”).(” + j+ ”)

//———开始时取得第一个input的焦点——–

$(“.:first”).(“focus”).(“”);

tab=1;//因为第一个焦点是没法输入Enterphp小游戏代码JavaScript打字小游戏代码_javascript技巧，所以要调用键盘输入事件

var =1;

//———-获取tr行数，input个数——–

$(“#”).find(“tr”).each((r) {

$(this).find(“input”).attr(“”, r+1);//为焦点位置的值，赋初值为1，遍历为1-2-3-4

});

//———响应input的键盘上下操作

$(“# .”).bind(“”, (e){

= ($(this).attr(“”));//取得当前焦点的值

(e.which){

case 38://向上

-=1;

tab=;

break;

case 40://向下

+=1;

tab=;

break;

:

//——–判断焦点的值

if ( > 0 && $(“.

=” + + “

“).focus().(“”);//当前input获取焦点

for(var i=0;i{

if(i==){

break;

else{

$(this).(“”);

();

false;

true;

});

//——–7.游戏时间选项———

(){

var =.(“”);

for(var i=0;iif(

.) {

=.

.text;

=;

//—–8.显示游戏时间——-

(){

var =.(“”);

if(){//如果网页速度很慢的话，可能定时器运行的时候控件还没有加载

if(val(time3);//停止计时器

else{

.value=;

–;

//——–9.游戏难度选项———

(){

var =.(“”);

for(var i=0;iif(

.) {

=.

.text;

//———10.游戏得分———–

Score(){

var sum=.(“sum”);

sum.value=count;

if(count==0){ //初始化文本框分数为0

sum.value=count;

总结：由于时间隔得比较久，代码方面没有优化，有个地方做得不是很好，就是字母出现的时间间隔过长，有兴趣的话可以尝试修复。代码仅供参考

在线演示：

打包下载：

Java免费学习笔记：立即学习

解锁 Java 大师之旅：从入门到精通的终极指南