刚开始玩榆树。
我有以下榆树代码:
import Html exposing (..)
import Html.Attributes
import Html.Events exposing (..)
import List
import Random
import Svg exposing (..)
import Svg.Attributes exposing (..)
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- MODEL
type alias Model =
{ dieFace1 : Int
, dieFace2: Int
}
init : ( Model, Cmd Msg )
init =
( Model 2 5, Cmd.none )
-- UPDATE
type Msg
= Roll
| NewFace Int
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Roll ->
( model, Random.generate NewFace (Random.int 1 6) )
NewFace newFace ->
( Model newFace newFace, Cmd.none )
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
-- VIEW
view : Model -> Html Msg
view model =
div []
[ h1 [] [ Html.text (toString (model.dieFace1 + model.dieFace2)) ]
, svg
[ width "120", height "120", viewBox "0 0 120 120", fill "white", stroke "black", strokeWidth "3", Html.Attributes.style [ ( "padding-left", "20px" ) ] ]
(List.append
[ rect [ x "1", y "1", width "100", height "100", rx "25", ry "25" ] [] ]
(svgCirclesForDieFace model.dieFace1)
)
, svg
[ width "120", height "120", viewBox "0 0 120 120", fill "white", stroke "black", strokeWidth "3", Html.Attributes.style [ ( "padding-left", "20px" ) ] ]
(List.append
[ rect [ x "1", y "1", width "100", height "100", rx "25", ry "25" ] [] ]
(svgCirclesForDieFace model.dieFace2)
)
, br [] []
, button [ onClick Roll ] [ Html.text "Roll" ]
]
svgCirclesForDieFace : Int -> List (Svg Msg)
svgCirclesForDieFace dieFace =
case dieFace of
1 ->
[ circle [ cx "50", cy "50", r "10", fill "black" ] [] ]
2 ->
[ circle [ cx "25", cy "25", r "10", fill "black" ] []
, circle [ cx "75", cy "75", r "10", fill "black" ] []
]
3 ->
[ circle [ cx "25", cy "25", r "10", fill "black" ] []
, circle [ cx "50", cy "50", r "10", fill "black" ] []
, circle [ cx "75", cy "75", r "10", fill "black" ] []
]
4 ->
[ circle [ cx "25", cy "25", r "10", fill "black" ] []
, circle [ cx "75", cy "25", r "10", fill "black" ] []
, circle [ cx "25", cy "75", r "10", fill "black" ] []
, circle [ cx "75", cy "75", r "10", fill "black" ] []
]
5 ->
[ circle [ cx "25", cy "25", r "10", fill "black" ] []
, circle [ cx "75", cy "25", r "10", fill "black" ] []
, circle [ cx "25", cy "75", r "10", fill "black" ] []
, circle [ cx "75", cy "75", r "10", fill "black" ] []
, circle [ cx "50", cy "50", r "10", fill "black" ] []
]
6 ->
[ circle [ cx "25", cy "20", r "10", fill "black" ] []
, circle [ cx "25", cy "50", r "10", fill "black" ] []
, circle [ cx "25", cy "80", r "10", fill "black" ] []
, circle [ cx "75", cy "20", r "10", fill "black" ] []
, circle [ cx "75", cy "50", r "10", fill "black" ] []
, circle [ cx "75", cy "80", r "10", fill "black" ] []
]
_ ->
[ circle [ cx "50", cy "50", r "50", fill "red", stroke "none" ] [] ]
它呈现两个骰子SVG项目,显示值为2和5。
使用Roll功能,我试图为每个骰子显示一个随机数。现在,发生的事情是两个骰子都获得了相同的价值。我不太确定如何为每个骰子分配不同的随机数。
欣赏任何想法。感谢。
答案 0 :(得分:4)
您可以使用Random.pair
生成2元组的值。您需要更新NewFace
以存储2个元组的Int
值:
| NewFace (Int, Int)
然后像这样修改update
:
Roll ->
( model, Random.generate NewFace (Random.pair (Random.int 1 6) (Random.int 1 6))
NewFace (a, b) ->
( Model a b, Cmd.none )