基于javascript实现泡泡大冒险网页版小游戏

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：932 次日期：2016-07-16 14:20:06

温馨提示：小编为您整理了“基于javascript实现泡泡大冒险网页版小游戏”,方便广大网友查阅！

本文实例为大家分享了一个很有趣的网页版游戏，有点类似金山打字游戏的青蛙过河，供大家参考，具体内容如下

效果图：

实现思路：

益智类小游戏，主要练习打字能力，基于jq开发。

1.在输入框输入泡泡对应文字，点击enter提交

2.与泡泡文字相对提示分数

3.可以暂停操作

4.每次泡泡着地会减少血量，减少到0结束游戏

5.每过一段时间会加快泡泡下落速度

具体代码：

<html>

<head>

<title>javascript实现泡泡大冒险</title>

$(function(){

//data

var arr_word=[

['你','在','我','啊','真','全','或'],

['人们','你的','傻子','哈哈','加油','喂食','电视','汉语','游戏','真的','说谎'],

['大家好','红领巾','共产党','爱人民','学习吧','不愿意','棒棒糖'],

['望尘莫及','大智若愚','小小可爱','真心英雄','最新战舰','小米手机','苹果电脑']

];

var arr_type=[

['one_1','one_2','one_3','one_4','one_5'],

['two_1','two_2','two_3','two_4','two_5'],

['three_1','three_2','three_3','three_4','three_5'],

['four_1','four_2','four_3','four_4','four_5']

];

var arr_wh=[50,70,90,110];

//init

var dong=null;//动画

var obj_arr=[];//总下落物体

var time=7000;//下落间隔

var downtime=80;//下落速度

var skip=100;//skip*ji为加速判定依据

var num=0;//击中个数

var ji=1;//所在级别，开始在第一级别

var guan=300;//下一关测试基本值

var hji=1;//跳 300 600 900

var isnext=true;

//event

$(".game-start").click(function(){

start();

});

$("#pause").click(function(){

if($(this).val()=="暂停"){

$("#keyval").attr('disabled','disabled');

$(this).val("开始");

for(var i=0;i<obj_arr.length;i++){

obj_arr[i].pause();

};

clearInterval(dong);

}else{

$("#keyval").removeAttr('disabled');

$("#keyval").focus();

$(this).val("暂停");

for(var i=0;i<obj_arr.length;i++){

obj_arr[i].start();

};

dong=setInterval(down,time);

};

});

$("#greset").click(function(){

greset();

});

$(window).keyup(function(event){

if(event.which=='13'){

if(isnext){

var textval=$("#keyval").val();

for(var i=0;i<obj_arr.length;i++){

if(obj_arr[i].text==textval && obj_arr[i].is==true){

var zz=parseInt($(".game-tools-count").children("em").html())+parseInt(obj_arr[i].fen);

$(".game-tools-count").children("em").html(zz);

fskip(zz);

obj_arr[i].success();

num=parseInt(num)+parseInt(1);

}else{

};

$("#keyval").val("");

$("#keyval").focus();

}else{

$(".game-connect").hide();

jixu();

isnext=true;

};

}else if(event.which=='27'){

$(".game-connect").hide();

greset();

};

});

//function

function start(){

$("#keyval").removeAttr('disabled');

$(".game-logo").hide();

$(".shuo-ming").hide();

$(".game-start").hide();

$(".game-tools").show();

$(".game-xue").show();

$("#game-box").show();

$("#keyval").focus();

$("#keyval").val("");

down();

dong=setInterval(down,time);

};

function jixu(){

for(var i=0;i<obj_arr.length;i++){

obj_arr[i].clear();

};

clearInterval(dong);

start();

};

function fskip(count){

if(count>=skip*ji){

if(count>=guan*hji){

hji=parseInt(hji)+parseInt(1);

downtime=downtime-5;

if(downtime<=0){downtime=0}else{};

isnext=false;

connect();

}else{

speed();

ji=parseInt(ji)+parseInt(1);

downtime=downtime-5;

};

}else{

};

function speed(){

$(".game-speed").show();

setTimeout(function(){

$(".game-speed").hide();

},1000);

};

function connect(){

$(".game-connect").find(".game-connect-fen").children("span").html($(".game-tools-count").children("em").html());

$(".game-connect").find(".game-connect-sum").children("span").html(num);

$(".game-connect").show();

$("#keyval").attr('disabled','disabled');

for(var i=0;i<obj_arr.length;i++){

obj_arr[i].pause();

};

clearInterval(dong);

};

function down(){

var word=Math.floor(Math.random()*arr_word.length);

var w=arr_word[word][real(word)[0]];

var t=arr_type[word][real(word)[1]];

var fen=(parseInt(word)+parseInt(1))*10;

var x=Math.floor(Math.random()*570);

var wu=new Wu($("#game-box"),w,t,fen,x,arr_wh[word]);

obj_arr.push(wu);

wu.init();

};

function real(word){

var w_len=arr_word[word].length;

var t_len=arr_type[word].length;

var w_index=Math.floor(Math.random()*w_len);

var t_index=Math.floor(Math.random()*t_len);

var arr=[];

arr[0]=w_index;

arr[1]=t_index;

return arr;

};

function gameover(){

$(".game-reset").find(".game-reset-fen").children("span").html($(".game-tools-count").children("em").html());

$(".game-reset").find(".game-reset-sum").children("span").html(num);

$(".game-reset").show();

$("#keyval").attr('disabled','disabled');

for(var i=0;i<obj_arr.length;i++){

obj_arr[i].pause();

};

clearInterval(dong);

};

function greset(){

for(var i=0;i<obj_arr.length;i++){

obj_arr[i].clear();

};

obj_arr=[];

$(".game-reset").hide();

$(".game-xue-val").children("span").html(100);

$(".game-xue-val").children("span").css('width',"100%");

$(".game-tools-count").children("em").html(0);

time=7000;//下落间隔

downtime=80;//下落速度

skip=100;//skip*ji为加速判定依据

num=0;//击中个数

ji=1;//所在级别，开始在第一级别

guan=300;

hji=1;

clearInterval(dong);

start();

};

function gameval(val){

$(".game-xue-val").children("span").html(val);

$(".game-xue-val").children("span").css('width',val+"%");

};

//class

function Wu(parent,w,t,fen,x,wh){

this.parent=parent;

this.obj=null;

this.text=w;

this.wh=wh;

this.endwh=450-wh;

this.classname=t;

this.fen=fen;

this.left=x;

this.don=null;

this.is=true;

var that=this;

this.init=function(){

this.append();

this.odown();

};

this.append=function(){

var tmp=$("<span></span>");

tmp.attr('class',this.classname+" down-animation"+this.fen/10);

tmp.text(this.text);

tmp.css('top',-this.wh/2);

tmp.css('left',this.left);

this.parent.append(tmp);

this.obj=tmp;

};

this.odown=function(){

this.don=setInterval(this.donn,downtime);

};

this.donn=function(){

var newt=that.obj.position().top+1

if(newt>that.endwh){

clearInterval(that.don);

that.val();

that.clear();

}else{

that.obj.css("top",newt)

};

this.clear=function(){

this.obj.remove();

this.is=false;

clearInterval(this.don);

};

this.success=function(){

this.obj.removeClass("down-animation"+this.fen/10).addClass("clear-animation");

this.obj.html(this.fen);

setTimeout(function(){

that.clear();

},2000);

};

this.val=function(){

var val=parseInt($(".game-xue-val").children("span").html())-parseInt(20);

if(val<=0){

gameover();

}else{

gameval(val);

};

this.pause=function(){

clearInterval(this.don);

};

this.start=function(){

this.don=setInterval(this.donn,downtime);

};

//end

});

</script>

</head>

<body>

<div class="game-logo">泡泡大冒险</div>

<p>1.游戏开始前，请切换到中文输入法。</p>

<p>2.输入泡泡中的词语，按Enter键确认。</p>

<p>3.打错按Enter键清除，节省时间。</p>

<p>4.别让泡泡落地，您只有5次几乎。</p>

</div>

</div>

</span>

</div>

</div>

</div>

</div>

<p class="game-connect-fen">您得分已达到<span>0</span></p>

</div>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，在工作学习累了，大家可以玩一玩一些益智游戏，做到劳逸结合。

上一篇：java中String类型变量的赋值问题介绍

下一篇：基于javascript实现句子翻牌网页版小游戏

手机网站地址：基于javascript实现泡泡大冒险网页版小游戏

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！