2. 程式人生 > >從零到一：用Phaser.js寫意地開發小遊戲（Chapter 3

從零到一：用Phaser.js寫意地開發小遊戲（Chapter 3

阿新 • • 發佈：2019-01-22

上一節我們搭建了遊戲的骨架，添加了四個遊戲場景，分別是載入、開始、遊戲、結束。那麼這一節我們來介紹載入這個場景，順帶豐富一下各個場景的基本內容。

Phaser.Loader

Phaser框架自帶的一個loader，支援載入多種型別的資源，下面是離線文件中的介紹的截圖，詳細的API可以查閱文件得知。

介紹幾個常用的載入資源的方法：(下列程式碼中的game預設為Phaser例項，通過new Phaser.Game賦值)

載入圖片
game.load.image('star', 'star.png');
載入音訊
game.load.audio('bg', 'bg.mp3)');
載入圖片序列

由於要指定幀的寬高，因此一般是動畫的連續幀，例如行走動畫的每一幀合成的圖片。

game.load.spritesheet('walk', 'walk.png', 80, 80);
載入資源集合

同樣可以用作載入圖片序列，但這種用法主要用於載入類似於TexturePacker打包出來的資源集合。相比於spritesheet一般是一連串的動畫幀合成的圖片，這種資源集合中的圖片可以是各種各樣的，和我們平常做網站會將icon、背景圖片等合成sprites一個道理。
打包出來的資源一般包括一個json和一張合成的圖片，json描述了合成圖片中每張圖片的寬高位置等資訊。

game.load.altasJSONArray('fly'
 
, 'fly.png', 'fly.json');

正式開始

第一步：載入你需要的資源

上一節我們提過每個場景都有自己的生命週期，因此載入資源的操作應放在preload這個階段執行。當preload中的資源載入完畢後，則preload場景將進入create階段，示例程式碼如下：

// 載入場景
preload: function() {
    this.preload = function() {
        // 設定背景為黑色
        game.stage.backgroundColor = '#000000';
        // 載入遊戲資源
        game.load.crossOrigin = 'anonymous'
 
; // 設定跨域
        game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
        game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
        game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
        game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
        game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
        game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
        game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
        game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
        game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
        game.load.audio('bgMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3');
    },
    this.create = function() {
        alert('載入完畢!');
    }
}
// 實際應用場景改為window.innerWidth和window.innerHeight。
// 這裡是為了方便檢視示例。
var width = 320;
var height = 568;

// 建立遊戲例項
var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');

// 定義場景
var states = {
	// 載入場景
    preload: function() {
    	this.preload = function() {
            // 設定背景為黑色
            game.stage.backgroundColor = '#000000';
            // 載入遊戲資源
            game.load.crossOrigin = 'anonymous'; // 設定跨域
            game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
            game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
            game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
            game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
            game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
            game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
            game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
            game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
            game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
            game.load.audio('bgMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3');
        },
        this.create = function() {
            alert('載入完畢!');
        }
    },
    // 開始場景
    created: function() {
    	this.create = function() {
            // TO-DO
			game.stage.backgroundColor = '#777';
			setTimeout(function() {
				game.state.start('play');
			}, 3000);
        }
    },
    // 遊戲場景
    play: function() {
    	this.create = function() {
            // TO-DO
			game.stage.backgroundColor = '#444';
			setTimeout(function() {
				game.state.start('over');
			}, 3000);
        }
    },
    // 結束場景
    over: function() {
    	this.create = function() {
        	// TO-DO
            game.stage.backgroundColor = '#000';
            alert('遊戲結束!');
        }
    }
};

// 新增場景到遊戲示例中
Object.keys(states).map(function(key) {
	game.state.add(key, states[key]);
});

// 啟動遊戲
game.state.start('preload');

第二步：監聽載入完成的事件

通常來說我們都需要反饋載入進度，例如一個進度條，或者是一個百分比的數字。於是我們接下來就需要監聽載入完成的事件了。

// 監聽載入完畢事件
game.load.onLoadComplete.add(function() {
    alert('載入完畢!');
});

如果我們需要監聽到載入的進度，那麼可以用下面的方法：

