基于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经典小游戏
以上就是本文的全部内容，希望对大家的学习有所帮助，在工作学习累了，大家可以玩一玩一些益智游戏，做到劳逸结合。
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前
By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
在JavaScript中替换字符串字符
Mar 11, 2025 am 12:07 AM
JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
立即提高jQuery性能的10种方法
Mar 11, 2025 am 12:15 AM
本文概述了十个简单的步骤，可以显着提高脚本的性能。 这些技术很简单，适用于所有技能水平。 保持更新：使用bundler（例如vite）的npm等软件包经理来确保
使用Passport与semelize和MySQL
Mar 11, 2025 am 11:04 AM
续集是一个基于承诺的node.js orm。它可以与PostgreSQL，MySQL，MariadB，Sqlite和MSSQL一起使用。在本教程中，我们将为Web应用程序的用户实施身份验证。我们将使用Passport，Passport，Midderw的流行身份验证
如何构建简单的jQuery滑块
Mar 11, 2025 am 12:19 AM
本文将引导您使用jQuery库创建一个简单的图片轮播。我们将使用bxSlider库，它基于jQuery构建，并提供许多配置选项来设置轮播。 如今，图片轮播已成为网站必备功能——一图胜千言！ 决定使用图片轮播后，下一个问题是如何创建它。首先，您需要收集高质量、高分辨率的图片。 接下来，您需要使用HTML和一些JavaScript代码来创建图片轮播。网络上有很多库可以帮助您以不同的方式创建轮播。我们将使用开源的bxSlider库。 bxSlider库支持响应式设计，因此使用此库构建的轮播可以适应任何
