??介紹一下今天發(fā)現(xiàn)的北秽，調(diào)試html內(nèi)嵌javascript游戲的方式。現(xiàn)在的web游戲使用WebGL引擎豹芯，目前git上star最多的兩個(gè)項(xiàng)目是https://github.com/photonstorm/phaser和https://github.com/pixijs/pixi.js位岔，均采用該方式
準(zhǔn)備工作
- 安裝VSCode和Chrome
- 安裝VSCode插件——Live Server和Debugger for Chrome谤专，并重啟VSCode
- 建立工程目錄，開發(fā)js游戲代碼
- 從VSCode下方狀態(tài)欄選擇
Live Share吆玖，啟動(dòng)http服務(wù)器筒溃，記錄端口(如5500) - 為工程設(shè)置調(diào)試，添加配置->Chrome Launch將端口改為上一步的端口(5500)
- 在js文件中下斷點(diǎn)調(diào)試
實(shí)際操作
(1) 建立工程目錄testwebgl
目錄下存在三個(gè)文件：bunny.png index.html test.js
bunny.png可以隨便找個(gè)png格式的圖片命名為該名
index.html內(nèi)容：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.15/dist/phaser.min.js"></script>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
test.js內(nèi)容：
/*
// pixi代碼測(cè)試
const app = new PIXI.Application();
document.body.appendChild(app.view);
PIXI.loader.add("bunny", "bunny.png").load((loader, resources) => {
const bunny = new PIXI.Sprite(resources.bunny.texture);
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
app.stage.addChild(bunny);
app.ticker.add(() => {
bunny.rotation += 0.01;
});
});
*/
// phaser代碼測(cè)試
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: "arcade",
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload() {
}
function create() {
this.add.image(400, 300, "sky");
var particles = this.add.particles("red");
var emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: "ADD"
});
var logo = this.physics.add.image(400, 100, "logo");
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
emitter.startFollow(logo);
}
(2) 從VSCode狀態(tài)欄點(diǎn)擊Live Share沾乘，得到端口5500
選擇調(diào)試->打開配置->Chrome怜奖，將端口改為5500，最終得到.vscode目錄下的launch.json文件：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "啟動(dòng) Chrome 并打開 localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}
(3) 在js文件中設(shè)置斷點(diǎn)并調(diào)試
斷點(diǎn)設(shè)置在這一行： bunny.rotation += 0.01;
啟動(dòng)調(diào)試翅阵，斷點(diǎn)斷下歪玲！
