首页
所有分类
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 相关文章推荐
javascript 函数调用的对象和方法
Jul 01 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）
Jul 27 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
Aug 23 Javascript
微信小程序获取用户信息及手机号（后端TP5.0）
Sep 12 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 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) blinker(1) Keras(3) turtle(1) 信号库(1) variable_scope(1) data(4) name_scope (1) 三子棋(2) 神经网络(7)
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
深入了解php4(2)--重访过去
2006/10/09 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
其实你可以少写点if else与switch（推荐）
2019/01/10 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python进阶教程之循环对象
2014/08/30 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Bed Bath & Beyond加拿大官网：购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
会计岗位职责范本
2014/03/07 职场文书
活动总结格式范文
2014/04/26 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
社区综治工作汇报
2014/10/27 职场文书
出差报告范文
2014/11/06 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS