如何在 Elm 中正确呈现对象列表？

问题描述

我正在尝试在 Elm 中创建 Snake 游戏。到目前为止，我拥有的是蛇的模型、更新函数和视图函数。

在更新函数中，我切断了蛇的最后一部分，并添加了一个新的部分作为它的头部。

然而，当渲染蛇时，它会将它的所有部分（圆圈）折叠成一个圆圈。这是为什么，我该如何解决？

import Playground exposing (..)

type alias Position = 
  { x : Number,y : Number
  }

type alias SnakePart = 
  { position : Position
  }

type alias Snake = List SnakePart 

updateSnakePart : SnakePart -> Computer -> SnakePart

updateSnakePart ({ position } as snakePart) computer = 
    if computer.keyboard.up then 
      { snakePart | position = { position | y = position.y + 40 } }
    else if computer.keyboard.down then 
      { snakePart | position = { position | y = position.y - 40 } }
    else if computer.keyboard.left then 
      { snakePart | position = { position | x = position.x - 40 } }
    else if computer.keyboard.right then 
      { snakePart | position = { position | x = position.x + 40 } }
    else
      snakePart

updateSnake : Computer -> Snake -> Snake

updateSnake computer snake = let 
                                snakeHeadMaybe = List.head snake
                              in
                                case snakeHeadMaybe of
                                  nothing -> []
                                  Just snakeHead ->
                                    updateSnakePart snakeHead computer :: List.take (List.length snake - 1) snake

initialSnake = 
  [ { position = { x = 0,y = 0 } },{ position = { x = 40,{ position = { x = 80,y = 0 } }
  ]

main =
  game view updateSnake initialSnake 

view computer snake =
  List.map (\snakePart -> circle blue 20 |> move snakePart.position.x snakePart.position.y) snake

编辑

蛇的方向现在烘焙到游戏状态。然而，现在它只是朝着一个方向前进，似乎对箭头键没有反应。

import Playground exposing (..)

type alias Position = 
  { x : Number,y : Number
  }

type Direction = Up | Down | Left | Right

type alias SnakePart = 
  { position : Position
  }
  
type alias Snake = List SnakePart 

type alias Game = 
  { snake: Snake,direction: Direction
  }

updateSnakePart : SnakePart -> Direction -> SnakePart

updateSnakePart ({ position } as snakePart) direction = 
  case direction of
    Up -> { snakePart | position = { position | y = position.y + 40 } }
    Down -> { snakePart | position = { position | y = position.y - 40 } }
    Left -> { snakePart | position = { position | x = position.x - 40 } }
    Right -> { snakePart | position = { position | x = position.x + 40 } }

updateDirection direction computer = 
  if computer.keyboard.up then 
    Up
  else if computer.keyboard.down then 
    Down
  else if computer.keyboard.left then 
    Left
  else if computer.keyboard.right then 
    Right
  else
    direction

updateGame : Computer -> Game -> Game

updateGame computer game = 
  let 
    snake = game.snake
    snakeHeadMaybe = List.head snake
    direction = updateDirection game.direction computer
  in
    case snakeHeadMaybe of
      nothing -> { snake = [],direction = Up }
      Just snakeHead ->
        { snake = updateSnakePart snakeHead direction :: List.take (List.length snake - 1) snake,direction = direction
        }

initialGame = 
  { snake = 
    [ { position = { x = 0,y = 0 } }
    ],direction = Up
  }
    
  
main =
  game view updateGame initialGame 

view computer game =
  List.map (\snakePart -> circle blue 20 |> move snakePart.position.x snakePart.position.y) game.snake

代码有什么问题？另外，有没有办法减慢更新频率？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）