A2 · 第5集 · 7:36

键盘控制流畅移动

本集讲解如何用键盘方向键实现角色的流畅移动,对比单次触发与持续检测的区别。

来源:ericgrisperez / tube-numerique-educatif.apps.education.fr · 许可:CC BY 4.0

字幕

  1. Bonjour à tous, dans cette vidéo nous allons continuer notre travail sur le

    大家好,本期视频我们将继续学习小精灵的移动。

  2. déplacement des lutins.

    小精灵的移动。

  3. Nous allons organiser une course entre ces deux singes.

    我们将组织一场这两只猴子之间的赛跑。

  4. J'ai préparé un programme pour chacun.

    我分别为它们准备了一个程序。

  5. Dans chaque programme, lorsque la flèche droite du clavier est pressée,

    在每个程序中,当按下键盘右箭头键时,

  6. le singe doit se diriger vers la droite de l'écran en avançant de dix pixels.

    猴子应向屏幕右侧移动十像素。

  7. Attention, trois, deux, un, c'est parti!

    注意:三、二、一,开始!

  8. Le singe rouge a gagné.

    红色猴子获胜了。

  9. Mais comment est- ce possible alors que chaque singe avance de dix pixels à chaque

    但这是怎么回事呢?毕竟每次按下右箭头键,

  10. fois que la flèche droite est appuyée?

    两只猴子都只前进十像素啊?

  11. Il s'agit ici du temps de réaction de l'ordinateur.

    这涉及计算机的反应时间。

  12. Un des deux programmes est optimisé pour que l'ordinateur donne rapidement les

    其中一个程序经过优化,使计算机能快速

  13. instructions au lutin.

    向小精灵发出指令。

  14. C'est à dire que le programme utilise des blocs qui demandent à l'ordinateur de

    也就是说,该程序使用了一些代码块,让计算机特别关注键盘上的右箭头键。

  15. rester attentif particulièrement à la touche flèche droite du clavier.

    特别关注键盘上的右箭头键。

  16. Regardons de plus près ces deux programmes.

    我们来更仔细地观察这两个程序。

  17. Le premier programme, celui du singe marron,

    第一个程序,即棕色猴子的程序,

  18. est celui que nous connaissons déjà. J'ai ici un bloc qui me permet de positionner

    是我们已经熟悉的。这里有一个代码块,可将我的小精灵定位在屏幕上;

  19. mon lutin sur l'écran, et ensuite ici deux programmes qui permettent de le déplacer.

    之后还有两个程序,用于控制它的移动。

  20. À chaque fois que j'appuie sur la touche,

    每次我按下按键时,

  21. l'ordinateur demande au lutin d'avancer de dix pixels.

    计算机都会命令小精灵前进十像素。

  22. En revanche, lorsque je reste appuyé,

    而当我长按按键时,

  23. l'ordinateur doit prendre un temps pour renvoyer l'instruction au lutin.

    计算机需要花一点时间,才能再次向小精灵发送指令。

  24. En effet, le bloc quand la touche est appuyée est plutôt réservé à un appui unique.

    实际上,“当按键被按下”这个代码块,更适合单次点击操作。

  25. Par exemple dans un jeu, si je dois ramasser un objet ou entrer dans une maison,

    例如在游戏中,如果我要拾取物品或进入房屋,

  26. il est souvent nécessaire d'appuyer sur une touche et pour cela je n'appuie qu'une

    通常只需按一次键,

  27. seule fois. Dans ce cas, ce bloc est utile.

    这时,这个代码块就很有用。

  28. Alors comment faire si j'ai besoin de me déplacer et d'avoir un mouvement rapide et

    那么,如果我需要移动,并且要快速、

  29. fluide sans saccade?

    流畅、无卡顿的运动呢?

  30. Regardons ça ensemble.

    我们一起来看看。

  31. Nous allons ici travailler avec le singe rouge.

    接下来,我们将使用“红猴子”角色进行练习。

  32. Je suis déjà avec le programme qui me permet de le positionner sur la scène à l'aide

    我已经打开了程序,可以借助X、Y坐标

  33. de mes coordonnées X Y pour le placer en haut à gauche de l'écran.

    将它放在屏幕左上方。

  34. Nous allons ensuite demander à l'ordinateur de se concentrer et de regarder si la

    接着,我们将让电脑持续关注并检测:

  35. touche pour se déplacer est appuyée.

    用于移动的按键是否被按下。

  36. Pour commencer, nous allons utiliser un bloc d'événement.

    首先,我们要使用一个事件积木。

  37. Nous allons ici choisir le drapeau vert.

    这里,我们选择绿色旗帜。

  38. C'est lui qui va déclencher notre jeu, c'est pour cela que nous commençons

    正是它会启动我们的游戏,因此我们从这个事件开始。

  39. par cet événement.

    (这是我们的起始点)

  40. Ensuite nous allons poser une condition si alors.

    接下来,我们添加一个‘如果…那么…’条件判断。

  41. Les blocs de conditions sont rangés dans la catégorie contrôle.

    条件类积木位于‘控制’分类中。

  42. Je vais sortir un bloc si alors et je viens l'ajouter à mon drapeau vert.

    我拖出一个‘如果…那么…’积木,并把它连接到绿色旗帜上。

  43. Je vois ici que les deux éléments sont liés comme un puzzle.

    我看到这两个积木像拼图一样严丝合缝地连在一起。

  44. Nous souhaitons ici faire avancer le lutin si la flèche droite est appuyée.

    我们希望:当右箭头键被按下时,角色就向前移动。

  45. Donc nous allons avoir besoin d'une touche de clavier.

    因此,我们需要用到键盘按键。

  46. Ces touches de clavier, nous allons les retrouver dans les capteurs.

    这些键盘按键,在Scratch中属于‘侦测’类别。

  47. Les capteurs dans Scratch sont à l'ordinateur ce que sont les sens pour nous:

    在Scratch中,‘侦测’功能对电脑而言,

  48. la vue, l'ouïe ou encore le toucher.

    就像我们的视觉、听觉或触觉一样。

  49. Grâce aux capteurs, l'ordinateur peut savoir si un lutin est en contact avec un

    借助侦测功能,电脑可以知道一个角色

  50. autre lutin, détecter du son ou encore savoir si une touche de clavier est appuyée.

    是否碰到另一个角色、能否检测到声音,或者某键是否被按下。

  51. Et c'est cela qui va nous intéresser.

    而这,正是我们所需要的。

  52. Je vais choisir le bloc touche pressée,

    我将选择‘按键被按下’这个积木,

  53. qui est juste ici.

    它就在这里。

  54. Je peux voir que j'ai un menu déroulant avec déjà rempli touche espace pressée.

    我可以看到,这里有一个下拉菜单,已预设为‘空格键’被按下。

  55. Mais si j'appuie, j'ai le choix entre toutes les touches de mon clavier.

    但如果我点击它,就能从键盘所有按键中进行选择。

  56. Je vais choisir ici la flèche droite pour avancer vers la droite.

    我将在这里选择右箭头键,让角色向右移动。

  57. Tu peux remarquer ici que la forme du bloc capteur peut venir s'imbriquer dans ma

    你注意到了吗?这个传感器模块的形状,

  58. condition juste après le si.

    恰好能嵌入‘如果’条件语句的后面。

  59. En venant superposer ces deux pièces, je vois un tour blanc apparaître,

    当我把这两块拼在一起时,会看到一个白色圆圈出现,

  60. et si je lâche ma pièce à l'intérieur, elle vient totalement s'imbriquer.

    如果我把模块松开到圆圈内,它就会完全嵌入到位。

  61. En les mettant ensemble, j'obtiens: si la flèche droite est pressée,

    组合后得到:如果右箭头键被按下,

  62. alors. Il ne me reste qu'à donner l'instruction,

    那么……接下来只需添加具体指令,

  63. l'action que devra faire le lutin si la touche flèche droite est appuyée,

    也就是当右箭头键被按下时,角色应执行的动作,

  64. et dans notre cas, on veut que le lutin avance de 10 pixels.

    本例中,我们希望角色向右移动10个像素。

  65. Je vais donc prendre le bloc dans la catégorie mouvement,

    因此,我将从‘运动’分类中选取一个模块,

  66. et je vais récupérer ici.

    并在这里获取它。

  67. Ajouter 10 sur l'axe des abscisses, l'axe x.

    在横轴(X轴)上增加10。

  68. Je teste mon programme.

    我来测试一下程序。

  69. J'appuie sur le drapeau vert et j'appuie sur la flèche droite.

    我点击绿色旗帜,再按右箭头键。

  70. Ici on se rend compte que le singe rouge ne part pas.

    但你会发现,这只红色猴子并没有动。

  71. Il y a donc un problème dans mon programme.

    说明我的程序出了问题。

  72. Il faut se rappeler qu'un ordinateur ne fait que ce qu'on lui demande de faire.

    我们要记住:计算机只会执行我们明确要求它做的事。

  73. Et si je lui demande de regarder uniquement au moment où je presse sur le drapeau

    如果我只是让它在点击绿色旗帜的那一刻,

  74. vert si la touche flèche droite est pressée,

    判断右箭头键是否被按下,

  75. Eh bien, il va faire uniquement cela.

    那它就只做这一件事。

  76. Il faut bien s'imaginer ici que l'ordinateur est en train de se poser la question:

    请试着想象:此时计算机正在问自己一个问题——

  77. est- ce que la touche flèche droite est pressée?

    右箭头键当前是否被按下了?

  78. Ici, le seul moment où il va se poser cette question,

    而它问这个问题的唯一时刻,

  79. c'est quand je clique sur le drapeau vert.

    就是我点击绿色旗帜的那一瞬间。

  80. Moi, je voudrais qu'à partir du moment où je clique sur le drapeau vert,

    我希望能从点击绿色旗帜那一刻起,

  81. il se pose cette question jusqu'à ce que le jeu s'arrête.

    一直持续到游戏停止为止。

  82. Pour cela, nous allons mettre notre programme dans une boucle.

    为此,我们将把程序放入一个循环中。

  83. Les boucles sont rangées dans la catégorie Contrôle.

    循环语句归类于‘控制’类别。

  84. Je vais choisir la boucle Répéter indéfiniment.

    我将选择“无限重复”循环。

  85. Je vais glisser mon programme dans la bouche de la boucle.

    我要把我的程序塞进循环的嘴巴里。

  86. Si je lis maintenant mon programme, l'ordinateur va comprendre ceci:

    如果我现在运行我的程序,计算机将理解以下内容:

  87. quand j'appuie sur le drapeau vert, tu te poses la question en boucle:

    当我点击绿色旗帜时,你将不断重复提问:

  88. est- ce que la flèche droite est pressée?

    右箭头键是否被按下?

  89. Est- ce que la flèche droite est pressée?

    右箭头键被按下了吗?

  90. Est- ce que la flèche droite est pressée?

    右箭头键是否被按下了?

  91. Et si cette touche est pressée, alors tu fais avancer le lutin de dix pixels.

    如果按下这个键,那么角色就向前移动10个像素。

  92. Je teste en appuyant sur le drapeau vert.

    我按绿色旗帜来测试。

  93. Et là, si j'appuie, le singe rouge se déplace,

    这时,如果我按下按钮,红色猴子就会移动。

  94. et on voit qu'il se déplace plus vite que le singe marron.

    我们能看到它比棕色猴子移动得更快。

  95. Parce qu'ici, l'ordinateur est attentif.

    因为在这里,电脑很专注。

  96. Dès que je vais appuyer, il va signaler au lutin l'instruction déplace toi de dix.

    只要我按下,

  97. Alors que sur l'autre programme, en utilisant le quand j'appuie sur la flèche,

    而另一个程序中,当我按下方向键时,

  98. il y aura un petit moment de latence,

    会出现短暂的延迟,

  99. et c'est pour ça que c'est le singe rouge qui gagne la course.

    因此红猴子赢得了比赛。

  100. Nous allons pouvoir faire la même chose en intégrant dans la boucle le déplacement

    我们可以在循环中加入移动操作,

  101. pour aller vers la gauche.

    从而向左移动。

  102. Pour cela, je vais reprendre une condition que je mets à l'intérieur de la boucle.

    为此,我将重新使用一个放在循环内部的条件。

  103. Je vais récupérer un capteur pour la touche flèche gauche que je viens intégrer à

    我要取一个传感器,用于刚集成的左方向键,

  104. l'intérieur. Et je vais ici ajouter un déplacement,

    设备内部。接着,我将在这里添加一个位移,

  105. cette fois- ci toujours sur l'axe X, mais du côté négatif,

    这次仍沿X轴,但朝负方向,

  106. en intégrant moins 10 pixels.

    设置为-10像素。

  107. Ici, je lance à nouveau le jeu,

    这里,我再次启动游戏,

  108. mon singe rouge se déplace immédiatement dès que je touche la touche gauche ou

    我的红色猴子一按左键或

  109. droite, et je gagne à chaque fois,

    右键就立刻移动,

  110. contre le singe marron.

    每次都赢过棕色猴子。

  111. Donc si tu veux faire un déplacement fluide avec un personnage,

    所以,如果你想让角色实现流畅移动,

  112. il faudra retenir ce programme.

    就得记住这个程序。

  113. On commence par le bloc d'événements qui déclenche le jeu,

    我们先从触发游戏的事件积木开始,

  114. dans mon exemple le drapeau vert.

    在我的例子中是绿色旗帜。

  115. Mettre une boucle infinie pour que l'ordinateur reste attentif et se pose

    添加一个无限循环,让电脑持续保持关注,

  116. systématiquement la question est- ce que telle touche ou telle touche est touchée.

    并不断询问:‘某个按键是否被按下?’

  117. J'utilise le bloc capteur pour définir les touches utilisées de mon jeu,

    我用传感器积木来设定游戏中使用的按键,

  118. en l'occurrence flèche droite pour ajouter des pixels sur l'axe des abscisses,

    具体来说,右箭头键用于在x轴上增加像素,

  119. ou la flèche gauche pour retirer des pixels sur l'axe des abscisses.

    左箭头键则用于在x轴上减少像素。

  120. Tu pourras faire la même chose pour aller en haut, en bas,

    你也可以用同样的方法实现向上、向下移动,

  121. sur l'axe des y pour ton jeu.

    即在y轴方向控制你的游戏。