// 新增進度文字
var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
    fontSize: '60px',
    fill: '#ffffff'
});
progressText.anchor.setTo(0.5, 0.5); // 設定錨點，用於居中
// 監聽載入完一個檔案的事件
game.load.onFileComplete.add(function(progress) {
    progressText.text = progress + '%';
});
// 實際應用場景改為window.innerWidth和window.innerHeight。
// 這裡是為了方便檢視示例。
var width = 320;
var height = 568;

// 建立遊戲例項
var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');

// 定義場景
var states = {
	// 載入場景
    preload: function() {
    	this.preload = function() {
            // 設定背景為黑色
            game.stage.backgroundColor = '#000000';
            // 載入遊戲資源
            game.load.crossOrigin = 'anonymous'; // 設定跨域
            game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
            game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
            game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
            game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
            game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
            game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
            game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
            game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
            game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
            game.load.audio('bgMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3');
            // 新增進度文字
            var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
                fontSize: '60px',
                fill: '#ffffff'
            });
            progressText.anchor.setTo(0.5, 0.5);
            // 監聽載入完一個檔案的事件
            game.load.onFileComplete.add(function(progress) {
                progressText.text = progress + '%';
            });
            // 監聽載入完畢事件
            game.load.onLoadComplete.add(function() {
                alert('載入完畢!');
            });
        },
        this.create = function() {
            // game.state.start('created');
        }
    },
    // 開始場景
    created: function() {
    	this.create = function() {
            // TO-DO
			game.stage.backgroundColor = '#777';
			setTimeout(function() {
				game.state.start('play');
			}, 3000);
        }
    },
    // 遊戲場景
    play: function() {
    	this.create = function() {
            // TO-DO
			game.stage.backgroundColor = '#444';
			setTimeout(function() {
				game.state.start('over');
			}, 3000);
        }
    },
    // 結束場景
    over: function() {
    	this.create = function() {
        	// TO-DO
            game.stage.backgroundColor = '#000';
            alert('遊戲結束!');
        }
    }
};

// 新增場景到遊戲示例中
Object.keys(states).map(function(key) {
	game.state.add(key, states[key]);
});

// 啟動遊戲
game.state.start('preload');

第三步：新增載入頁的最小展示時間

一般而言，我們做遊戲都會在loading介面放一個LOGO，作為展示宣傳用，那麼如果需要載入的資源體積很小的話，有可能載入介面就是一閃而過了。於是，根據我們開發的經驗，會設定一個最小的展示時間（例如3秒），在未到最小的展示時間前，即便資源已經載入完畢，也不會離開載入場景。

// 監聽載入完畢事件
game.load.onLoadComplete.add(onLoad);
// 最小展示時間，示例為3秒
var deadLine = false;
setTimeout(function() {
    deadLine = true;
}, 3000);
// 載入完畢回撥方法
function onLoad() {
    if (deadLine) {
        // 已到達最小展示時間，可以進入下一個場景
        game.state.start('created');
    } else {
        // 還沒有到最小展示時間，1秒後重試
        setTimeout(onLoad, 1000);
    }
}
// 實際應用場景改為window.innerWidth和window.innerHeight。
// 這裡是為了方便檢視示例。
var width = 320;
var height = 568;

// 建立遊戲例項
var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');

// 定義場景
var states = {
	// 載入場景
    preload: function() {
    	this.preload = function() {
            // 設定背景為黑色
            game.stage.backgroundColor = '#000000';
            // 載入遊戲資源
            game.load.crossOrigin = 'anonymous'; // 設定跨域
            game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
            game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
            game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
            game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
            game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
            game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
            game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
            game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
            game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
            game.load.audio('bgMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3');
            // 新增進度文字
            var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
                fontSize: '60px',
                fill: '#ffffff'
            });
            progressText.anchor.setTo(0.5, 0.5);
            // 監聽載入完一個檔案的事件
            game.load.onFileComplete.add(function(progress) {
                progressText.text = progress + '%';
            });
            // 監聽載入完畢事件
            game.load.onLoadComplete.add(onLoad);
            // 最小展示時間，示例為3秒
            var deadLine = false;
            setTimeout(function() {
                deadLine = true;
            }, 3000);
            // 載入完畢回撥方法
            function onLoad() {
                if (deadLine) {
                    // 已到達最小展示時間，可以進入下一個場景
                    game.state.start('created');
                } else {
                    // 還沒有到最小展示時間，1秒後重試
                    setTimeout(onLoad, 1000);
                }
            }
        }
    },
    // 開始場景
    created: function() {
    	this.create = function() {
            // 新增背景
            var bg = game.add.image(0, 0, 'bg');
            bg.width = game.world.width;
            bg.height = game.world.height;
        }
    },
    // 遊戲場景
    play: function() {
    	this.create = function() {
            // TO-DO
			game.stage.backgroundColor = '#444';
			setTimeout(function() {
				game.state.start('over');
			}, 3000);
        }
    },
    // 結束場景
    over: function() {
    	this.create = function() {
        	// TO-DO
            game.stage.backgroundColor = '#000';
            alert('遊戲結束!');
        }
    }
};

