基於javascript實現泡泡大冒險網頁版小遊戲_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

基於javascript實現泡泡大冒險網頁版小遊戲_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:08 PM

本文實例為大家分享了一個很有趣的網頁版遊戲，有點類似金山打字遊戲的青蛙過河，供大家參考，具體內容如下

效果圖：

實現思路：

益智類小遊戲，主要練習打字能力，基於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經典小遊戲

以上就是本文的全部內容，希望對大家的學習有所幫助，在工作學習累了，大家可以玩一玩一些益智遊戲，做到勞逸結合。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。