Dear Pyxel users, are you enjoying the web version of Pyxel? In Pyxel 1.8.17, I added a function that allows you to run Pyxel directly on your blog.

Pyxelユーザーの皆様。Web版Pyxelを楽しんでいただけていますか？ Pyxel 1.8.17でPyxelをブログの上で直接動かせる機能を追加したのでご紹介します。

How to use Pyxel Web (Web版Pyxelの使い方)

For basic usage of the web version of Pyxel, please refer to the previous article.

Web版Pyxelの基本的な使い方は以前の記事をご参照ください。

How to run Pyxel on your blog (ブログ上でのPyxelの動かし方)

You can run Pyxel on your blog by creating a div tag with the id pyxel-screen and executing the function launchPyxel from JavaScript.

pyxel-screenというidのdivタグを作成し、JavaScriptからlaunchPyxelという関数を実行することで、ブログ上でPyxelを動かせます。

The arguments of the launchPyxel function are the same as for custom Pyxel elements. For example, if you want to write Python code directly, add the following tag to your blog

launchPyxel関数の引数は、Pyxelのカスタムエレメントと同じです。例えば、Pythonコードを直接書きたい場合であれば、次のタグをブログに追加します。

<div id="pyxel-screen" style="position: relative; width:300px; height:300px"></div>
<script src="https://cdn.jsdelivr.net/gh/kitao/pyxel/wasm/pyxel.js"></script>
<script>
let script=`
import pyxel
pyxel.init(100, 100)
pyxel.cls(8)
pyxel.line(0, 0, 100, 100, 7)
pyxel.show()
`;
launchPyxel({ command: "run", script: script });
</script>