// 新增場景到遊戲示例中
Object.keys(states).map(function(key) {
	game.state.add(key, states[key]);
});

// 啟動遊戲
game.state.start('preload');

順帶豐富一下開始場景吧
// 開始場景
created: function() {
    this.create = function() {
        // 新增背景
        var bg = game.add.image(0, 0, 'bg');
        bg.width = game.world.width;
        bg.height = game.world.height;
        // 新增標題
        var title = game.add.text(game.world.centerX, game.world.height * 0.25, '小恐龍接蘋果', {
            fontSize: '40px',
            fontWeight: 'bold',
            fill: '#f2bb15'
        });
        title.anchor.setTo(0.5, 0.5);
        // 新增提示
        var remind = game.add.text(game.world.centerX, game.world.centerY, '點選任意位置開始', {
            fontSize: '20px',
            fill: '#f2bb15'
        });
        remind.anchor.setTo(0.5, 0.5);
        // 新增主角
        var man = game.add.sprite(game.world.centerX, game.world.height * 0.75, 'dude');
        var manImage = game.cache.getImage('dude');
        man.width = game.world.width * 0.2;
        man.height = man.width / manImage.width * manImage.height;
        man.anchor.setTo(0.5, 0.5);
        // 新增點選事件
        game.input.onTap.add(function() {
            game.state.start('play');
        });
    }
}

示例程式碼中使用了input的onTap事件，那麼input實際上還有其他事件，例如下圖中框住的就是我們最常用的幾個事件：

  • onDown - 對應touchstart/mousedown

  • onUp - 對應touchend/mouseup

  • onHold - 封裝了長按事件的實現

  • onTap - 封裝了點選事件的實現

另外還有滑動事件：

// 實際應用場景改為window.innerWidth和window.innerHeight。
// 這裡是為了方便檢視示例。
var width = 320;
var height = 568;

// 建立遊戲例項
var game = new Phaser.Game(width, height, Phaser.AUTO, '#game');

