Overview

This text is a partial modification of what was made as a teaching material for programming classes for junior high and high school students.

You will learn how to use Nyle-canvas, which allows you to start Ruby game programming immediately with just a browser.

And as an application, I aim to make games such as "breakout" by myself.

Technical explanation

What is Nyle-canvas?

Nyle-canvas is an integrated development environment that integrates a Ruby editor and execution environment that runs on a browser. This is a method that has recently been adopted for development in various programming languages such as Scratch.

The best feature is that you can easily start programming Ruby if you have a browser (Chrome, etc.) on your computer or tablet and an internet environment.

Features of Nyle-canvas

--No need to install Ruby --No editor or terminal software ("command prompt", "PowerShell", "terminal", etc.) required --Operates on various OS (Windows, macOS, Linux, Android, iPadOS, iOS, etc.) --Can also operate on tablet devices and smartphones --The program works independently of the OS --Can be executed immediately without saving operation --Image data is also managed in an integrated manner --Can be written in DXRuby compatible format

Operating environment required for Nyle-canvas

--Browser (Chrome, etc.)

Internet connection --OS that runs the browser (Windows, macOS, Linux, Android, iPadOS, iOS, etc.) --PC, tablet (with external keyboard), smartphone (* Some touch panel operations are also supported)

You can start programming immediately without the complicated preparation that was required before you started programming. Also, if the browser works, it will work not only on personal computers but also on various machines such as tablets (iPad, etc.).

And the written program can be executed immediately without saving operation, and you can check the programming result quickly and easily as many times as you like. Furthermore, you are freed from managing program files and image data, and switching between multiple software.

In addition to the above, it is also attractive that Nyle-canvas can be operated with almost the same description as DXRuby, which is often used as a 2D game library of Ruby. Therefore, it also responds to requests such as "I want to utilize program assets written in DXRuby" and "I want to develop games by writing DXRuby on Mac". ..

Nyle-canvas is a work that won the 12th Fukuoka Ruby Award (2019) Excellence Award. http://www.digitalfukuoka.jp/topics/144?locale=ja

Technical elements

It uses HTML5 Canvas API, Ruby → Javascript parser Opal, Javascript editor Ace.js, DXRuby API, etc.

Nyle-canvas (DXRuby style)

In this text, we will use the DXRuby API compatible "DXRuby style" among the Nyle-canvas description styles.

Main differences from DXRuby API

・ There is no ʻImage.new`

All ʻImage classs are created from ʻImage.load (image file)

・ There is no `Sprite class`

・ How to specify the color

4-element array in [A, R, G, B] format (A is α value; transparency), or color constant (C_BLACK, etc.)

・ ʻImage.set_color_key (color)` is not supported

Will be supported in another format

