基于javascript實(shí)現(xiàn)泡泡大冒險(xiǎn)網(wǎng)頁版小游戲

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1260 次日期：2016-07-16 14:20:06

溫馨提示：易賢網(wǎng)小編為您整理了“基于javascript實(shí)現(xiàn)泡泡大冒險(xiǎn)網(wǎng)頁版小游戲”,方便廣大網(wǎng)友查閱！

本文實(shí)例為大家分享了一個(gè)很有趣的網(wǎng)頁版游戲，有點(diǎn)類似金山打字游戲的青蛙過河，供大家參考，具體內(nèi)容如下

效果圖：

實(shí)現(xiàn)思路：

益智類小游戲，主要練習(xí)打字能力，基于jq開發(fā)。

1.在輸入框輸入泡泡對應(yīng)文字，點(diǎn)擊enter提交

2.與泡泡文字相對提示分?jǐn)?shù)

3.可以暫停操作

4.每次泡泡著地會減少血量，減少到0結(jié)束游戲

5.每過一段時(shí)間會加快泡泡下落速度

具體代碼：

<html>

<head>

<title>javascript實(shí)現(xiàn)泡泡大冒險(xiǎn)</title>

$(function(){

//data

var arr_word=[

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

['人們','你的','傻子','哈哈','加油','喂食','電視','漢語','游戲','真的','說謊'],

['大家好','紅領(lǐng)巾','共產(chǎn)黨','愛人民','學(xué)習(xí)吧','不愿意','棒棒糖'],

['望塵莫及','大智若愚','小小可愛','真心英雄','最新戰(zhàn)艦','小米手機(jī)','蘋果電腦']

];

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為加速判定依據(jù)

var num=0;//擊中個(gè)數(shù)

var ji=1;//所在級別，開始在第一級別

var guan=300;//下一關(guān)測試基本值

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為加速判定依據(jù)

num=0;//擊中個(gè)數(shù)

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">泡泡大冒險(xiǎn)</div>

<p>1.游戲開始前，請切換到中文輸入法。</p>

<p>2.輸入泡泡中的詞語，按Enter鍵確認(rèn)。</p>

<p>3.打錯按Enter鍵清除，節(jié)省時(shí)間。</p>

<p>4.別讓泡泡落地，您只有5次幾乎。</p>

</div>

</div>

</span>

</div>

</div>

</div>

</div>

<p class="game-connect-fen">您得分已達(dá)到<span>0</span></p>

</div>

</body>

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，在工作學(xué)習(xí)累了，大家可以玩一玩一些益智游戲，做到勞逸結(jié)合。

更多信息請查看網(wǎng)絡(luò)編程

上一篇：java中String類型變量的賦值問題介紹

下一篇：基于javascript實(shí)現(xiàn)句子翻牌網(wǎng)頁版小游戲

易賢網(wǎng)手機(jī)網(wǎng)站地址：基于javascript實(shí)現(xiàn)泡泡大冒險(xiǎn)網(wǎng)頁版小游戲

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實(shí)現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類型
姓名
手機(jī)號
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合