// 定義場景
var states = {
	// 載入場景
    preload: function() {
    	this.preload = function() {
            // 設定背景為黑色
            game.stage.backgroundColor = '#000000';
            // 載入遊戲資源
            game.load.crossOrigin = 'anonymous'; // 設定跨域
            game.load.image('bg', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
            game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
            game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
            game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
            game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
            game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
            game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
            game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
            game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
            game.load.audio('bgMusic', '//24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3');
            // 新增進度文字
            var progressText = game.add.text(game.world.centerX, game.world.centerY, '0%', {
                fontSize: '60px',
                fill: '#ffffff'
            });
            progressText.anchor.setTo(0.5, 0.5);
            // 監聽載入完一個檔案的事件
            game.load.onFileComplete.add(function(progress) {
                progressText.text = progress + '%';
            });
            // 監聽載入完畢事件
            game.load.onLoadComplete.add(onLoad);
            // 最小展示時間，示例為3秒
            var deadLine = false;
            setTimeout(function() {
                deadLine = true;
            }, 3000);
            // 載入完畢回撥方法
            function onLoad() {
                if (deadLine) {
                    // 已到達最小展示時間，可以進入下一個場景
                    game.state.start('created');
                } else {
                    // 還沒有到最小展示時間，1秒後重試
                    setTimeout(onLoad, 1000);
                }
            }
        }
    },
    // 開始場景
    created: function() {
    	this.create = function() {
            // 新增背景
            var bg = game.add.image(0, 0, 'bg');
            bg.width = game.world.width;
            bg.height = game.world.height;
            // 新增標題
            var title = game.add.text(game.world.centerX, game.world.height * 0.25, '小恐龍接蘋果', {
                fontSize: '40px',
                fontWeight: 'bold',
                fill: '#f2bb15'
            });
            title.anchor.setTo(0.5, 0.5);
            // 新增提示
            var remind = game.add.text(game.world.centerX, game.world.centerY, '點選任意位置開始', {
                fontSize: '20px',
                fill: '#f2bb15'
            });
            remind.anchor.setTo(0.5, 0.5);
            // 新增主角
            var man = game.add.sprite(game.world.centerX, game.world.height * 0.75, 'dude');
            var manImage = game.cache.getImage('dude');
            man.width = game.world.width * 0.2;
            man.height = man.width / manImage.width * manImage.height;
            man.anchor.setTo(0.5, 0.5);
            // 新增點選事件
            game.input.onTap.add(function() {
                game.state.start('play');
            });
        }
    },
    // 遊戲場景
    play: function() {
    	this.create = function() {
            // TO-DO
			game.stage.backgroundColor = '#444';
			setTimeout(function() {
				game.state.start('over');
			}, 3000);
        }
    },
    // 結束場景
    over: function() {
    	this.create = function() {
        	// TO-DO
            game.stage.backgroundColor = '#000';
            alert('遊戲結束!');
        }
    }
};

// 新增場景到遊戲示例中
Object.keys(states).map(function(key) {
	game.state.add(key, states[key]);
});

// 啟動遊戲
game.state.start('preload');

現在，開始介面是這樣子的：

小結

這一節我們介紹了載入場景，分步驟介紹了載入資源、監聽載入完成的事件以及新增一個最小的載入展示時間，其中“新增一個最小的載入展示時間”是偏實際應用的內容，非必須。

在文章的最後我們還向場景中加入了主角、背景、標題和開始提示等元素，來豐富開始場景。順帶一說，這次的示例是做一個接蘋果的遊戲，一句話說完就是控制主角接住每一個從天上掉下來的蘋果，否則就算輸。

那麼如何利用這些資源構建出遊戲的玩法，蘋果怎麼掉，怎麼控制主角等等，將是下一節的內容。

未完待續

相關推薦

從零到一：用Phaser.js寫意地開發小遊戲（Chapter 3

上一節我們搭建了遊戲的骨架，添加了四個遊戲場景，分別是載入、開始、遊戲、結束。那麼這一節我們來介紹載入這個場景，順帶豐富一下各個場景的基本內容。 Phaser.Loader Phaser框架自帶的一個loader，支援載入多種型別的資源，下面是離線文件中的介紹的截圖，

從零開始：用Python搭建神經網路

在這篇部落格裡，我們將從零開始搭建一個三層的神經網路。我們不會對用到的數學原理一一贅述，但我保證你可以直觀地瞭解到我們在做什麼。另外，你也可以通過文章內的連結來獲取更詳細的資訊。 這兒我就假定你已經熟悉基礎的微積分和機器學習的一些概念，比如分類和規範化，最好還能懂得一些優

利用js寫的見縫插針小遊戲（推薦給新手)

   標題之所以寫推薦給新手，是因為我也是個剛學js一週的新人，想練練手，於是就花了一下午寫了這個遊戲，所以我寫的可能更適合新手，大神勿噴。    這個遊戲是利用原生的js以及html5的canvas技術做的一個小遊戲，遊戲規則跟手機上的見縫插針一樣的，這是我的遊戲介面：

轉載：高德地圖API學習 從零開始學高德JS API（一）地圖展現

摘要：關於地圖的顯示，我想大家最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500之後，瀏覽器開始逐漸卡死，大家都開始尋找解決方案，比如聚合marker啊，比如麻點圖啊。聚合marker裡面還有一些複雜的演算法，而麻點圖，最讓大家頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖

教程 | 一步步從零開始：使用PyCharm和SSH搭建遠端TensorFlow開發環境

作者：Erik Hallström 機器之心編譯 參與：機器之心編輯部 一般而言，大型的神經網路對硬體能力有著較高的需求——往往需要強勁的 GPU 來加速計算。但是你也許還是想拿著一臺筆記本坐在咖啡店裡安靜地寫 TensorFlow 程式碼，同時還能享受每秒數萬億次

odoo12從零開始：一、安裝odoo執行環境(windows10)

前言       鑑於好多朋友說沒有mac電腦，windows開發其實也差不了多遠，只是個人習慣問題，而且吧，windows的電腦其實配環境也挺快的其實，我在這裡再稍微補一個比較簡單的windows環境部署，希望可以對朋友們有一些幫助。 在windows10上安裝odoo12

