Nyle-canvas（DXRubyスタイル）で作る「ブロック崩し」

Qiita記事

• ブラウザだけでRubyプログラミング： 1ステップずつ作っていく「ブロック崩し」（Nyle-canvas編） - Qiita

関連のソースコードです。

Nyle-canvas リンク

• Nyle-canvasホームページ https://spoolkitamura.github.io/nyle-canvas/

• Nyle-canvasマニュアル；エディタの操作方法 https://spoolkitamura.github.io/nyle-canvas/dev2/site/manual_editor.html

• Nyle-canvas（DXRubyスタイル）エディタ；実際にプログラミングするエディタ画面 「Nyle-canvasホームページ」から、「DXRubyスタイル」のリンクをクリック。

実行方法

A. dx_htmlフォルダ内の HTMLファイル

• 直接ダブルクリックしてブラウザで実行

• ブラウザの任意のページにドラッグ＆ドロップして、ブラウザで実行

• 「Nyle-canvas（DXRubyスタイル）エディタ画面」にドラッグ＆ドロップして、Rubyプログラムを確認の上、▶︎実行ボタンを押して実行

B. dx_rubyフォルダ内の Rubyファイル

「Nyle-canvas（DXRubyスタイル）エディタ画面」で、Rubyのコードを貼り付けて、▶︎実行ボタンを押して実行 （使用する画像ファイルがあれば、ドラッグ＆ドロップする）

フォルダ構成

block_html

Rubyプログラム、画像データ、ブラウザ実行コード一式を含んだ Nyle-canvas形式のHTMLファイル。

block_ruby

Nyle-canvas（DXRubyスタイル）で書かれたプログラムの内の、Rubyプログラムの部分。

image

サンプルプログラムで使う画像。