MDN ブロックくずしゲームでウェブゲーム開発に入門してみた。その1

放置しているのもどうかと思うので半年ぶりに書きます。

ウェブゲーム開発に入門

MDN web docs にある「そのままのJavaScriptを使ったブロックくずしゲーム」の教材でウェブゲーム開発に入門してみる。

PureScript+Halogen

この教材は pure JavaScript(そのままのJavaScript)とあるけど, そのままのJavaScript(UIフレームワークなし)は個人的にしんどいので変更します。

	Out	In
プログラミング言語	JavaScript	PureScript
UIフレームワーク	無し	Halogen

PureScript ってのは簡単にいうと
ビルドするとJavaScriptを得られる正格評価のHaskell。

開発環境

1
2
3
4
5
6
Microsoft Windows [Version 10.0.22000.613]
(c) Microsoft Corporation. All rights reserved.

C:\Users\aki>wsl -l -v
  NAME            STATE           VERSION
* Ubuntu-20.04    Running         2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
$ cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04 (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy

このWindows 11 + WSL2 + Ubuntuに
https://github.com/purescript/documentation/blob/master/guides/Getting-Started.md
を済ませた開発環境で始める。

Halogen example

Halogen example の Basicを動かしてみる。

1
2
3
4
5
6
7
8
9
aki: $ git clone https://github.com/purescript-halogen/purescript-halogen.git
Cloning into 'purescript-halogen'...
remote: Enumerating objects: 9892, done.
remote: Counting objects: 100% (385/385), done.
remote: Compressing objects: 100% (208/208), done.
remote: Total 9892 (delta 195), reused 325 (delta 167), pack-reused 9507
Receiving objects: 100% (9892/9892), 3.91 MiB | 5.70 MiB/s, done.
Resolving deltas: 100% (6005/6005), done.
aki:~$ cd purescript-halogen/examples/basic/

1
2
3
4
5
6
7
aki:~/purescript-halogen/examples/basic$ npm install
aki:~/purescript-halogen/examples/basic$ npm run example-basic

省略...

[info] Build succeeded.
[info] Bundle succeeded and output file to examples/basic/dist/example.js

1
2
3
aki:~/purescript-halogen/examples/basic$ cd dist/
aki:~/purescript-halogen/examples/basic/dist$ wslpath -w .
\\wsl.localhost\Ubuntu-20.04\home\aki\purescript-halogen\examples\basic\dist

Webブラウザで上のパスを開いて index.htmlを開く。ボタンがあってOnOffできることを確認出来たらOK。

自分の書くコードの置き場

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
aki:~/purescript-halogen/examples/basic/dist$ cd
aki:~$ mkdir breakout
aki:~$ cd breakout
aki:~/breakout$ mkdir lesson01
aki:~/breakout$ cd lesson01/
aki:~/breakout/lesson01$ spago init
aki:~/breakout/lesson01$ spago run

省略...

[info] Build succeeded.
🍝

purescript-halogen/examples/basic/src/ にある Main.purs と Button.purs を src/ にコピーする。

1
2
3
4
aki:~/breakout/lesson01$ cp ~/purescript-halogen/examples/basic/src/* src/
aki:~/breakout/lesson01$
aki:~/breakout/lesson01$ ls src
Button.purs  Main.purs

vscodeを起動する

1
aki:~/breakout/lesson01$ code .

赤線が出ている。そういえばVSCode拡張機能をいれていた。 lesson01-2

これは halogen が無いというエラーだから, とりあえずターミナルから halogen を入れる。

1
2
aki:~/breakout/lesson01$ spago install halogen
aki:~/breakout/lesson01$ spago build

Main.pursを保存すると赤線が消える。

1
2
3
aki:~/breakout/lesson01$ spago bundle-app
[info] Build succeeded.
[info] Bundle succeeded and output file to index.js

これで index.js が出来た。

続いて purescript-halogen/examples/dists/index.html を ./ にコピーする。

1
2
3
4
5
aki:~/breakout/lesson01$ ls
index.js  output  packages.dhall  spago.dhall  src  test
aki:~/breakout/lesson01$ cp ~/purescript-halogen/examples/basic/dist/index.html ./
aki:~/breakout/lesson01$ ls
index.html  index.js  output  packages.dhall  spago.dhall  src  test

VSCode上で index.htmlを開いて
<script src="example.js"></script>
と書かれているところを
<script src="index.js"></script>
にして保存する。

Webブラウザでこの index.htmlを開く。
同じくボタンがあってOnOffできることを確認出来たらOK。

lesson01

準備が済んだので Canvasを作ってその上に描画するを始めます。

ゲームのHTML

チュートリアル通りならこのとおりだけど

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	// JavaScriptのコードがここに入ります
</script>

</body>
</html>

中身はプログラムの方で用意するので, index.htmlはこのくらいにする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Gamedev Canvas Workshop</title>
</head>

<body>
  <script src="./index.js"></script>
</body>

</html>

これをindex.htmlに保存する。

ブロックくずしゲームのUIコンポーネント

今あるButton.purs は不要なので削除して Breakout.purs を新規作成する。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
module Breakout (component) where

import Prelude
import CSS (background, block, display, margin, marginBottom, marginLeft, marginRight, marginTop, padding, px, rgb)
import CSS.Common (auto)
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Effect.Aff.Class (class MonadAff)
import Graphics.Canvas (CanvasElement)
import Graphics.Canvas as Canvas
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.CSS (style)
import Halogen.HTML.Properties as HP
import Math as Math

canvasId :: String
canvasId = "myCanvas"

type State
  = {}

data Action
  = Initialize

component :: forall query input output m. MonadAff m => H.Component query input output m
component =
  H.mkComponent
    { initialState
    , render
    , eval:
        H.mkEval
          $ H.defaultEval
              { handleAction = handleAction
              , initialize = Just Initialize
              }
    }

initialState :: forall i. i -> State
initialState _ = {}

render :: forall m. State -> H.ComponentHTML Action () m
render _ =
  HH.main
    [ style do
        margin (px 0.0) (px 0.0) (px 0.0) (px 0.0)
        padding (px 0.0) (px 0.0) (px 0.0) (px 0.0)
    ]
    [ HH.canvas
        [ style do
            background (rgb 238 238 238)
            display block
            marginTop (px 0.0)
            marginRight auto
            marginBottom (px 0.0)
            marginLeft auto
        , HP.id canvasId
        , HP.width 480
        , HP.height 320
        ]
    ]

handleAction :: forall output m. MonadAff m => Action -> H.HalogenM State Action () output m Unit
handleAction = case _ of
  Initialize -> do
    maybeCanvas <- H.liftEffect $ Canvas.getCanvasElementById canvasId
    H.liftEffect
      $ case maybeCanvas of
          Nothing -> pure unit
          Just canvas -> draw canvas

draw :: CanvasElement -> Effect Unit
draw canvas = do
  ctx <- Canvas.getContext2D canvas
  --
  Canvas.beginPath ctx
  Canvas.rect ctx
    $ { x: 20.0
      , y: 40.0
      , width: 50.0
      , height: 50.0
      }
  Canvas.setFillStyle ctx "#FF0000"
  Canvas.fill ctx
  Canvas.closePath ctx
  --
  Canvas.beginPath ctx
  Canvas.arc ctx
    $ { x: 240.0
      , y: 160.0
      , radius: 20.0
      , start: 0.0
      , end: Math.pi * 2.0
      }
  Canvas.setFillStyle ctx "green"
  Canvas.fill ctx
  Canvas.closePath ctx
  --
  Canvas.beginPath ctx
  Canvas.rect ctx
    $ { x: 160.0
      , y: 10.0
      , width: 100.0
      , height: 40.0
      }
  Canvas.setStrokeStyle ctx "rgba(0, 0, 255, 0.5)"
  Canvas.stroke ctx
  Canvas.closePath ctx

Main.purs をこう書き換える。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
module Main where

import Prelude
import Effect (Effect)
import Breakout as Breakout
import Halogen.Aff as HA
import Halogen.VDom.Driver (runUI)

main :: Effect Unit
main =
  HA.runHalogenAff do
    body <- HA.awaitBody
    runUI Breakout.component unit body

spagoの指示通り CSS Halogen-CSS Canvas Math Aff Maybe を入れる。

1
aki:~/breakout/lesson01$ spago install css halogen-css canvas math aff maybe

Canvasの基本

チュートリアルで説明されている「Canvasの基本部分」はここ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
draw :: CanvasElement -> Effect Unit
draw canvas = do
  ctx <- Canvas.getContext2D canvas
  --
  Canvas.beginPath ctx
  Canvas.rect ctx
    $ { x: 20.0
      , y: 40.0
      , width: 50.0
      , height: 50.0
      }
  Canvas.setFillStyle ctx "#FF0000"
  Canvas.fill ctx
  Canvas.closePath ctx
  --
  Canvas.beginPath ctx
  Canvas.arc ctx
    $ { x: 240.0
      , y: 160.0
      , radius: 20.0
      , start: 0.0
      , end: Math.pi * 2.0
      }
  Canvas.setFillStyle ctx "green"
  Canvas.fill ctx
  Canvas.closePath ctx
  --
  Canvas.beginPath ctx
  Canvas.rect ctx
    $ { x: 160.0
      , y: 10.0
      , width: 100.0
      , height: 40.0
      }
  Canvas.setStrokeStyle ctx "rgba(0, 0, 255, 0.5)"
  Canvas.stroke ctx
  Canvas.closePath ctx

ブラウザーで確認すると

GitHubリポジトリ

コードはGitHub上にあります。
https://github.com/ak1211/breakout

つづく

よてい