首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 23, 2016

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

效果图：

基于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.3water.com/201603/yuanma/paopaorisk(3water.com).rar

如果大家觉得玩的还不过瘾还可以翻看此专题：javascript经典小游戏

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

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

- Author -

透笔度

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery jcrop插件截图使用方法
Nov 20 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
常用DOM整理
Jun 16 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
微信小程序-小说阅读小程序实例（demo）
Jan 12 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
JS实现4位随机验证码
Oct 19 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 #Javascript
基于jquery编写的放大镜插件
Mar 23 #Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 #Javascript
JavaScript弹出对话框的三种方式
Mar 23 #Javascript
JS随机洗牌算法之数组随机排序
Mar 23 #Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 #Javascript
JavaScript学习笔记之数组去重
Mar 23 #Javascript
英国购物网站(954) 韩国购物网站(27) 加拿大购物网站(185) 美国购物网站(1542) 中国购物网站(172) 新加坡购物网站(41) 西班牙购物网站(115) 爱尔兰购物网站(30) 巴西购物网站(71) 香港购物网站(84)
You might like
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python中mechanize库的简单使用示例
2014/01/10 Python
python为tornado添加recaptcha验证码功能
2014/02/26 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python函数和模块的使用总结
2019/05/20 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
如何给Python代码进行加密
2020/01/10 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
美国折扣宠物药房：Total Pet Supply
2018/05/27 全球购物
什么是方法的重载
2013/06/24 面试题
小学门卫岗位职责
2013/12/17 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
《给予树》教学反思
2016/03/03 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android