基於javascript實現泡泡大冒險網頁版小游戲
編輯：關於JavaScript
本文實例為大家分享了一個很有趣的網頁版游戲，有點類似金山打字游戲的青蛙過河，供大家參考，具體內容如下
效果圖：
實現思路：
益智類小游戲，主要練習打字能力，基於jq開發。
1.在輸入框輸入泡泡對應文字，點擊enter提交
2.與泡泡文字相對提示分數
3.可以暫停操作
4.每次泡泡著地會減少血量，減少到0結束游戲
5.每過一段時間會加快泡泡下落速度
具體代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript實現泡泡大冒險</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="css/paopao.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(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 id="game">
<div class="game-logo">泡泡大冒險</div>
<div class="shuo-ming">
<p>1.游戲開始前，請切換到中文輸入法。</p>
<p>2.輸入泡泡中的詞語，按Enter鍵確認。</p>
<p>3.打錯按Enter鍵清除，節省時間。</p>
<p>4.別讓泡泡落地，您只有5次幾乎。</p>
</div>
<div class="game-start">開始游戲</div>
<div class="game-tools dis-none">
<span class="game-tools-la">當前輸入</span>
<div class="game-tools-input">
<input type="text" id="keyval" />
</div>
<span class="game-tools-count">
<strong>得分：</strong>
<em>0</em>
</span>
<input type="button" id="pause" value="暫停"/>
<input type="button" id="help" value="幫助" />
</div>
<div class="game-xue dis-none">
<span class="game-xue-la">生命</span>
<div class="game-xue-val">
<span>100</span>
</div>
<em></em>
</div>
<div id="game-box" class="dis-none"></div>
<div class="game-reset">
<p class="game-reset-ti">游戲結束</p>
<p class="game-reset-fen">最終得分<span>0</span></p>
<p class="game-reset-sum">擊中個數<span>0</span></p>
<p class="game-reset-btn"><input type="button" value="再玩一次" id="greset" /></p>
</div>
<div class="game-speed">加速</div>
<div class="game-connect">
<p class="game-connect-ti">恭喜</p>
<p class="game-connect-fen">您得分已達到<span>0</span></p>
<p class="game-connect-sum">擊中個數<span>0</span></p>
<p class="game-connect-btn"><input type="button" value="按Enter繼續" id="gjixu" /><input type="button" value="按Esc重新開始" id="gstart" /></p>
</div>
</div>
</body>
</html>
代碼下載：http://xiazai.jb51.net/201603/yuanma/paopaorisk(jb51.net).rar
如果大家覺得玩的還不過瘾還可以翻看此專題：javascript經典小游戲
以上就是本文的全部內容，希望對大家的學習有所幫助，在工作學習累了，大家可以玩一玩一些益智游戲，做到勞逸結合。
小編推薦
熱門推薦