Python學習筆記_零零一：Python基本介紹

交易 社交 數據 lips engine 探討 認識 hive 初學者 Python介紹 Python 是一個高層次的結合了解釋性、編譯性、互動性和面向對象的腳本語言。Python 的設計具有很強的可讀性，相比其他語言經常使用英文關鍵字，其他語言的一些標點符號，它具有比其他

從零一起學Spring Boot之LayIM項目長成記（一） 初見 Spring Boot

部分 基礎 依賴 com stat boot.s 情況下 比較 tar 項目背景 　　之前寫過LayIM的.NET版後端實現，後來又寫過一版Java的。當時用的是servlet，websocket和jdbc。雖然時間過去很久了，但是仍有些同學在關註。偶然間我聽說了Sprin

從零開始搭建自己的VueJS2.0+ElementUI單頁面網站（一、環境搭建）

如圖所示 增刪改 type default sdn orm rain exp 名稱 原網址：https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以說是近些年來最火的前端框架之一，越來越多的

從零開始學 Web 之 JS 高級（二）原型鏈，原型的繼承

console 多少 程序 cat hub inf 當前 構造函數 調用 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：

從零開始學 Web 之 JS 高級（三）apply與call，bind，閉包和沙箱

master 操作 console 概念 釋放 分享圖片 成功 num 命名沖突 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始：教你如何訓練神經網路

原文連結 ：https://zhuanlan.zhihu.com/p/31953880 選自TowardsDataScience 作者：Vitaly Bushaev 機器之心編譯   作者從神經網路簡單的數學定義開始，沿著損失函式、啟用函式和反向傳播等方法進一步描述基本的優化演算法。在

棧一：用兩個棧實現佇列

/** * 題目：用兩個棧實現佇列 * 描述：用兩個棧來實現一個佇列，完成佇列的Push和Pop操作。 佇列中的元素為int型別。 * 解決方案：方法一：一個作為儲存用，一個作為彈出用 * */ public class One { Stack

Java開發公眾號系列教程(一)：微信js-sdk上傳照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。 微信最新版本JSSDK文件 地址https://mp.weixin.qq.com/advanced/wiki

python+selenium十一：jQuery和js語法、js處理iframe python+selenium十一：jQuery和js語法、js處理iframe

python+selenium十一：jQuery和js語法、js處理iframe   selenium 執行jQuery/js語法 driver.execute_script(jQuery/js) 1、jQuery jQuery只支援css語法： jq

【原創】《矩陣的史詩級玩法》連載二十一：用矩陣計算直線和二次貝塞爾曲線的交點

搞了這麼多理論，現在是時候展現一下矩陣的魅力了。看看經過矩陣變換後的曲線求交是何等的方便！ 上篇說過，矩陣簡化的效果立竿見影，如同連載二的直線橢圓相交判斷一樣。 按我的套路，我是會先給出傳統的做法，然後再用矩陣的史詩級玩法將其擊敗，不過這次為了不讓大家看暈，我選擇把順序調

Python3爬蟲從零開始：環境配置

話不多說，關於爬蟲的作用和介紹網上資料很多，不再累述。 “工欲善其事必先利其器”。 1.首先到Python官網進行Python安裝： 2.環境變數配置： （1）找到Python3安裝路徑，我的如下：C:\Users\Administrator\AppData\

Python3爬蟲從零開始：庫的安裝

   抓取網頁之後下一步就是從網頁中提取資訊。提取方式有很多種，可以利用正則表示式進行提請，但是相對而言比較麻煩繁瑣。現在有很多強大的解析庫供我們使用，如lxml,Beautiful Soupp,pyquery等。本節對其安裝進行介紹。 lxml的安裝     lxm

JavaScript：用原生js實現重力條件下，可拖拽小球的碰撞運動

本次用原生js，在小球的碰撞運動上添加了重力效應。並且可以拖拽小球，拖拽的方向和力度大小，決定了小球的初始速度和運動方向 蠻有趣的，大家可以拷貝程式碼試一試。程式碼也附帶了一些小注釋。 <!DOCTYPE html> <html lang="en"> &l

Java開發公眾號系列教程(一)：微信js-sdk上傳手機相簿照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。 一、首先申明一點筆者本案例用的微信JSSDK版本是1.2.0的，官方文件給出的最