(Currently, the white color of the ʻImage.load` image is automatically transparent)

-There is no `Window.caption =`

-When writing multiple `Window.loop do ~ end`, do not write them in parallel.

・ `Window.close`

Window drawing stops instead of closing the window

・ ʻExit` does not close the window

・ Only one program file

・ Partially supports touch panel operation

Features not supported by DXRuby

・ Sound is not supported

Will be supported by dev3

Nyle-canvas homepage

--Nyle-canvas homepage https://spoolkitamura.github.io/nyle-canvas/

--Nyle-canvas (DXRuby style) editor; editor screen for actual programming From "Nyle-canvas homepage", click the "DXRuby style" link.

--Nyle-canvas manual; how to operate the editor https://spoolkitamura.github.io/nyle-canvas/dev2/site/manual_editor.html

Reference site

DXRuby page which is the original of "DXRuby style";

--DXRuby homepage http://dxruby.osdn.jp

--DXRuby 1.4.6 Reference Manual http://mirichi.github.io/dxruby-doc/index.html

--DXRuby 1.4.1 Reference Manual http://dxruby.osdn.jp/DXRubyReference/20095313382446.htm

An article explaining how to use DXRuby;

--2D game library for Ruby DXRuby: Basics of how to use --Qiita https://qiita.com/noanoa07/items/bced6519d9b53685b651

Other DXRuby API compatible libraries that work in the browser;

DXOpal https://yhara.github.io/dxopal/doc/ja/index.html

https://yhara.github.io/dxopal/index.html

--Game programming starting with Ruby --DXOpal edition --Rubyist Magazine No. 0057 https://magazine.rubyist.net/articles/0057/0057-GameProgramingWithDXOpal.html

Related sites of this text

As the next step in this text, let's create a "breakout".

--Ruby programming with just a browser: "Breakout" (Nyle-canvas edition) that creates step by step --Qiita https://qiita.com/noanoa07/items/7d2f8e0354b9ad119d64

Execution environment of this text

--Browser; Google Chrome (version 83.0.4103.61, 64-bit, macOS version)

--Execution OS; macOS（Catalina 10.15.5）

In addition, we have confirmed the operation on Safari / macOS and Chrome / Windows10 as appropriate.

Corresponding version

Nyle-canvas (DXRuby style); dev2 (released 5/30/2020)

Source code of this text

https://github.com/noanoa07/nyle-canvas-intro

License of this text

The commentary, Ruby source code, and image data in this text are all in the public domain.

(Nyle-canvas source code is MIT licensed)

Program explanation

1. 1. How to use Nyle-canvas

First, let's experience the basic usage of Nyle-canvas.

1-1. Nyle-canvas editor

For Nyle-canvas, the program edit screen (editor) is displayed by accessing the following site with a browser.

From "Nyle-canvas homepage", click the "DXRuby style" link. This is the Nyle-canvas editor screen.

In addition, here we will explain using Google Chrome as the browser. (The execution environment is macOS.)

1-2. Explanation of the editor screen

The basic program is displayed in advance on the editor screen. In addition, various buttons are lined up in the upper left of the screen. From the right --▶ ︎ button ； Program execution --↓ button; Save program (download) --T button; Font (character size) setting --? Button; Go to help (reference) screen

1-3. Program execution (rb_dx00.html)

Since the basic program is displayed in advance, press the ▶ ︎ button for the time being to execute the program.

`rb_dx00.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code for screen drawing(your draw code here)
  
end

This will open a new tab in your browser with a black square. This is the basic window screen.

As you can see, the major feature of Nyle-canvas is that ** programs can be executed immediately without saving operations **.

1-3a. Program rerun

To re-execute the program, ** "Reload" on the ** execution screen.

How to "reload":

--Press the " ↻ "button at the top of the browser --Select Menu> File> View> Reload Page --Shortcut; (macOS) Command + R, (Windows) Ctrl + R

1-3b. Close the execution screen

To close the program execution screen, close the execution screen tab. Press the " × "button at the top of the screen.

--Shortcut; (macOS) Command + W, (Windows) Ctrl + W

1-4. Save the program

Try saving this program. If you press the ↓ button, a dialog will appear, and if you press ʻOK`, the program will be downloaded. The download destination depends on the browser settings, but it seems that it is often the "Download" folder.

In this way, the download folder contains files named based on the date and time.

Note that the saved program file is a ** HTML file **. This file contains not only the program part of Ruby, but also all the data to be executed in the browser, and even the image data.

If you want to see what's inside the HTML file, you can check it by opening it in an editor.

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Nyle-canvas</title>
<!-- Nyle-canvas editor v0.8.0 -->
</head>
<body>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/jslib/opal/opal.min.js" onload="Opal.load('opal')"></script>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/jslib/opal/opal-parser_patched.min.js" onload="Opal.load('opal-parser')"></script>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/jslib/opal/native.min.js" onload="Opal.load('native')"></script>
<script type="text/javascript" src="https://spoolkitamura.github.io/nyle-canvas/dev2/nyle-canvas.js"></script>
<script type="text/javascript">
</script>
<script type="text/ruby">
include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code for screen drawing(your draw code here)
  
end
</script>
</body>
</html>

As you can see, the Ruby program is embedded in the HTML file.

Also, since the file is an HTML file, the program can be executed by simply " double-clicking " or "" drag and drop it into any window of the browser "`.

1-5. Rename the saved program

The name of the saved program file can be changed by the OS standard method of renaming the file.

1-6. Load the program

To view or edit the contents of the saved program, drag and drop the program file (HTML file) onto the Nyle-canvas editor screen of your browser.

Then, a dialog opens and asks "Do you want to load the dropped file?", So press ʻOK` to load it.

By the way, if you save the loaded file again, it seems that it will be overwritten with the same name, but in reality it will not be overwritten **, it will be saved with different names such as xxxx (1) .html Will be done. (Detailed behavior depends on the execution environment.)

1-7. Creating a new program

If you want to create a new program, click "Reload" on the Nyle-canvas editor screen of your browser to return to the initial state.

How to "reload":

--Press the " ↻ "button at the top of the browser --Select Menu> File> View> Reload Page --Shortcut; (macOS) Command + R, (Windows) Ctrl + R

1-8. error indication

When you press the execute button (▶ ︎ button), a grammar check is performed, and if an error is found, the panel will notify you before execution.

In this example, an error occurs because ʻend` is missing.

However, even if no error is displayed at this stage, an error may occur at runtime. In that case, it will be displayed in the following console.

1-9. How to open the console

Run-time errors and the results of puts are printed to the browser's console. First, let's display the console.

How to open in Chrome; (** on the execution screen **)

a) Common to macOS and Windows

