整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
源：《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》
模式和重構(gòu)之間有著一種與生俱來(lái)的關(guān)系。從某種角度來(lái)看，設(shè)計(jì)模式的目的就是為許多重構(gòu)行為提供目標(biāo)。
在JavaScript開(kāi)發(fā)中，我們大部分時(shí)間都在與函數(shù)打交道，所以我們希望這些函數(shù)有著良好的命名，函數(shù)體內(nèi)包含的邏輯清晰明了。如果一個(gè)函數(shù)過(guò)長(zhǎng)，不得不加上若干注釋才能讓這個(gè)函數(shù)顯得易讀一些，那這些函數(shù)就很有必要進(jìn)行重構(gòu)。
如果在函數(shù)中有一段代碼可以被獨(dú)立出來(lái)，那我們最好把這些代碼放進(jìn)另外一個(gè)獨(dú)立的函數(shù)中。這是一種很常見(jiàn)的優(yōu)化工作，這樣做的好處主要有以下幾點(diǎn)。
比如在一個(gè)負(fù)責(zé)取得用戶信息的函數(shù)里面，我們還需要打印跟用戶信息有關(guān)的log，那么打印log的語(yǔ)句就可以被封裝在一個(gè)獨(dú)立的函數(shù)里：
var getUserInfo = function(){
ajax( 'http:// xxx.com/userInfo', function( data ){
console.log( 'userId: ' + data.userId );
console.log( 'userName: ' + data.userName );
console.log( 'nickName: ' + data.nickName );
});
};
改成：
var getUserInfo = function(){
ajax( 'http:// xxx.com/userInfo', function( data ){
printDetails( data );
});
};
var printDetails = function( data ){
console.log( 'userId: ' + data.userId );
console.log( 'userName: ' + data.userName );
console.log( 'nickName: ' + data.nickName );
};
如果一個(gè)函數(shù)體內(nèi)有一些條件分支語(yǔ)句，而這些條件分支語(yǔ)句內(nèi)部散布了一些重復(fù)的代碼，那么就有必要進(jìn)行合并去重工作。假如我們有一個(gè)分頁(yè)函數(shù)paging，該函數(shù)接收一個(gè)參數(shù)currPage，currPage表示即將跳轉(zhuǎn)的頁(yè)碼。在跳轉(zhuǎn)之前，為防止currPage傳入過(guò)小或者過(guò)大的數(shù)字，我們要手動(dòng)對(duì)它的值進(jìn)行修正，詳見(jiàn)如下偽代碼：
var paging = function( currPage ){
if ( currPage <= 0 ){
currPage = 0;
jump( currPage ); // 跳轉(zhuǎn)
}else if ( currPage >= totalPage ){
currPage = totalPage;
jump( currPage ); // 跳轉(zhuǎn)
}else{
jump( currPage ); // 跳轉(zhuǎn)
}
};
可以看到，負(fù)責(zé)跳轉(zhuǎn)的代碼jump( currPage )在每個(gè)條件分支內(nèi)都出現(xiàn)了，所以完全可以把這句代碼獨(dú)立出來(lái)：
var paging = function( currPage ){
if ( currPage <= 0 ){
currPage = 0;
}else if ( currPage >= totalPage ){
currPage = totalPage;
}
jump( currPage ); // 把jump函數(shù)獨(dú)立出來(lái)
};
在程序設(shè)計(jì)中，復(fù)雜的條件分支語(yǔ)句是導(dǎo)致程序難以閱讀和理解的重要原因，而且容易導(dǎo)致一個(gè)龐大的函數(shù)。假設(shè)現(xiàn)在有一個(gè)需求是編寫(xiě)一個(gè)計(jì)算商品價(jià)格的getPrice函數(shù)，商品的計(jì)算只有一個(gè)規(guī)則：如果當(dāng)前正處于夏季，那么全部商品將以8折出售。代碼如下：
var getPrice = function( price ){
var date = new Date();
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
return price * 0.8;
}
return price;
};
觀察這句代碼：
if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){
// ...
}
這句代碼要表達(dá)的意思很簡(jiǎn)單，就是判斷當(dāng)前是否正處于夏天（7~10月）。盡管這句代碼很短小，但代碼表達(dá)的意圖和代碼自身還存在一些距離，閱讀代碼的人必須要多花一些精力才能明白它傳達(dá)的意圖。其實(shí)可以把這句代碼提煉成一個(gè)單獨(dú)的函數(shù)，既能更準(zhǔn)確地表達(dá)代碼的意思，函數(shù)名本身又能起到注釋的作用。代碼如下：
var isSummer = function(){
var date = new Date();
return date.getMonth() >= 6 && date.getMonth() <= 9;
};
var getPrice = function( price ){
if ( isSummer() ){ // 夏天
return price * 0.8;
}
return price;
};
在函數(shù)體內(nèi)，如果有些代碼實(shí)際上負(fù)責(zé)的是一些重復(fù)性的工作，那么合理利用循環(huán)不僅可以完成同樣的功能，還可以使代碼量更少。下面有一段創(chuàng)建XHR對(duì)象的代碼，為了簡(jiǎn)化示例，我們只考慮版本9以下的IE瀏覽器，代碼如下：
var createXHR = function(){
var xhr;
try{
xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
}catch(e){
try{
xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
}catch(e){
xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
}
}
return xhr;
};
var xhr = createXHR();
下面我們靈活地運(yùn)用循環(huán)，可以得到跟上面代碼一樣的效果：
var createXHR = function(){
var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
for ( var i = 0, version; version = versions[ i++ ]; ){
try{
return new ActiveXObject( version );
}catch(e){
}
}
};
var xhr = createXHR();
許多程序員都有這樣一種觀念：“每個(gè)函數(shù)只能有一個(gè)入口和一個(gè)出口?！爆F(xiàn)代編程語(yǔ)言都會(huì)限制函數(shù)只有一個(gè)入口。但關(guān)于“函數(shù)只有一個(gè)出口”，往往會(huì)有一些不同的看法。
下面這段偽代碼是遵守“函數(shù)只有一個(gè)出口的”的典型代碼：
var del = function( obj ){
var ret;
if ( !obj.isReadOnly ){ // 不為只讀的才能被刪除
if ( obj.isFolder ){ // 如果是文件夾
ret = deleteFolder( obj );
}else if ( obj.isFile ){ // 如果是文件
ret = deleteFile( obj );
}
}
return ret;
};
嵌套的條件分支語(yǔ)句絕對(duì)是代碼維護(hù)者的噩夢(mèng)，對(duì)于閱讀代碼的人來(lái)說(shuō)，嵌套的if、else語(yǔ)句相比平鋪的if、else，在閱讀和理解上更加困難，有時(shí)候一個(gè)外層if分支的左括號(hào)和右括號(hào)之間相隔500米之遠(yuǎn)。用《重構(gòu)》里的話說(shuō)，嵌套的條件分支往往是由一些深信“每個(gè)函數(shù)只能有一個(gè)出口的”程序員寫(xiě)出的。但實(shí)際上，如果對(duì)函數(shù)的剩余部分不感興趣，那就應(yīng)該立即退出。引導(dǎo)閱讀者去看一些沒(méi)有用的else片段，只會(huì)妨礙他們對(duì)程序的理解。
于是我們可以挑選一些條件分支，在進(jìn)入這些條件分支之后，就立即讓這個(gè)函數(shù)退出。要做到這一點(diǎn)，有一個(gè)常見(jiàn)的技巧，即在面對(duì)一個(gè)嵌套的if分支時(shí)，我們可以把外層if表達(dá)式進(jìn)行反轉(zhuǎn)。重構(gòu)后的del函數(shù)如下：
var del = function( obj ){
if ( obj.isReadOnly ){ // 反轉(zhuǎn)if表達(dá)式
return;
}
if ( obj.isFolder ){
return deleteFolder( obj );
}
if ( obj.isFile ){
return deleteFile( obj );
}
};
有時(shí)候一個(gè)函數(shù)有可能接收多個(gè)參數(shù)，而參數(shù)的數(shù)量越多，函數(shù)就越難理解和使用。使用該函數(shù)的人首先得搞明白全部參數(shù)的含義，在使用的時(shí)候，還要小心翼翼，以免少傳了某個(gè)參數(shù)或者把兩個(gè)參數(shù)搞反了位置。如果我們想在第3個(gè)參數(shù)和第4個(gè)參數(shù)之中增加一個(gè)新的參數(shù)，就會(huì)涉及許多代碼的修改，代碼如下：
var setUserInfo = function( id, name, address, sex, mobile, qq ){
console.log( 'id= ' + id );
console.log( 'name= ' +name );
console.log( 'address= ' + address );
console.log( 'sex= ' + sex );
console.log( 'mobile= ' + mobile );
console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'sven', 'shenzhen', 'male', '137********', 377876679 )
;
這時(shí)我們可以把參數(shù)都放入一個(gè)對(duì)象內(nèi)，然后把該對(duì)象傳入setUserInfo 函數(shù)，setUserInfo函數(shù)需要的數(shù)據(jù)可以自行從該對(duì)象里獲取?，F(xiàn)在不用再關(guān)心參數(shù)的數(shù)量和順序，只要保證參數(shù)對(duì)應(yīng)的key值不變就可以了：
var setUserInfo = function( obj ){
console.log( 'id= ' + obj.id );
console.log( 'name= ' + obj.name );
console.log( 'address= ' + obj.address );
console.log( 'sex= ' + obj.sex );
console.log( 'mobile= ' + obj.mobile );
console.log( 'qq= ' + obj.qq );
};
setUserInfo({
id: 1314,
name: 'sven',
address: 'shenzhen',
sex: 'male',
mobile: '137********',
qq: 377876679
});
如果調(diào)用一個(gè)函數(shù)時(shí)需要傳入多個(gè)參數(shù)，那這個(gè)函數(shù)是讓人望而生畏的，我們必須搞清楚這些參數(shù)代表的含義，必須小心翼翼地把它們按照順序傳入該函數(shù)。而如果一個(gè)函數(shù)不需要傳入任何參數(shù)就可以使用，這種函數(shù)是深受人們喜愛(ài)的。在實(shí)際開(kāi)發(fā)中，向函數(shù)傳遞參數(shù)不可避免，但我們應(yīng)該盡量減少函數(shù)接收的參數(shù)數(shù)量。下面舉個(gè)非常簡(jiǎn)單的示例。 有一個(gè)畫(huà)圖函數(shù)draw，它現(xiàn)在只能繪制正方形，接收了3個(gè)參數(shù)，分別是圖形的width、heigth以及square：
var draw = function( width, height, square ){};
但實(shí)際上正方形的面積是可以通過(guò)width和height計(jì)算出來(lái)的，于是我們可以把參數(shù)square從draw函數(shù)中去掉：
var draw = function( width, height ){
var square = width * height;
};
假設(shè)以后這個(gè)draw函數(shù)開(kāi)始支持繪制圓形，我們需要把參數(shù)width和height換成半徑radius， 但圖形的面積square始終不應(yīng)該由客戶傳入，而是應(yīng)該在draw函數(shù)內(nèi)部，由傳入的參數(shù)加上一定的規(guī)則計(jì)算得來(lái)。此時(shí)，我們可以使用策略模式，讓draw函數(shù)成為一個(gè)支持繪制多種圖形的函數(shù)。
有一些程序員喜歡大規(guī)模地使用三目運(yùn)算符，來(lái)代替?zhèn)鹘y(tǒng)的if、else。理由是三目運(yùn)算符性能高，代碼量少。不過(guò)，這兩個(gè)理由其實(shí)都很難站得住腳。
即使我們假設(shè)三目運(yùn)算符的效率真的比if、else高，這點(diǎn)差距也是完全可以忽略不計(jì)的。在實(shí)際的開(kāi)發(fā)中，即使把一段代碼循環(huán)一百萬(wàn)次，使用三目運(yùn)算符和使用if、else的時(shí)間開(kāi)銷(xiāo)處在同一個(gè)級(jí)別里。
同樣，相比損失的代碼可讀性和可維護(hù)性，三目運(yùn)算符節(jié)省的代碼量也可以忽略不計(jì)。讓JS文件加載更快的辦法有很多種，如壓縮、緩存、使用CDN和分域名等。把注意力只放在使用三目運(yùn)算符節(jié)省的字符數(shù)量上，無(wú)異于一個(gè)300斤重的人把超重的原因歸罪于頭皮屑。
如果條件分支邏輯簡(jiǎn)單且清晰，這無(wú)礙我們使用三目運(yùn)算符：
var global = typeof window !== "undefined" ? window : this;
但如果條件分支邏輯非常復(fù)雜，如下段代碼所示，那我們最好的選擇還是按部就班地編寫(xiě)if、else。if、else語(yǔ)句的好處很多，一是閱讀相對(duì)容易，二是修改的時(shí)候比修改三目運(yùn)算符周?chē)拇a更加方便：
if ( !aup || !bup ) {
return a === doc ? -1 :
b === doc ? 1 :
aup ? -1 :
bup ? 1 :
sortInput ?
( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
0;
}
經(jīng)常使用jQuery的程序員相當(dāng)習(xí)慣鏈?zhǔn)秸{(diào)用方法，在JavaScript中，可以很容易地實(shí)現(xiàn)方法的鏈?zhǔn)秸{(diào)用，即讓方法調(diào)用結(jié)束后返回對(duì)象自身，如下代碼所示：
var User = function(){
this.id = null;
this.name = null;
};
User.prototype.setId = function( id ){
this.id = id;
return this;
};
User.prototype.setName = function( name ){
this.name = name;
return this;
};
console.log( new User().setId( 1314 ).setName( 'sven' ) );
或者：
var User = {
id: null,
name: null,
setId: function( id ){
this.id = id;
return this;
},
setName: function( name ){
this.name = name;
return this;
}
};
console.log( User.setId( 1314 ).setName( 'sven' ) );
使用鏈?zhǔn)秸{(diào)用的方式并不會(huì)造成太多閱讀上的困難，也確實(shí)能省下一些字符和中間變量，但節(jié)省下來(lái)的字符數(shù)量同樣是微不足道的。鏈?zhǔn)秸{(diào)用帶來(lái)的壞處就是在調(diào)試的時(shí)候非常不方便，如果我們知道一條鏈中有錯(cuò)誤出現(xiàn)，必須得先把這條鏈拆開(kāi)才能加上一些調(diào)試log或者增加斷點(diǎn)，這樣才能定位錯(cuò)誤出現(xiàn)的地方。
如果該鏈條的結(jié)構(gòu)相對(duì)穩(wěn)定，后期不易發(fā)生修改，那么使用鏈?zhǔn)秸{(diào)用無(wú)可厚非。但如果該鏈條很容易發(fā)生變化，導(dǎo)致調(diào)試和維護(hù)困難，那么還是建議使用普通調(diào)用的形式：
var user = new User();
user.setId( 1314 );
user.setName( 'sven' );
在HTML5版“街頭霸王”的第一版代碼中，負(fù)責(zé)創(chuàng)建游戲人物的Spirit 類(lèi)非常龐大，不僅要負(fù)責(zé)創(chuàng)建人物精靈，還包括了人物的攻擊、防御等動(dòng)作方法，代碼如下：
var Spirit = function( name ){
this.name = name;
};
Spirit.prototype.attack = function( type ){ // 攻擊
if ( type === 'waveBoxing' ){
console.log( this.name + ': 使用波動(dòng)拳' );
}else if( type === 'whirlKick' ){
console.log( this.name + ': 使用旋風(fēng)腿' );
}
};
var spirit = new Spirit( 'RYU' );
spirit.attack( 'waveBoxing' ); // 輸出：RYU: 使用波動(dòng)拳
spirit.attack( 'whirlKick' ); // 輸出：RYU: 使用旋風(fēng)腿
后來(lái)發(fā)現(xiàn)，Spirit.prototype.attack這個(gè)方法實(shí)現(xiàn)是太龐大了，實(shí)際上它完全有必要作為一個(gè)單獨(dú)的類(lèi)存在。面向?qū)ο笤O(shè)計(jì)鼓勵(lì)將行為分布在合理數(shù)量的更小對(duì)象之中：
var Attack = function( spirit ){
this.spirit = spirit;
};
Attack.prototype.start = function( type ){
return this.list[ type ].call( this );
};
Attack.prototype.list = {
waveBoxing: function(){
console.log( this.spirit.name + ': 使用波動(dòng)拳' );
},
whirlKick: function(){
console.log( this.spirit.name + ': 使用旋風(fēng)腿' );
}
};
現(xiàn)在的Spirit類(lèi)變得精簡(jiǎn)了很多，不再包括各種各樣的攻擊方法，而是把攻擊動(dòng)作委托給Attack類(lèi)的對(duì)象來(lái)執(zhí)行，這段代碼也是策略模式的運(yùn)用之一：
var Spirit = function( name ){
this.name = name;
this.attackObj = new Attack( this );
};
Spirit.prototype.attack = function( type ){ // 攻擊
this.attackObj.start( type );
};
var spirit = new Spirit( 'RYU' );
spirit.attack( 'waveBoxing' ); // 輸出：RYU: 使用波動(dòng)拳
spirit.attack( 'whirlKick' ); // 輸出：RYU: 使用旋風(fēng)
假設(shè)在函數(shù)體內(nèi)有一個(gè)兩重循環(huán)語(yǔ)句，我們需要在內(nèi)層循環(huán)中判斷，當(dāng)達(dá)到某個(gè)臨界條件時(shí)退出外層的循環(huán)。我們大多數(shù)時(shí)候會(huì)引入一個(gè)控制標(biāo)記變量：
var func = function(){
var flag = false;
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
flag = true;
break;
}
}
if ( flag === true ){
break;
}
}
};
第二種做法是設(shè)置循環(huán)標(biāo)記：
var func = function(){
outerloop:
for ( var i = 0; i < 10; i++ ){
innerloop:
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
break outerloop;
}
}
}
};
這兩種做法無(wú)疑都讓人頭暈?zāi)垦＃?jiǎn)單的做法是在需要中止循環(huán)的時(shí)候直接退出整個(gè)方法：
var func = function(){
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
return;
}
}
}
};
當(dāng)然用return直接退出方法會(huì)帶來(lái)一個(gè)問(wèn)題，如果在循環(huán)之后還有一些將被執(zhí)行的代碼呢？如果我們提前退出了整個(gè)方法，這些代碼就得不到被執(zhí)行的機(jī)會(huì)：
var func = function(){
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
return;
}
}
}
console.log( i ); // 這句代碼沒(méi)有機(jī)會(huì)被執(zhí)行
};
為了解決這個(gè)問(wèn)題，我們可以把循環(huán)后面的代碼放到return后面，如果代碼比較多，就應(yīng)該把它們提煉成一個(gè)單獨(dú)的函數(shù)：
var print = function( i ){
console.log( i );
};
var func = function(){
for ( var i = 0; i < 10; i++ ){
for ( var j = 0; j < 10; j++ ){
if ( i * j >30 ){
return print( i );
}
}
}
};
func();- END -
天給大家分享了一個(gè)用javascript和HTML5做出來(lái)的音樂(lè)播放器，今天小編我要給大家做一個(gè)童年小霸王游戲機(jī)里面的經(jīng)典游戲，坦克大戰(zhàn)，源碼全部都有，希望大家自己也能夠多練習(xí)，將知識(shí)變?yōu)樽约旱摹?/p>
完整代碼太長(zhǎng)，要自己練習(xí)的加這個(gè)群：594959296 所有源碼都上傳到群文件了，自助下載學(xué)習(xí)，之前也上傳了很多類(lèi)似源碼，希望大家能早日成大神
學(xué)習(xí)javascript也是有門(mén)檻的，就是你的html和css至少還比較熟練，您不能連html這東東是干啥的都不知道就開(kāi)始學(xué)javascript了，學(xué)乘除前，學(xué)好加減法總是有益無(wú)害的。
再說(shuō)二點(diǎn)建議：
不要急著看一些復(fù)雜的javascript網(wǎng)頁(yè)特效的代碼，這樣除了打擊你的自信心，什么也學(xué)不到
看網(wǎng)上什么幾天精通javascript的，直接跳過(guò)吧，沒(méi)戲
創(chuàng) 石若蕭 中國(guó)新聞周刊
不可逆的歷史進(jìn)程
提到4399、7K7K、2144等小游戲網(wǎng)站，大部分90后或許還保有記憶，這種記憶大部分和種種場(chǎng)景交織在一起：電話線撥號(hào)上網(wǎng)、臃腫肥胖的臺(tái)式機(jī)、windows 98/XP的開(kāi)機(jī)音樂(lè)，藍(lán)天白云的經(jīng)典屏保，穿鞋套才能進(jìn)入的學(xué)校機(jī)房……《火柴人》《摩爾莊園》《黃金礦工》《閃客快打》《狂扁小朋友》，這些耳熟能詳?shù)男∮螒?，陪?0后度過(guò)了那個(gè)娛樂(lè)產(chǎn)品相對(duì)匱乏的童年。
4399小游戲網(wǎng)站截圖
如今，隨著軟硬件技術(shù)不斷推陳出新，各種嶄新的娛樂(lè)活動(dòng)占據(jù)了人們的業(yè)余時(shí)間。越來(lái)越少的人會(huì)再打開(kāi)網(wǎng)頁(yè)瀏覽器，輸入一個(gè)特定網(wǎng)址，靠簡(jiǎn)單的小游戲滿足自己的娛樂(lè)需求。
4399的日薄西山，就好比BBS論壇、分類(lèi)導(dǎo)航網(wǎng)站的衰落一樣，屬于不可逆的歷史進(jìn)程。在移動(dòng)互聯(lián)網(wǎng)的浪潮下，入局者但凡轉(zhuǎn)身慢了一步，便都成了時(shí)代的眼淚。
逐步敗退的4399
小游戲聚合網(wǎng)站的起家，和20世紀(jì)末、21世紀(jì)初興起的互聯(lián)網(wǎng)浪潮密不可分。彼時(shí)，我國(guó)個(gè)人電腦才剛剛開(kāi)始普及，上網(wǎng)費(fèi)用較為高昂，流行的大部分是《雷電》《大富翁》《街頭霸王》《仙劍奇?zhèn)b傳》《三國(guó)群英傳》《搶灘登陸戰(zhàn)》等大小在數(shù)十M乃至數(shù)百M(fèi)的單機(jī)游戲。因?yàn)閮?chǔ)存工具（軟盤(pán)、U盤(pán)、光盤(pán)）的容量限制，外加病毒橫行，盜版或拷貝都是一個(gè)極麻煩的問(wèn)題——“虛擬光驅(qū)”大約是當(dāng)年眾多電腦小白裝機(jī)時(shí)的心理陰影。
同安裝麻煩、配置要求高的單機(jī)相比，網(wǎng)絡(luò)游戲正處在爆發(fā)的前夜，唯一要解決的只是載入、運(yùn)行的速度問(wèn)題。2004年，4399小游戲平臺(tái)上線，正趕上了這一波浪潮。其采用Flash技術(shù)為基礎(chǔ)，域名簡(jiǎn)單好記，游戲無(wú)需安裝，載入速度快，不少游戲還分為單雙人模式，能滿足小朋友們的初級(jí)社交需求。
但如今，網(wǎng)頁(yè)游戲市占率越來(lái)越小，已不復(fù)當(dāng)年盛景。梳理起4399的衰落，不難總結(jié)出三個(gè)原因：質(zhì)量跟不上，消費(fèi)者習(xí)慣的改變（流量入口變化），以及版權(quán)問(wèn)題。
首當(dāng)其沖的，自然是游戲質(zhì)量問(wèn)題。
隨著電腦配置的日新月異，Steam等分銷(xiāo)平臺(tái)的流行，單機(jī)游戲的下載安裝越來(lái)越方便，大小也從數(shù)百M(fèi)，到動(dòng)輒破G，再到今天隨便一個(gè)普通品相的游戲都破10G。玩家的口味越來(lái)越叼，而以省流量、小體積為賣(mài)點(diǎn)的網(wǎng)頁(yè)游戲自然再難以滿足玩家的需求。
當(dāng)然，總有一部分玩家對(duì)游戲質(zhì)量的要求不太高，只求消磨時(shí)間。但隨著智能手機(jī)的普及，這批玩家的注意力也轉(zhuǎn)移到了《水果忍者》《神廟逃亡》《刀塔傳奇》等手游上。
畢竟，在移動(dòng)互聯(lián)網(wǎng)時(shí)代，流量入口也變了。PC時(shí)代，瀏覽器幾乎是唯一的流量入口。但如今，流量入口變成了如微信、淘寶、頭條，甚至打車(chē)、導(dǎo)航、視頻、應(yīng)用商店等巨型APP。
4399也試圖在APP時(shí)代找到自己的新路子，2013年10月，其推出了針對(duì)移動(dòng)端的“4399游戲盒子”。截至2017年，累計(jì)下載量超過(guò)1億，日活突破350萬(wàn)。
但隨著線上紅利日漸見(jiàn)頂，流量話語(yǔ)權(quán)也逐步從第三方應(yīng)用商店轉(zhuǎn)移到了超級(jí)APP上。華為等各個(gè)安卓手機(jī)廠商也相繼推出了自家的游戲分發(fā)平臺(tái)，并不約而同在應(yīng)用商店中將4399游戲盒屏蔽，其面臨的競(jìng)爭(zhēng)環(huán)境愈發(fā)嚴(yán)酷。
還有版權(quán)問(wèn)題。
游戲本質(zhì)上也屬于內(nèi)容產(chǎn)業(yè)，對(duì)創(chuàng)意有強(qiáng)烈需求。但早年的4399，大部分小游戲來(lái)源其實(shí)都是盜版。除了使用死神、火影、龍珠這些知名IP的未授權(quán)素材外，據(jù)傳說(shuō)，4399在千禧年之初曾有一支專(zhuān)業(yè)的“破解鐵軍”，專(zhuān)門(mén)盯著海外幾個(gè)著名Flash游戲站，只要有新游戲上線，就在第一時(shí)間進(jìn)行破解換皮改名。因?yàn)橥对V流程故意設(shè)計(jì)得極為繁瑣，海外開(kāi)發(fā)者又鞭長(zhǎng)莫及，許多主創(chuàng)只得選擇不去理會(huì)。
但近年來(lái)，隨著人均收入的提高，在線支付手段的普及，以及知識(shí)產(chǎn)權(quán)相關(guān)法律的完善，人們對(duì)盜版的容忍度越來(lái)越低。4399已經(jīng)數(shù)次陷入糾紛之中。
2017年，廣州天河區(qū)人民法院就4399侵害“地下城與勇士”、“DNF”商標(biāo)權(quán)及不正當(dāng)競(jìng)爭(zhēng)糾紛一案做出一審判決。法院經(jīng)審理認(rèn)定4399利用搜索引擎關(guān)鍵詞的行為屬于商標(biāo)性使用，構(gòu)成侵權(quán)。最終裁定4399賠償騰訊公司500萬(wàn)元；
無(wú)獨(dú)有偶，2017年，網(wǎng)易發(fā)表聲明，稱(chēng)4399旗下手游《仙語(yǔ)》侵犯了《夢(mèng)幻西游》手游著作權(quán)及不正當(dāng)競(jìng)爭(zhēng)行為。法院經(jīng)過(guò)審判后判處網(wǎng)易勝訴，判令4399等二被告連帶賠償網(wǎng)易游戲共計(jì)人民幣1500萬(wàn)元；
2019年年底，暴雪與4399長(zhǎng)達(dá)兩年的抄襲訴訟完結(jié)，法院判定，4399公司旗下的兩款手游《英雄槍?xiě)?zhàn)》及《槍?xiě)?zhàn)前線》游戲素材抄襲了暴雪旗下射擊游戲《守望先鋒》，需分別賠付300萬(wàn)和97萬(wàn)。
破解+搜索重新定向的玩法，在如今極為強(qiáng)調(diào)版權(quán)的時(shí)代，顯然玩不轉(zhuǎn)了。
停止服務(wù)的Flash
2020年，許多互聯(lián)網(wǎng)用戶在打開(kāi)電腦瀏覽器時(shí)都會(huì)看到這樣一句話：“Flash Player 將于2020年12月31日停止支持?！?/p>
因此，前段不少流言傳出，認(rèn)為如4399，7k7k這般以Flash為基礎(chǔ)架構(gòu)的游戲網(wǎng)站失去了技術(shù)支持，將會(huì)面臨倒閉的命運(yùn)——這自然言重了。且不說(shuō)如今各個(gè)小游戲網(wǎng)站都有H5的備選方案，即便堅(jiān)持用Flash版本運(yùn)行，也總會(huì)有一些瀏覽器，如360、搜狗等堅(jiān)持提供插件服務(wù)。
4399小游戲網(wǎng)站截圖
不過(guò)，受影響也是難免的。例如部分以Flash為基礎(chǔ)的頁(yè)游開(kāi)發(fā)團(tuán)隊(duì)受影響較大，不得不整體進(jìn)行轉(zhuǎn)型。
Flash的特點(diǎn)在于省流量、體積小、創(chuàng)作自由度高，順應(yīng)了互聯(lián)網(wǎng)發(fā)展初期“一切從簡(jiǎn)”的原則，因此在21世紀(jì)前十年，一度支配了頁(yè)游、在線視頻以及大量在線交互程序，并圍繞建立了一套強(qiáng)大的生態(tài)。
但當(dāng)網(wǎng)速不斷提升、主機(jī)性能越來(lái)越強(qiáng)，F(xiàn)lash的優(yōu)勢(shì)不再明顯，劣勢(shì)反而愈發(fā)突出：效率和表現(xiàn)力均不足，只要圖片像素、視頻清晰度、游戲分辨率等要求稍微高些，便無(wú)法進(jìn)一步處理。
而當(dāng)智能手機(jī)時(shí)代來(lái)臨后，F(xiàn)lash更是因?yàn)閹缀跬耆患嫒菀苿?dòng)端，正式開(kāi)始淡出時(shí)代。
據(jù)公眾號(hào)“極客公園”梳理，2010年，喬布斯發(fā)表文章“我對(duì)于 Flash 的思考”：直指 Flash 封閉，堅(jiān)持作為獨(dú)立的第三方插件，不兼容觸控屏，用戶體驗(yàn)還停留在 PC 端，可靠性、安全性均成問(wèn)題。且因?yàn)镕lash易于開(kāi)發(fā)，相關(guān)產(chǎn)品龐雜泛濫，漏洞多、補(bǔ)丁多、耗電高，導(dǎo)致 Mac 經(jīng)常崩潰?；谝陨戏N種原因，很快，F(xiàn)lash便被IOS系統(tǒng)排除在了生態(tài)之外。
隨著喬布斯“一聲令下”，各個(gè)主流互聯(lián)網(wǎng)公司，包括Adobe自己，都開(kāi)始了“去Flash化”的歷史進(jìn)程。
2012年，Adobe正式宣布，將停止在安卓平臺(tái)上繼續(xù)更新移動(dòng)版Flash插件，轉(zhuǎn)為推進(jìn)開(kāi)發(fā)HTML5；
2015 年，谷歌瀏覽器Chrome 發(fā)表一則聲明，稱(chēng)：“2014 年，80% 的桌面 Chrome 用戶每天訪問(wèn)至少一個(gè)含有 Flash 內(nèi)容的網(wǎng)站，2017 年這一數(shù)字下跌到 17%，并且還在持續(xù)下跌”；
2017年，Adobe正式宣布在2020年末放棄對(duì)Flash的更新與維護(hù)；
2019年，微軟宣布計(jì)劃從所有的瀏覽器中移除Flash，同時(shí)Windows 10加入了一個(gè)補(bǔ)丁，強(qiáng)制全面刪除系統(tǒng)中的Flash插件。蘋(píng)果也宣布將在2020年從Safari中移除Flash。Adobe 自己更是通過(guò)彈窗提醒用戶永久刪除該軟件。
一代“王者”，終于到了謝幕的時(shí)候。
頁(yè)游市場(chǎng)的未來(lái)
用戶量收縮，供應(yīng)量不足，連基礎(chǔ)設(shè)施運(yùn)行都成了問(wèn)題。為了在云譎波詭的時(shí)代中生存下去，小游戲網(wǎng)站們只好和各種“一刀暴擊999”的氪金頁(yè)游抱團(tuán)取暖，共享本就局促的流量入口，甚或親自參與頁(yè)游的開(kāi)發(fā)和入股。
7k7k小游戲網(wǎng)站截圖
但這個(gè)市場(chǎng)，也在以肉眼可見(jiàn)的速度縮小。
據(jù)2007年及2008年中國(guó)游戲產(chǎn)業(yè)報(bào)告，2007年，中國(guó)網(wǎng)頁(yè)游戲市場(chǎng)規(guī)模為1億元，2008年達(dá)到3.5億，2009年達(dá)到9.9億，三年里，市場(chǎng)規(guī)模翻了近10倍。
4399的高光期與這段時(shí)間正好重合，并于2010年前后到達(dá)峰頂。相關(guān)數(shù)據(jù)顯示，2011年，4399凈利潤(rùn)破億；2012年，凈利潤(rùn)翻番，并占據(jù)了近10%的市場(chǎng)份額；2013年?duì)I收14.9億，凈利潤(rùn)2.49億，增長(zhǎng)率30.91%。
而到了2013年，隨著移動(dòng)互聯(lián)網(wǎng)的爆發(fā)式發(fā)展，頁(yè)游發(fā)展進(jìn)入了停滯期。4399不得不抓緊開(kāi)拓手游業(yè)務(wù)，于當(dāng)年推出了4399游戲盒。產(chǎn)品開(kāi)發(fā)、發(fā)行渠道投入陡增。為了引入更多資金，公司開(kāi)始尋求上市。
相關(guān)招股書(shū)顯示，2014的前半年，4399實(shí)現(xiàn)了凈利潤(rùn)1.58億元，全年凈利有望達(dá)到3億。但營(yíng)收相比2013年沒(méi)有明顯增長(zhǎng)，有分析稱(chēng)，其凈利增長(zhǎng)全靠裁員來(lái)壓縮成本。隨后，因未能如期將2014年下半年及全年財(cái)報(bào)交齊，上市進(jìn)程被證監(jiān)會(huì)叫停。
隨后幾年，隨著市場(chǎng)大盤(pán)下滑速度也越來(lái)越快，4399更加找不到合適的上市時(shí)機(jī)。根據(jù)2015年及2016年中國(guó)游戲產(chǎn)業(yè)報(bào)告，2015年，中國(guó)移動(dòng)游戲市場(chǎng)規(guī)模達(dá)到514.6億元，網(wǎng)頁(yè)游戲規(guī)模為219.6億，達(dá)到頂峰，此后一路下滑。2016年，網(wǎng)頁(yè)游戲的市場(chǎng)規(guī)模下降到180多億，較上一年度下滑超過(guò)10%。
而到了近兩年，這一下滑趨勢(shì)越發(fā)明顯?！?019年中國(guó)游戲產(chǎn)業(yè)報(bào)告》數(shù)據(jù)顯示，2019年的中國(guó)游戲市場(chǎng)，移動(dòng)游戲以62.5%市占率遙遙領(lǐng)先，端游緊隨其后，占比28.9%。而頁(yè)游占比僅有5.9%。
據(jù)《2020年1-6月中國(guó)游戲產(chǎn)業(yè)報(bào)告》，去年上半年，我國(guó)頁(yè)游市場(chǎng)實(shí)際銷(xiāo)售收入為40.02億元，同比下降21.43%，連續(xù)五年下降，且只占到了所有游戲收入的2.87%。為了尋找盈利點(diǎn)，各個(gè)昔日的頁(yè)游大廠都在加速布局手游，小廠也不得不尋求轉(zhuǎn)型。
中國(guó)頁(yè)游市場(chǎng)銷(xiāo)售收入數(shù)據(jù)。來(lái)源：伽馬數(shù)據(jù)
在2020年11月30舉辦的第四屆中國(guó)文創(chuàng)產(chǎn)業(yè)大會(huì)·天河峰會(huì)上，4399董事長(zhǎng)駱海堅(jiān)就提出了轉(zhuǎn)型的想法。其宣布，要“掌握3A主機(jī)級(jí)的制作能力”，“通過(guò)深度積累，再結(jié)合大兵團(tuán)的運(yùn)作協(xié)調(diào)和制作開(kāi)發(fā)能力，真正提高我們的游戲制作水平”。此言一出，招來(lái)的卻更多是業(yè)內(nèi)的懷疑聲音。大部分從業(yè)者認(rèn)為，4399從最初的基因上就不具備3A的制作能力，與其貿(mào)然轉(zhuǎn)型，不如堅(jiān)守陣地。畢竟，就像市占率愈發(fā)縮小，但一直沒(méi)有消亡的分類(lèi)導(dǎo)航網(wǎng)站和BBS論壇一樣，雖然網(wǎng)頁(yè)游戲前景不佳，但只要網(wǎng)頁(yè)瀏覽器還存在，沒(méi)有完全終結(jié)。只要能夠找準(zhǔn)用戶需求，創(chuàng)作出優(yōu)秀的作品，依然能夠抓住一部分用戶。
究竟哪條路是對(duì)的？恐怕只能等待時(shí)間來(lái)驗(yàn)證了。
參考資料：
4399上市喊停, 不僅是財(cái)報(bào)未交這么簡(jiǎn)單. 爆料匯. 2015-03-11
多端融合，3D畫(huà)面，未來(lái)的頁(yè)游市場(chǎng)到底應(yīng)該怎么闖？游戲茶館. 2020-09-14
永別了，F(xiàn)lash. 極客公園. 2020-12-31
值班編輯：肖冉
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
