Научитесь программировать для детей и подростков. Создайте игру-угадайку на Javascript

Авторы отмечают:

Этот учебный материал предназначен для молодых людей, плохо знакомых с программированием, для прохождения с помощью учителя, однако он подходит для начинающих всех возрастов, которые ищут основанный на проектах метод обучения кодированию на Javascript путем создания игры.

Что такое код?

Проще говоря, код — это то, что вы пишете, чтобы сообщить компьютерам, что делать. Если вы хотите отправить ракету на Марс, вы пишете код, сообщающий компьютерам, как это сделать. Если вы хотите создать место, где все ваши друзья могли бы проводить время в Интернете, например Discord или Instagram, вы пишете код. Может быть, вы хотите создать игру вроде Call of Duty, Apex Legends или Stardew Valley? Затем вы пишете код.

Люди, которые пишут код, носят разные имена в зависимости от того, что именно они создают. Если вы создаете игры, вас часто называют разработчиком игр. Если вы создаете мобильные приложения для телефонов, вас часто называют мобильным разработчиком. Если вы пишете веб-сайты, то вас часто называют веб-разработчиком.

Однако, если вы хотите, чтобы один термин описывал всех людей, которые пишут код, то инженер-программист вполне подойдет.

Как вы пишете код?

Код написан на разных языках (это можно сравнить с изучением французского и английского). Существует много популярных языков, и каждый из них больше подходит для разных целей. В этой игре вы будете использовать Javascript. Javascript — это язык программирования, который используется почти всеми веб-сайтами (около 97,2%).

При написании кода вы часто будете использовать редактор кода. Редактор кода — это инструмент, облегчающий написание кода. Мы будем использовать онлайн-редактор кода под названием Repl.

Давайте создадим игру вместе.

Следуйте пронумерованным инструкциям, чтобы начать создавать игру!

1. Начните с перехода на https://replit.com/languages/javascript
   Вы должны увидеть веб-сайт, который выглядит следующим образом

2. Нажмите зеленую кнопку воспроизведения в центре экрана.
Вы должны увидеть текст «Hello World» справа. Если что-то пойдет не так, обновите страницу и повторите попытку.

Обратите внимание, как справа написано «Привет, мир»? Вы можете заставить компьютер говорить что угодно. Просто не забудьте заключить то, что вы пишете, в кавычки ‘’.

3. Передайте компьютеру приветствие.
Напишите console.log('Hello, Brooklin'), но замените Бруклин своим именем.

Хороший! Теперь приступим к созданию игры-угадайки. Я постараюсь, чтобы игрок угадал мое любимое животное, но вы можете предложить ему угадать все, что захотите! Может ваш любимый цвет? Число от 1 до 10? это может быть что угодно.

4. Запишите свой ответ на догадку.

• Начните с ввода let в коде с новой строки.
  Определяет переменную. Переменная — это способ хранения информации в коде.
  Эта переменная будет хранить правильный ответ на вашу игру в угадайку.

let

• После let введите пробел и напишите имя переменной.
  Название может быть любым! Я сделаю это myFavoriteAnimal. Мы обычно используем заглавные буквы в именах, состоящих из нескольких слов, после первого, чтобы код было легче читать.

let myFavoriteAnimal

• Установите переменную в свой ответ, используя =.
  Поскольку мои любимые животные — собаки, я буду писать = «собака».

let myFavoriteAnimal = "dog"

Вы можете оставить или удалить console.log из предыдущего.

Теперь ваш код должен выглядеть примерно так:

5. Примите предположение игрока.

• Начните с ввода function в следующей строке.

function

• После function введите пробел и напишите имя функции.
  Это будет название вашей игры, так что вы можете назвать ее как угодно, как let раньше. Я назову свою функцию угадыватьMyFavoriteAnimal, так как это то, что делает моя игра.

function guessMyFavoriteAnimal

• Сразу после названия функции добавьте круглые скобки. ()

function guessMyFavoriteAnimal()

• В круглых скобках () напишите название параметра.
  Параметр — это значение, которое выберет ваш игрок. Точно так же, как когда вы написали переменную ранее, вы можете назвать ее как угодно. Я собираюсь упростить задачу и назову свой параметр playerGuess.

function guessMyFavoriteAnimal(playerGuess)

• Добавьте пробел и несколько фигурных скобок. {}
  Вы можете писать фигурные скобки, удерживая Shift и нажимая клавиши [ и ].

