介绍一下今天发现的，调试html内嵌javascript游戏的方式。现在的web游戏使用WebGL引擎，目前git上star最多的两个项目是https://github.com/photonstorm/phaser和https://github.com/pixijs/pixi.js，均采用该方式
准备工作
- 安装VSCode和Chrome
- 安装VSCode插件——Live Server和Debugger for Chrome，并重启VSCode
- 建立工程目录，开发js游戏代码
- 从VSCode下方状态栏选择
Live Share，启动http服务器，记录端口(如5500) - 为工程设置调试，添加配置->Chrome Launch将端口改为上一步的端口(5500)
- 在js文件中下断点调试
实际操作
(1) 建立工程目录testwebgl
目录下存在三个文件：bunny.png index.html test.js
bunny.png可以随便找个png格式的图片命名为该名
index.html内容：
<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内容：
/*
// pixi代码测试
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代码测试
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状态栏点击Live Share，得到端口5500
选择调试->打开配置->Chrome，将端口改为5500，最终得到.vscode目录下的launch.json文件：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "启动 Chrome 并打开 localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}
(3) 在js文件中设置断点并调试
断点设置在这一行： bunny.rotation += 0.01;
启动调试，断点断下！
网友评论