在线运行python代码——实现pygame_zero库本项目已经开源，想要了解源码的朋友请移步Github: skul

最近在上手了skulpt开发之后想到其实可以往python的图形界面相关的库去发力，因为javascript在图形方面的生态还是蛮有优势的，而且图形界面给人的感觉更直观更容易表达，所以先从python比较流行的2d库入手，利用skulpt实现pygame-zero，底层执行的js代码由PIXI.js运行。

另外还有实验性的物理引擎功能呢（分支:physicis-engine）

demo传送门：python-ide

demo里可以随意修改代码，点击蓝色运行按钮即可看效果，左上角可以查看其他示例

本项目已经开源，想要了解源码的朋友请移步Github: skulpt_pygame_zero，以下是开发文档：

基于skulpt的第三方模块: skulpt_pygame_zero

这是一个基于skulpt实现在浏览器运行pygame-zero的模块，为skulpt拓展2d游戏的能力，底层运行基于PIXI.js实现。

安装

npm 引入:

npm install skulpt-pygame-zero

或者使用 cdn 引入:

https://cdn.jsdelivr.net/gh/lipten/skulpt-pygame-zero@master/dist/main.js

快速上手

导入模块

// webpack
import 'skulpt-pygame-zero'

// cdn
<script src="https://cdn.jsdelivr.net/gh/lipten/skulpt-pygame-zero@master/dist/main.js"></script>

使用 PyGameZero.usePyGameZero 包裹skulpt的read钩子函数

Sk.configure({
  .... other settings
  // before
  read: builtinRead,
  // after 
  read: PyGameZero.usePyGameZero(builtinRead),
  __future__: Sk.python3,
});

传入渲染容器 html

<div id="stage"></div>

javascript

PyGameZero.setContainer(document.getElementById('stage'))

最好在运行skulpt之前执行一次PyGameZero.reset()

// insert before running
PyGameZero.reset();
// running skulpt
Sk.misceval.asyncToPromise(function() {
	return Sk.importMainWithBody("<stdin>", false, pythonCode, true);
});

复制项目中的 test/simple.py 代码可用于测试

skulpt_pygame_zero与pythen的pygame-zero有哪些区别：

加载图片只能用外链资源

Actor('https://static.lipten.link/blogs/pig1.png')

创建角色可以传入多个图片资源，然后通过frame属性控制使用第几张

pig = Actor(('https://static.lipten.link/blogs/pig1.png','https://static.lipten.link/blogs/pig2.png'))

# then ute frame=2 to switch the second photo
pig.frame = 2

以下是未实现的Pygame-zero的api

images
music.fadeout
music.queue
Actor keyword argument: pos, topleft, topright, bottomleft, bottomright, midtop, midleft, midright, midbottom or center （Actor构造器不支持一些关键参数）
Anchor point （角色锚点）
Tone Generator （音调生成器）
WIDTH、HEIGHT （变量为只读，值为html容器的宽高）