--Press the F12 (or fn + F12) key

-(Anywhere on the screen); Right click (two-finger click, etc.)> Verification> Select " Console " in the opened developer tools

b) macOS --Select Menu> Display> Development / Management> Javascript Console --Shortcut; Command + ʻOption + J`

c) Windows --Menu ＞ Other Tools ＞ Developer Tools ＞ Select"Console"from the opened Developer Tools

--Shortcut; Ctrl + Shift + J

Reference) How to change the display position of the console

The displayed position of the Chrome console (Developer Tools) may be lower or right depending on the settings.

To change the layout to your liking, click the three vertical dots (enclosed in red) on the right end " ︙ "button, and a menu will appear. Select from the" Dock side "icons.

Here it was displayed on the right side.

1-10. How to use the console

A) Check the error message

You can see the error message when you run the program and an error occurs.

This execution screen is a blank screen due to an error.

Here is the screen that opens the console. The error message is displayed on the red line.

However, this error message can be confusing. (Because Javascript is executed internally through Ruby → Javascript parser Opal.)

At the very least, it's useful enough to confirm "Is there an error now?" Or as a hint for the error.

B) View the output of puts and p (rb_dx00a.html)

The console is also the output destination for puts and p.

`rb_dx00a.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = DX::C_BLACK

puts "Hello!"                  #◆ Addition
p "Hello!"         #◆ Addition

Window.loop do
  #Code for screen drawing(your draw code here)
  
end

When you run this program, Hello to the console!, " Hello! " And you can see the output.

1-11. Help (reference)

Press the "? "Button at the top left of the Nyle-canvas editor screen to open the help (reference) screen.

→ \ [Nyle-canvas] API Reference (DXRuby style) https://spoolkitamura.github.io/nyle-canvas/dev2/site/_man_api_dx/index.html

The API of Nyle-canvas is summarized briefly, so please use it more and more when you are in trouble.

1-12. Pay attention to double-byte characters

Not only Nyle-canvas, but most programming languages do not allow double-byte characters as instructions. In particular, if there are double-byte spaces (blank characters), it will be difficult to find even if an error occurs, so be careful.

1-13. Convenient function (keyboard shortcut)

Since Ace.js is used for the editor part of Nyle-canvas, most keyboard shortcuts of Ace.js can be used.

https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

Here are some features that may be particularly useful.