function guessMyFavoriteAnimal(playerGuess) {
}

• Переместите вашу переменную из предыдущей в эту функцию.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
}

6. Сообщите игроку, верно ли его предположение или нет.

• Начните с ввода ifв следующей строке между фигурными скобками.
  if используется для управления запуском определенных частей кода. В этом случае мы сообщим игроку, правильно ли он ответил.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if
}

• Добавьте несколько круглых скобок. ()

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if ()
}

• Напишите название переменной ответа в этих скобках.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal)
}

• Добавьте пробел и напишите === (равно) после ответа.

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal ===)
}

• Добавьте еще один пробел и напишите название догадки вашего игрока в скобках

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess)
}

• Добавьте несколько фигурных скобок {}как function раньше

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      
   }
}

• В фигурных скобках {} сообщите игроку, что он выиграл, используя console.log.
  Вы можете написать любое сообщение, которое вы хотите, когда он выиграет! Я напишу: «Поздравляю! Вы правильно поняли!».

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   }
}

• После закрывающей фигурной скобки if напишите else .

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   }
}

• Добавьте фигурные скобки, как с предыдущими if и function .

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   } else {
      
   }
}

• Сообщите игроку, что он неправильно ответил. console.log .
  Вы можете написать любое сообщение! Я напишу «Вы ошиблись, попробуйте еще раз!».

function guessMyFavoriteAnimal(playerGuess) {
   let myFavoriteAnimal = "dog"
   if (myFavoriteAnimal === playerGuess) {
      console.log("Congrats! You got it right!")
   } else {
      console.log("You got it wrong, try again!") 
   }
}

7. Попросите игрока начать игру и ввести предположение.

• С новой строки напишите название своей игры ниже.
  Оно должно совпадать со словом после function, которое было раньше.

guessMyFavoriteAnimal

• Добавьте круглые скобки () сразу после.

guessMyFavouriteAnimal()

• Проверьте свою игру с неправильным предположением.
  В круглых скобках ваш игрок введет предположение. Это будет значение параметраplayerGuess из предыдущего. Давайте убедимся, что это работает, прежде чем кто-нибудь сыграет в нее.

guessMyFavoriteAnimal("cat")

• Нажмите зеленую кнопку воспроизведения, чтобы запустить игру.
  Вы должны увидеть сообщение о проигрыше игрока в правой части страницы. например: «Ты ошибся, попробуй еще раз!»
  
  Вы также можете увидеть сообщение об ошибке. Вы можете прокомментировать эту статью со своим кодом и своей ошибкой, и я постараюсь помочь! Или, если вы выполняете этот урок с помощью учителя, вы можете попросить его помочь.

• Проверьте свою игру с правильным предположением.

guessMyFavoriteAnimal("cats")

• Нажмите зеленую кнопку воспроизведения, чтобы запустить игру.
  На этот раз вы должны увидеть сообщение об успешном завершении. Для меня я вижу «Поздравляю! ты правильно понял!»

8. Настройте свою игру для игрока и играйте!

• Удалите текст внутри кавычек, чтобы игра была готова для игрока.

guessMyFavoriteAnimal("")

• Скройте все в фигурных скобках внутри function, нажав кнопку слева от function .
  Это сделано для того, чтобы игрок не мог видеть ваш ответ.

Ваша игра должна выглядеть так, но со всеми вашими изменениями.

Убедитесь, что вы сказали своему игроку ввести свое предположение в кавычках «».

Я надеюсь, что вы получите удовольствие и счастливое кодирование!

Дальнейшее обучение

Отличная работа! Вы закончили этот урок и создали свою собственную игру на Javascript!

Обучение программированию — это создание крутых вещей, которые вас вдохновляют! Вы найдете множество отличных руководств в Интернете, но один из лучших способов стать лучше — попытаться создать свой собственный проект.

Вот несколько идей для начала!

• Можете ли вы изменить функцию угадывания числа, чтобы попытаться угадать свое любимое животное?
• Можете ли вы сделать правильный ответ случайным?
• Можете ли вы написать код, который будет угадывать каждое число от 1 до 10? а как же 100? (подсказка: здесь, вероятно, используются циклы for)
• Можете ли вы изменить функцию угадывания числа, чтобы игрок вместо этого отвечал на математические вопросы?

Другие источники

Академия Хана: введение в программирование https://www.khanacademy.org/computing/computer-programming/programming#intro-to-programming