首页
所有分类
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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
jquery不常用方法汇总
Jul 26 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
js实现添加删除表格（两种方法）
Apr 27 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
es5 类与es6中class的区别小结
Nov 09 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
美国航天局(1) 大脑(1) 数据(1) 陨石(1) NASA(1) 酶(1) 火星(2) 嘧啶碱基(2) 富碳陨石(1) 毅力号(1)
You might like
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
javascript检测是否联网的实现代码
2014/09/28 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
2015/12/01 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
node中的session的具体使用
2018/09/14 Javascript
小程序转发探索示例
2019/02/19 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Python中的闭包实例详解
2014/08/29 Python
Python fileinput模块使用实例
2015/05/28 Python
总结Python编程中函数的使用要点
2016/03/20 Python
python 异常处理总结
2016/10/18 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
python opencv实现运动检测
2018/07/10 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python中eval与int的区别浅析
2019/08/11 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
详解Python 最短匹配模式
2020/07/29 Python
Python requests上传文件实现步骤
2020/09/15 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
美国玛丽莎收藏奢华时尚商店：Marissa Collections
2016/11/21 全球购物
耐克亚太地区：Nike APAC
2019/12/07 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
学生实习介绍信
2014/01/15 职场文书
微笑服务标语
2014/06/24 职场文书
单位消防安全责任书
2014/07/23 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python