Find / Replace	Windows	macOS
Search	Ctrl + F	Command + F
Replacement	Ctrl + H	Command + Option + F
Search for	Ctrl + K	Command + G
Search before	Ctrl + Shift + K	Command + Shift + G

Indent	Windows	macOS
Indent	Tab	Tab
Remove indent	Shift + Tab	Shift + Tab

comment	Windows	macOS
Comment / Remove	Ctrl + /	Command + /

1-14. How to program with Nyle-canvas

With Nyle-canvas, you can run your edited program right away without having to save it. Therefore, the method of "rewrite a little and move it a little" is suitable.

Let's do it that way in the following exercises.

2. Nyle-canvas practice

* About `.html file` and `.rb file`

The program that runs on Nyle-canvas is the .html file. (The sample program is in the src / dx_html folder.)

However, in the following explanation, only the program part of Ruby will be listed. (There is a .rb file with the same name in the src / dx_ruby folder.)

2-0. Bring up a window (rb_dx00.html)

As you experienced in 1-3., When you open the Nyle-canvas editor screen, the basic code is already written in advance.

(If you are rewriting, please "reload" the screen as described in "1-7. New program".

`rb_dx00.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

Window.loop do
  #Code for screen drawing(your draw code here)
  
end

By default, a 640 horizontal, 480 vertical, and black window opens.

The coordinates are the origin (x = 0, y = 0) at the upper left, the horizontal (x) increasing to the right, and the vertical (y) increasing downward.

The code written between Window.loop do ~ end is executed 60 times per second.

→ DXRuby Reference: Tutorial 1. Basic form http://mirichi.github.io/dxruby-doc/tutorial/basic.html

2-1. Change the size of the window (rb_dx01.html)

Use Window.width = and Window.height = to resize the window.

Of the programs, those that are executed only the first time and do not need to be executed after that should be written before Window.loop do ~ end.

`rb_dx01.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 200       #◇ Change
Window.height  = 150       #◇ Change
Window.bgcolor = C_BLACK

Window.loop do
  #Code for screen drawing(your draw code here)
  
end

2-2. Change the background color of the window (rb_dx02.html)

Use Window.bgcolor = to change the background color of the window.

To specify the color, see "Information about color" in the "API Reference" that is displayed by pressing the help button in the Nyle-canvas editor.

`rb_dx02.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640       #◇ Change (return)
Window.height  = 480       #◇ Change (return)
Window.bgcolor = C_CYAN    #◇ Change

Window.loop do
  #Code for screen drawing(your draw code here)
  
end

2-3. Display characters on the screen (rb_dx03.html)

To display characters on the screen

Specify the font size (and font name) with font = Font.new (font size),

Window.draw_font (x position, y position," string ", font, {: color => color})

It is displayed with.

`rb_dx03.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK    #◇ Change (return)

font = Font.new(32)         #◆ Addition

Window.loop do
  Window.draw_font(200, 100, "Breakout", font, {:color => C_GREEN})   #◆ Addition
end

2-4. Capture key input (rb_dx04.html)

For key input, use ʻInput.key_down? (Key code constant)`.

For "key code constants", see "Key code information" in Help> API Reference.

`rb_dx04.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

font = Font.new(32)

Window.loop do
  Window.draw_font(150, 100, "Press the A key", font, {:color => C_GREEN})  #◇ Change
  
  if Input.key_down?(K_A)                                        #◆ Addition
    Window.draw_font(300, 250, "A", font, {:color => C_WHITE})   #◆ Addition
  end                                                            #◆ Addition
end

When you press the ʻA key, ʻA is displayed on the screen.

2-5. Display of figures (rb_dx05.html)

Display basic shapes in the window.

You can display lines, straight lines, squares, and circles. To display, use the following commands respectively.

--Point: Window.draw_pixel --Straight line: Window.draw_line --Square: Window.draw_box --Square (fill): Window.draw_box_fill --Circle: Window.draw_circle --Circle (fill): Window.draw_circle_fill

A separate ʻImage class` is provided for loading, moving, and manipulating images.

`rb_dx05.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK


Window.loop do
  Window.draw_box_fill(100, 100, 540, 380, C_YELLOW)   #◇ Change
end

2-6. Image loading (rb_dx06.html)

Nyle-Canvas handles image files a little differently than DXRuby.

First, drag and drop the image file you want to use directly onto the editor screen. Then, the image file will be copied into Nyle-canvas and will be displayed as a list of image data at the bottom of the editor screen.

As a test, drag and drop the ʻapple.png file in the src / image folder` to the editor screen.

The image file ʻapple.png` has been copied and displayed in the list. (* Uppercase letters may be lowercase.)

By the way, the image data in the list can be retrieved by drag and drop the image icon or by right-click (two-finger click, etc.)> Save image as``. (* The file name may be download`.)

Also, if you press the " Cancel "button on the right side of the image, the image data you no longer need will disappear from the list.

In this way, managing image files and programs in an integrated manner is a major feature of Nyle-canvas.

Next, use ʻImage.load (image file name)to load and use the image file from the program. Here, thepath name etc. that indicates the location is unnecessary` before the image file name.

The loaded image will be in the ʻImage class`.

To display the ʻImage class, use Window.draw (x coordinate, y coordinate, image)`. The coordinate reference is at the upper left of the image.

`rb_dx06.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')   #◆ Addition

Window.loop do
  Window.draw(100, 100, apple)    #◆ Addition
end

Reference) What happens to the image data when a program containing images is saved?

Open the saved program (HTML file) with your usual editor. (Partially omitted)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Nyle-canvas</title>
<!-- Nyle-canvas editor v0.8.0 -->
</head>
<body>
<script>
(abridgement)
</script>
<script type="text/javascript">
Store.createImage('apple.png', 100, 100, 'data:image/png;base64,iVBORw（...Omitted on the way...）SuQmCC')
</script>
<script type="text/ruby">
include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')   #◆ Addition

Window.loop do
  Window.draw(100, 100, apple)    #◆ Addition
end
</script>
</body>
</html>

In this way, in the part of 'apple.png', 100, 100,' data: image / png; base64, iVBORw ....', the image data of ʻapple.png` is Base64 encoded and together. You can see that it is saved in.

Therefore, it is a mechanism that allows you to concentrate on programming without worrying about managing the image data used in the program.

Note) About transparency of images

In dev2 released on May 30, 2020, the white color of the image is automatically made transparent at the time of ʻImage.load`.

2-7. Image scaling (rb_dx07.html)

If you want to zoom in / out the image, use Window.draw_scale (x position, y position, image, horizontal scaling factor, vertical scaling factor).

`rb_dx07.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')

Window.loop do
  Window.draw_scale(100, 100, apple, 0.5, 0.5)    #◇ Change
end

2-8. Move with cursor keys (rb_dx08.html)

When the cursor key is pressed, ʻInput.x in the horizontal direction and ʻInput.y in the vertical direction change to -1, 0, 1.

By using this, you can move it on the screen.

`rb_dx08.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')
x = 200                       #◆ Addition
y = 200                       #◆ Addition

Window.loop do
  x = x + Input.x             #◆ Addition
  y = y + Input.y             #◆ Addition
  
  Window.draw(x, y, apple)    #◇ Change
end

2-09. Move with cursor keys (different writing style) (rb_dx09.html)

Another way to write ball.x = ball.x + Input.x,

Let's rewrite it as ball.x + = Input.x. It has the same meaning, but since it requires fewer characters, it may reduce mistakes.

`rb_dx09.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')
x = 200
y = 200

Window.loop do
  x += Input.x               #◇ Change
  y += Input.y               #◇ Change
  
  Window.draw(x, y, apple)
end

2-10. Move with mouse (rb_dx10.html)

The x-coordinate and y-coordinate of the mouse can be obtained with ʻInput.mouse_x and ʻInput.mouse_y, respectively.

In the case of an image, the coordinate reference is at the upper left.

`rb_dx10.rb`


include DX
#Code for initial setting(your setup code here)
Window.width   = 640
Window.height  = 480
Window.bgcolor = C_BLACK

apple = Image.load('apple.png')


Window.loop do
  x = Input.mouse_x               #◇ Change
  y = Input.mouse_y               #◇ Change
  
  Window.draw(x, y, apple)
end

This is the end of Nyle-canvas practice.

Application problem

Now that you're used to using Nyle-canvas, let's make a "breakout"!

--Ruby programming with just a browser: "Breakout" (Nyle-canvas edition) that creates step by step --Qiita https://qiita.com/noanoa07/items/7d2f8e0354b9ad119d64

Start with a browser Ruby game programming: Introduction to Nyle-canvas (DXRuby style)

Overview

Technical explanation

What is Nyle-canvas?

Features of Nyle-canvas

Operating environment required for Nyle-canvas

Technical elements

Nyle-canvas (DXRuby style)

Main differences from DXRuby API

・ There is no ʻImage.new`

・ There is no Sprite class

・ How to specify the color

・ ʻImage.set_color_key (color)` is not supported

-There is no Window.caption =

-When writing multiple Window.loop do ~ end, do not write them in parallel.

・ Window.close

・ ʻExit` does not close the window

・ Only one program file

・ Partially supports touch panel operation

・ Sound is not supported

Nyle-canvas homepage

Reference site

Related sites of this text

Execution environment of this text

Corresponding version

Source code of this text

License of this text

Program explanation

1. 1. How to use Nyle-canvas

1-1. Nyle-canvas editor

1-2. Explanation of the editor screen

1-3. Program execution (rb_dx00.html)

rb_dx00.rb

1-3a. Program rerun

1-3b. Close the execution screen

1-4. Save the program

1-5. Rename the saved program

1-6. Load the program

1-7. Creating a new program

1-8. error indication

1-9. How to open the console

a) Common to macOS and Windows

Reference) How to change the display position of the console

1-10. How to use the console

A) Check the error message

B) View the output of puts and p (rb_dx00a.html)

rb_dx00a.rb

1-11. Help (reference)

1-12. Pay attention to double-byte characters

1-13. Convenient function (keyboard shortcut)

1-14. How to program with Nyle-canvas

2. Nyle-canvas practice

* About .html file and .rb file

2-0. Bring up a window (rb_dx00.html)

rb_dx00.rb

2-1. Change the size of the window (rb_dx01.html)

rb_dx01.rb

2-2. Change the background color of the window (rb_dx02.html)

rb_dx02.rb

2-3. Display characters on the screen (rb_dx03.html)

rb_dx03.rb

2-4. Capture key input (rb_dx04.html)

rb_dx04.rb

2-5. Display of figures (rb_dx05.html)

rb_dx05.rb

2-6. Image loading (rb_dx06.html)

rb_dx06.rb

Reference) What happens to the image data when a program containing images is saved?

Note) About transparency of images

2-7. Image scaling (rb_dx07.html)

rb_dx07.rb

2-8. Move with cursor keys (rb_dx08.html)

rb_dx08.rb

2-09. Move with cursor keys (different writing style) (rb_dx09.html)

rb_dx09.rb

2-10. Move with mouse (rb_dx10.html)

rb_dx10.rb

Application problem

・ There is no `Sprite class`

-There is no `Window.caption =`

-When writing multiple `Window.loop do ~ end`, do not write them in parallel.

・ `Window.close`

`rb_dx00.rb`

`rb_dx00a.rb`

* About `.html file` and `.rb file`

`rb_dx00.rb`

`rb_dx01.rb`

`rb_dx02.rb`

`rb_dx03.rb`

`rb_dx04.rb`

`rb_dx05.rb`

`rb_dx06.rb`

`rb_dx07.rb`

`rb_dx08.rb`

`rb_dx09.rb`

`rb_dx10.rb`