hujung hadapan web
tutorial js
Melaksanakan permainan mini versi web Bubble Adventure berdasarkan kemahiran javascript_javascript
Melaksanakan permainan mini versi web Bubble Adventure berdasarkan kemahiran javascript_javascript
Contoh dalam artikel ini adalah untuk berkongsi dengan anda versi web permainan yang sangat menarik, yang agak serupa dengan Frog Crossing dari Permainan Menaip Kingsoft Untuk rujukan anda, kandungan khusus adalah seperti berikut
Rendering:
Idea pelaksanaan:
Permainan teka-teki, terutamanya berlatih kemahiran menaip, dibangunkan berdasarkan jq.
1. Masukkan teks yang sepadan dengan gelembung dalam kotak input dan klik enter untuk menyerahkan
2. Skor gesaan relatif kepada teks gelembung
3. Anda boleh menjeda operasi
4. Setiap kali gelembung mendarat, isipadu darah akan berkurangan dan permainan akan tamat apabila ia dikurangkan kepada 0
5. Kelajuan buih yang jatuh akan meningkat setiap kali
Kod khusus:
<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>
Muat turun kod: http://xiazai.jb51.net/201603/yuanma/paopaorisk(jb51.net).rar
Jika anda rasa permainan itu tidak mencukupi, anda juga boleh membaca topik ini: Permainan mini klasik Javascript
Di atas adalah keseluruhan kandungan artikel ini Saya harap ia akan membantu untuk belajar semua Jika anda penat bekerja dan belajar, anda boleh bermain beberapa permainan pendidikan untuk mencapai keseimbangan antara kerja dan rehat.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1670
14
1428
52
1329
25
1274
29
1256
24
Python vs JavaScript: Keluk Pembelajaran dan Kemudahan Penggunaan
Apr 16, 2025 am 12:12 AM
Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.
Dari C/C ke JavaScript: Bagaimana semuanya berfungsi
Apr 14, 2025 am 12:05 AM
Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.
JavaScript dan Web: Fungsi teras dan kes penggunaan
Apr 18, 2025 am 12:19 AM
Penggunaan utama JavaScript dalam pembangunan web termasuk interaksi klien, pengesahan bentuk dan komunikasi tak segerak. 1) kemas kini kandungan dinamik dan interaksi pengguna melalui operasi DOM; 2) pengesahan pelanggan dijalankan sebelum pengguna mengemukakan data untuk meningkatkan pengalaman pengguna; 3) Komunikasi yang tidak bersesuaian dengan pelayan dicapai melalui teknologi Ajax.
JavaScript in Action: Contoh dan projek dunia nyata
Apr 19, 2025 am 12:13 AM
Aplikasi JavaScript di dunia nyata termasuk pembangunan depan dan back-end. 1) Memaparkan aplikasi front-end dengan membina aplikasi senarai TODO, yang melibatkan operasi DOM dan pemprosesan acara. 2) Membina Restfulapi melalui Node.js dan menyatakan untuk menunjukkan aplikasi back-end.
Memahami Enjin JavaScript: Butiran Pelaksanaan
Apr 17, 2025 am 12:05 AM
Memahami bagaimana enjin JavaScript berfungsi secara dalaman adalah penting kepada pemaju kerana ia membantu menulis kod yang lebih cekap dan memahami kesesakan prestasi dan strategi pengoptimuman. 1) aliran kerja enjin termasuk tiga peringkat: parsing, penyusun dan pelaksanaan; 2) Semasa proses pelaksanaan, enjin akan melakukan pengoptimuman dinamik, seperti cache dalam talian dan kelas tersembunyi; 3) Amalan terbaik termasuk mengelakkan pembolehubah global, mengoptimumkan gelung, menggunakan const dan membiarkan, dan mengelakkan penggunaan penutupan yang berlebihan.
Python vs JavaScript: Komuniti, Perpustakaan, dan Sumber
Apr 15, 2025 am 12:16 AM
Python dan JavaScript mempunyai kelebihan dan kekurangan mereka sendiri dari segi komuniti, perpustakaan dan sumber. 1) Komuniti Python mesra dan sesuai untuk pemula, tetapi sumber pembangunan depan tidak kaya dengan JavaScript. 2) Python berkuasa dalam bidang sains data dan perpustakaan pembelajaran mesin, sementara JavaScript lebih baik dalam perpustakaan pembangunan dan kerangka pembangunan depan. 3) Kedua -duanya mempunyai sumber pembelajaran yang kaya, tetapi Python sesuai untuk memulakan dengan dokumen rasmi, sementara JavaScript lebih baik dengan MDNWebDocs. Pilihan harus berdasarkan keperluan projek dan kepentingan peribadi.
Python vs JavaScript: Persekitaran dan Alat Pembangunan
Apr 26, 2025 am 12:09 AM
Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.
Peranan C/C dalam JavaScript Jurubah dan Penyusun
Apr 20, 2025 am 12:01 AM
C dan C memainkan peranan penting dalam enjin JavaScript, terutamanya digunakan untuk melaksanakan jurubahasa dan penyusun JIT. 1) C digunakan untuk menghuraikan kod sumber JavaScript dan menghasilkan pokok sintaks abstrak. 2) C bertanggungjawab untuk menjana dan melaksanakan bytecode. 3) C melaksanakan pengkompil JIT, mengoptimumkan dan menyusun kod hot-spot semasa runtime, dan dengan ketara meningkatkan kecekapan pelaksanaan JavaScript.
