使用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版Pongo設(shè)計(jì)思路及源代碼分享
1.游戲背景介紹(寫在前面的廢話)：
五月初的某天，看到某網(wǎng)推薦了這款游戲，Pongo，看著還不錯(cuò)的樣子就用ipad下下來(lái)試玩了下，玩了兩局感覺(jué)還錯(cuò)挺過(guò)癮的，因?yàn)槭鞘智奉愑螒蚵锎蠹叶摹?/P>
但是沒(méi)一會(huì)發(fā)現(xiàn)游戲在ipad似乎有些bug，玩一會(huì)就會(huì)卡住然后只能強(qiáng)退了，真是揪心，記錄還等著破呢。
怎么辦？玩游戲不如玩自己的游戲的念頭又邪惡的出現(xiàn)了，然后就把pad丟給了朋友虐心去，我默默回到電腦前開始動(dòng)手自己寫個(gè)不會(huì)卡的。
大概兩小時(shí)吧，寫出了基本框架，然后扔sinaapp里試了下效果基本能玩就洗洗睡了。
第二天醒來(lái)因?yàn)橹苣](méi)事就花了些時(shí)間設(shè)計(jì)了下界面，同時(shí)不幸自己測(cè)出了一些比較嚴(yán)重的bug，最后又花了些時(shí)間給改掉了。
最后游戲取名”Pongo+“(手機(jī)黨點(diǎn)我即玩)，電腦端暫時(shí)不支持，并順便在Github上上傳了源碼并去掉了提交成績(jī)模塊。
2.游戲試玩網(wǎng)址：
Pongo+(僅限移動(dòng)端)：http://mypongo.sinaapp.com/
github開源(歡迎fork讓游戲更好)：https://github.com/ChenReason/pongo/blob/gh-pages/index.html
3.游戲規(guī)則玩法：
點(diǎn)擊屏幕會(huì)改變擋板的運(yùn)動(dòng)方向，點(diǎn)擊一次擋板方向相應(yīng)改變一次，目的是為了能剛好擋住四處滾動(dòng)的小球不讓其跑出大圓外。時(shí)間越長(zhǎng)越好！最后可提交自己的成績(jī)進(jìn)行排名！
4.游戲所用技術(shù)：
HTML、CSS、JavaScript、Canvas、PHP
5.游戲設(shè)計(jì)思路：
a)運(yùn)用Canvas將游戲的主界面畫出，底部為一單色長(zhǎng)方形，上面覆蓋一個(gè)大圓，大圓上再繪制小圓及擋板，擋板中部還有一個(gè)大小為1px的超級(jí)小圓(作實(shí)現(xiàn)碰撞檢測(cè))。
b)小圓運(yùn)動(dòng)方向一共有8個(gè)分別為上、下、左、右、左上、左下、右上和右下。
c)擋板的運(yùn)動(dòng)方向只有兩個(gè)，順時(shí)針和逆時(shí)針。
d)碰撞檢測(cè)未涉及到引擎的使用，而是根據(jù)小圓與擋板中部的超級(jí)小圓進(jìn)行距離判斷，從而實(shí)現(xiàn)簡(jiǎn)陋的碰撞檢測(cè)。
e)小球碰撞后反彈的方向確定，利用常識(shí)列舉，共8種情況。
6.游戲?qū)崿F(xiàn)難點(diǎn)：
a)碰撞檢測(cè)。
b)定時(shí)器setInterval的清除時(shí)機(jī)以及是否清楚徹底。
c)定時(shí)器周期長(zhǎng)短與游戲體驗(yàn)的關(guān)系。
d)Android與IOS設(shè)備性能不同導(dǎo)致的游戲流暢度問(wèn)題。
7.游戲現(xiàn)有問(wèn)題：
a)由于碰撞檢測(cè)是比較兩圓的圓心距，且涉及到定時(shí)器的使用，因此由于定時(shí)器間隔極短導(dǎo)致在肉眼所見的一次碰撞背后其實(shí)已經(jīng)發(fā)生了數(shù)十次碰撞，由此會(huì)導(dǎo)致小球最后實(shí)際的反彈方向與現(xiàn)實(shí)的物理定理有所不同，經(jīng)過(guò)優(yōu)化，出現(xiàn)的概率已經(jīng)較低，但仍未能避免，因此有些玩家會(huì)發(fā)現(xiàn)小圓若沒(méi)有很準(zhǔn)地撞在擋板正中央則可能導(dǎo)致游戲失敗。
b)由于函數(shù)過(guò)于冗長(zhǎng)，運(yùn)行效率較低，再加上使用定時(shí)器，因此在Andorid與iOS或其他移動(dòng)端上的游戲體驗(yàn)不盡相同（整體來(lái)說(shuō)iOS由于Android）。
c)排行榜并未實(shí)現(xiàn)自動(dòng)實(shí)時(shí)更新。(數(shù)據(jù)庫(kù)還不會(huì)用)
8.游戲界面預(yù)覽：
(圖1為初版，圖2去掉了按鈕，圖3為最終版，圖4為排行榜)
圖1
圖2
圖3
9.游戲JavaScript部分源代碼：
var ifingame=0;
var maxgrade=0,grade=0;
var grade1,grade2;
var nickname;
var gamespeed=1.4;//小球速度
var linespeed=Math.PI/95; //跟蹤線速度
var crashdistancefaild=-7;//碰撞檢測(cè)參數(shù)
var crashdistancesucc=15
var fantanjuli=7;
var themaxgradeline=12.1;
function getCookie1(nickname)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(nickname + "=")
if (c_start!=-1)
{
c_start=c_start + nickname.length+1;
c_end=document.cookie.indexOf(",",c_start);
if (c_end==-1)
c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return ""
}
function getCookie2(mymaxgrade)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(mymaxgrade + "=")
if (c_start!=-1)
{
c_start=c_start + mymaxgrade.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1)
c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return ""
}
function setCookie(nickname,value,mymaxgrade,maxgrade,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=nickname+ "=" +escape(value)+"," + mymaxgrade + "=" + escape(maxgrade) + ((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
}
function checkCookie()
{
nickname=getCookie1('nickname');
maxgrade=parseInt(getCookie2('mymaxgrade'));
if(isNaN(maxgrade)==true)
{
maxgrade=0;
}
if (nickname!=null && nickname!="")
{
alert('歡迎'+nickname+'回來(lái)!'+'\n'+"如果喜歡請(qǐng)分享一下哈~");
}
else
{
nickname=prompt('請(qǐng)輸入你的昵稱:（名字太長(zhǎng)上榜可是會(huì)顯示不完整的哦）',"")
if (nickname!=null && nickname!="")
{
var maxgradestring=maxgrade.toString();
setCookie('nickname',nickname,'mymaxgrade',maxgradestring,365);
}
}
}
var objpane=document.getElementById("pane");
var ctxpane=objpane.getContext("2d");
ctxpane.translate(150,150);//必備 畫布中心點(diǎn)平移
function sendmail()
{
if(grade2>themaxgradeline)
var max_grade=grade2;
window.location.href='index.php?max_grade='+max_grade+'&nick_name='+nickname;
/* {
<?php
$grade=$_GET['max_grade'];
$nickname=$_GET['nick_name'];
$mail = new SaeMail();
$ret = $mail->quickSend( 'reasonpongo@163.com' , $grade , $nickname ,'reasonpongo@163.com' , 'mypongo' );
$mail->clean();
?>
}*/
alert(nickname+"你的成績(jī)?yōu)椋?+grade2+"提交成功~");
}
var gamedirection={
shang : 1,
xia : 5,
zuo : 7,
you : 3,
zuoshang: 8,
zuoxia : 6,
youshang: 2,
youxia : 4,
clock : 0,
anticlock: 9,
};//方向
var canvas={
width : 300,
height: 300,
};//畫布
var bigcircle = {//大圓參數(shù)
x : 0, //圓心的x軸坐標(biāo)值
y : 0, //圓心的y軸坐標(biāo)值
r : 150, //圓的半徑
c : 'rgb(255,255,255)',
};//大圓
var smallcircle = {//小圓參數(shù)
x : 0, //圓心的x軸坐標(biāo)值
y : 0, //圓心的y軸坐標(biāo)值
r : 12, //圓的半徑
c : 'rgb(204,105,106)',
direction : gamedirection.xia,
};//小圓
var line = {//擋板線的參數(shù)
x : 0, //圓心的x軸坐標(biāo)值
y : 0, //圓心的y軸坐標(biāo)值
r : 150 , //圓弧的半徑
start:(Math.PI/2-Math.PI/16),
end : (Math.PI/2+Math.PI/16),
c : 'rgb(55,55,55)',
direction: gamedirection.anticlock,
};//跟蹤線
var dot = {//跟蹤點(diǎn)參數(shù)
x : (bigcircle.r*Math.cos(line.start+Math.PI/16)),//以大圓為原點(diǎn)
y : (bigcircle.r*Math.sin(line.start+Math.PI/16)),
r : 1,
}//跟蹤點(diǎn)
function changelinedirection()
{
if(line.direction==gamedirection.clock)
{
line.direction=gamedirection.anticlock;
}
else
{
line.direction=gamedirection.clock;
}
}
function getdistance(){
var distance=Math.sqrt((smallcircle.x)*(smallcircle.x )+(smallcircle.y )*(smallcircle.y ));
return distance;
}//返回小球與大圓中心距離平方 getdistance()
function ifgameover(){//判斷是否出界
if((getdistance() - bigcircle.r)>5)
return true;
else
return false;
} //判斷游戲是否結(jié)束 ifgameover()
function ifcrash(){ //碰撞檢測(cè)
var dx = dot.x-smallcircle.x;
var dy = dot.y-smallcircle.y;
var dd=Math.sqrt(dx*dx+dy*dy);
if(dd< crashdistancesucc)
return true;
else
return false;
}//碰撞檢測(cè) ifcrash()
function randomback()
{
var x=Math.floor(Math.random()*3);
switch (smallcircle.direction){
case gamedirection.shang:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.xia;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuoxia;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.youxia;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.xia:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.shang;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuoshang;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.youshang;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.zuo:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.you;
smallcircle.x=smallcircle.x+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.youshang;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.youxia;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.you:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.zuo;
smallcircle.x=smallcircle.x-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuoxia;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.zuoshang;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.zuoshang:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.youxia;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.xia;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.you;
smallcircle.x=smallcircle.x+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.zuoxia:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.youshang;
smallcircle.x=smallcircle.x+fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.shang;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.you;
smallcircle.x=smallcircle.x+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.youshang:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.zuoxia;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y+fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuo;
smallcircle.x=smallcircle.x-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.xia;
smallcircle.y=smallcircle.y+fantanjuli;
break;
default:
break;
} break;
}
case gamedirection.youxia:
{
switch (x)
{
case 0:
smallcircle.direction=gamedirection.zuoshang;
smallcircle.x=smallcircle.x-fantanjuli;
smallcircle.y=smallcircle.y-fantanjuli;
break;
case 1:
smallcircle.direction=gamedirection.zuo;
smallcircle.x=smallcircle.x-fantanjuli;
break;
case 2:
smallcircle.direction=gamedirection.shang;
smallcircle.y=smallcircle.y-fantanjuli;
break;
default:
break;
} break;
}
default:
{
break;
}
}
}//小球隨機(jī)反向 randomback()
function smallcircledirection()
{
switch (smallcircle.direction){ //根據(jù)小球方向做移動(dòng)
case gamedirection.shang:
{
smallcircle.y=smallcircle.y-gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.xia:
{
smallcircle.y=smallcircle.y+gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.zuo:
{
smallcircle.x=smallcircle.x-gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.you:
{
smallcircle.x=smallcircle.x+gamespeed;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.zuoshang:
{
smallcircle.x=smallcircle.x-gamespeed*0.8;
smallcircle.y=smallcircle.y-gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.zuoxia:
{
smallcircle.x=smallcircle.x-gamespeed*0.8;
smallcircle.y=smallcircle.y+gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.youshang:
{
smallcircle.x=smallcircle.x+gamespeed*0.8;
smallcircle.y=smallcircle.y-gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
case gamedirection.youxia:
{
smallcircle.x=smallcircle.x+gamespeed*0.8;
smallcircle.y=smallcircle.y+gamespeed*0.8;
grade++;
if(grade>maxgrade)
{
maxgrade=grade;
newrecoder();
}
addone();
break;
}
default:
{
break;
}
}
}//小球移動(dòng) smallcircledirection()
/*畫出底部圓*/
ctxpane.beginPath(); //大圓
ctxpane.arc(bigcircle.x,bigcircle.y,bigcircle.r,0,Math.PI*2,true);
ctxpane.fillStyle = bigcircle.c;
ctxpane.fill();
ctxpane.closePath();
/*畫出底部追蹤線條*/
ctxpane.beginPath();
ctxpane.lineWidth=6;
ctxpane.strokeStyle = line.c;
ctxpane.arc(line.x, line.y, line.r, line.start, line.end,false);
ctxpane.stroke();
ctxpane.closePath();
function tapme()//tapme
{
ctxpane.beginPath();
ctxpane.strokeStyle="rgb(255,222,195)";
ctxpane.font = "80px Papyrus";
ctxpane.strokeText('TAP',-95,30);
ctxpane.fillStyle="rgb(255,205,105)";
ctxpane.font = "35px Papyrus";
ctxpane.fillText('me',70,30);
ctxpane.closePath();
}
function newrecoder()
{
ctxpane.beginPath();
ctxpane.fillStyle="rgb(255,0,0)";
ctxpane.font = "18px Papyrus";
ctxpane.fillText("New!",58,80);
ctxpane.closePath();
}
function addone()
{
grade1=(grade/150).toFixed(1);
grade2=(maxgrade/150).toFixed(1);
var say1="now";
var say2="best"
ctxpane.beginPath();
ctxpane.strokeStyle="rgb(250,222,185)";
ctxpane.font = "60px Papyrus";
ctxpane.strokeText(grade1,-45,-60);
ctxpane.strokeText(grade2,-45,100);
ctxpane.fillStyle="rgb(255,0,100)";
ctxpane.font = "15px Papyrus";
ctxpane.fillText(say1,58,-60);
ctxpane.fillStyle="rgb(255,0,100)";
ctxpane.font = "15px Papyrus";
ctxpane.fillText(say2,58,100);
ctxpane.closePath();
}
function movetest(){
if(ifgameover())
{
ifingame=0;
if(maxgrade>parseInt(getCookie2('mymaxgrade')))
{
setCookie('nickname',nickname,'mymaxgrade',maxgrade.toString(),365);
}
clearInterval(timer);
tapme();
}
else
{
if(ifcrash())
{
randomback();
}
ctxpane.clearRect(-150,-150,300,300); //清屏
ctxpane.beginPath(); //大圓
ctxpane.arc(bigcircle.x,bigcircle.y,bigcircle.r,0,Math.PI*2,true);
ctxpane.fillStyle = bigcircle.c;
ctxpane.fill();
ctxpane.closePath();
if(line.direction==gamedirection.clock) //跟蹤線順時(shí)針
{
line.start=line.start + linespeed;
line.end=line.end +linespeed;
ctxpane.beginPath();
ctxpane.lineWidth=4;
ctxpane.strokeStyle = line.c;
ctxpane.arc(line.x, line.y, line.r, line.start, line.end,false);
ctxpane.stroke();
ctxpane.closePath();
}
if(line.direction==gamedirection.anticlock) //跟蹤逆順時(shí)針
{
line.start=line.start - linespeed;
line.end=line.end -linespeed;
ctxpane.beginPath();
ctxpane.lineWidth=4;
ctxpane.strokeStyle = line.c;
ctxpane.arc(line.x, line.y, line.r, line.start, line.end,false);
ctxpane.stroke();
ctxpane.closePath();
}
dot.x=bigcircle.r*Math.cos(line.start+Math.PI/32) //跟蹤點(diǎn)
dot.y=bigcircle.r*Math.sin(line.start+Math.PI/32)
ctxpane.beginPath();//線上跟蹤點(diǎn)
ctxpane.arc(dot.x,dot.y,dot.r,0,Math.PI*2,true);
ctxpane.fillStyle = smallcircle.c;
ctxpane.fill();
ctxpane.closePath();
smallcircledirection();//小圓
ctxpane.save();
ctxpane.beginPath();
ctxpane.arc(smallcircle.x,smallcircle.y,smallcircle.r,0,Math.PI*2,true);
ctxpane.fillStyle = smallcircle.c;
ctxpane.fill();
ctxpane.closePath();
ctxpane.restore();
}
}//主函數(shù)
///////////////////////////////////////////
tapme();
var timer;
function startgame(){//開始游戲
if(ifingame==0)
{
ifingame=1;
grade=0;
var xx=Math.floor(Math.random()*8);
/* switch(xx)
{
case 0:
smallcircle.direction=gamedirection.shang;
break;
case 1:
smallcircle.direction=gamedirection.xia;
break;
case 2:
smallcircle.direction=gamedirection.zuo;
break;
case 3:
smallcircle.direction=gamedirection.you;
break;
case 4:
smallcircle.direction=gamedirection.zuoshang;
break;
case 5:
smallcircle.direction=gamedirection.zuoxia;
break;
case 6:
smallcircle.direction=gamedirection.youshang;
break;
case 7:
smallcircle.direction=gamedirection.youxia;
break;
default:
break;
}*/
smallcircle.direction=gamedirection.xia;
smallcircle.x=smallcircle.y=0;
line.start=Math.PI/2-Math.PI/26;
line.end=Math.PI/2+Math.PI/26;
line.direction=gamedirection.anticlock;
clearInterval(timer);
timer=setInterval(movetest,10);
}
}//開始游戲 startgame()
function opentop()
{
window.location="http://pongotop.sinaapp.com";
}
10.寫在最后
這純屬又是一個(gè)自?shī)首詷?lè)，寫完后的第三天因?yàn)殚_始忙著投簡(jiǎn)歷找實(shí)習(xí)就沒(méi)空再管，扔到朋友圈讓朋友玩去了。這一個(gè)月過(guò)去了再重新看這游戲，感覺(jué)它不該就這樣死掉，本人沒(méi)什么技術(shù)，做得很拙略，因此發(fā)出這篇文字希望能幫到一些對(duì)pongo感興趣的朋友，再者就是希望如果有這方面的高手看到了能夠給予賜教，一切疑惑和賜教都?xì)g迎給我留言，謝謝！
- javascript實(shí)現(xiàn)2048游戲示例
- Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
- javascript和HTML5利用canvas構(gòu)建猜牌游戲?qū)崿F(xiàn)算法
- JavaScript打字小游戲代碼
- javascript實(shí)現(xiàn)的網(wǎng)頁(yè)標(biāo)題變換效果(網(wǎng)頁(yè)游戲廣告常用)
- JavaScript游戲之是男人就下100層代碼打包
- JavaScript 小型打飛機(jī)游戲?qū)崿F(xiàn)原理說(shuō)明
- JavaScript 打地鼠游戲代碼說(shuō)明
相關(guān)文章
平時(shí)JavaScript逆向需要補(bǔ)環(huán)境或者補(bǔ)一些函數(shù),下面這篇文章主要給大家介紹了關(guān)于JS逆向之瀏覽器補(bǔ)環(huán)境的相關(guān)資料,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
js實(shí)現(xiàn)最短的XML格式化工具實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)最短的XML格式化工具,實(shí)例分析了基于jquery-latest.js實(shí)現(xiàn)XML代碼格式化的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法
假設(shè)當(dāng)前顯示的是1，往左滑動(dòng)一個(gè)遞減1，往右滑動(dòng)一個(gè)遞增1。下面通過(guò)實(shí)例代碼給大家講解swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2018-01-01
js復(fù)制網(wǎng)頁(yè)內(nèi)容并兼容各主流瀏覽器的代碼
js 復(fù)制網(wǎng)頁(yè)內(nèi)容的方法代碼有很多不過(guò)要兼容各瀏覽器就不多了，下面有個(gè)不錯(cuò)的方法，大家可以嘗試操作下2013-12-12
這篇文章主要介紹了js仿百度貼吧驗(yàn)證碼特效實(shí)例代碼，有需要的朋友可以參考一下2014-01-01
JS中confirm,alert,prompt函數(shù)使用區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別分析，需要的朋友可以參考下。2010-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
在寫程序過(guò)程中，經(jīng)常會(huì)遇到去除數(shù)組中重復(fù)元素的需求。要實(shí)現(xiàn)這個(gè)功能其實(shí)并不難2011-01-01
ES6 Promise對(duì)象概念及用法實(shí)例詳解
這篇文章主要介紹了ES6 Promise對(duì)象概念及用法,結(jié)合實(shí)例形式詳細(xì)分析了ES6中Promise對(duì)象的概念、原理、創(chuàng)建、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例
二維碼分享功能大多是由后端實(shí)現(xiàn)的,對(duì)服務(wù)器的負(fù)載較重,這里有一個(gè)前端實(shí)現(xiàn)的版本，本文介紹了JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例，有需要的可以了解一下。2016-10-10