<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Электронный научно-практический журнал «Современные научные исследования и инновации» &#187; alexan0308</title>
	<atom:link href="http://web.snauka.ru/issues/author/alexan0308/feed" rel="self" type="application/rss+xml" />
	<link>https://web.snauka.ru</link>
	<description></description>
	<lastBuildDate>Fri, 17 Apr 2026 07:29:22 +0000</lastBuildDate>
	<language>ru</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Разработка браузерной игры «Поиск предметов» для проверки знаний по английскому языку с помощью JavaScript</title>
		<link>https://web.snauka.ru/issues/2023/08/100665</link>
		<comments>https://web.snauka.ru/issues/2023/08/100665#comments</comments>
		<pubDate>Mon, 21 Aug 2023 10:27:58 +0000</pubDate>
		<dc:creator>alexan0308</dc:creator>
				<category><![CDATA[05.00.00 ТЕХНИЧЕСКИЕ НАУКИ]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[веб-приложение]]></category>
		<category><![CDATA[дополнительное образование детей]]></category>
		<category><![CDATA[поиск предметов]]></category>

		<guid isPermaLink="false">https://web.snauka.ru/issues/2023/08/100665</guid>
		<description><![CDATA[Изучение иностранного языка – достаточно трудоемкое занятие, тем более для ребенка. Заинтересовать его можно, облачив обучение в игровую форму. Интерактивные игры несут в себе образовательный потенциал, создают условия для проявления учащимися учебной инициативы [1]. Предлагаемая статья описывает процесс создания увлекательной игры на поиск предметов с помощью HTML, JavaScript и css. Суть игры следующая: создается игровая [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><span>Изучение иностранного языка – достаточно трудоемкое занятие, тем более для ребенка. Заинтересовать его можно, облачив обучение в игровую форму. Интерактивные игры несут в себе образовательный потенциал, создают условия для проявления учащимися учебной инициативы [1]. Предлагаемая статья описывает процесс создания увлекательной игры на поиск предметов с помощью <span style="color: black;">HTML, JavaScript и css</span>. Суть игры следующая:<br />
</span></p>
<ul>
<li>
<div style="text-align: justify;"><span>создается игровая сцена, где находятся различные предметы, и игрок должен найти предметы, названия которых соответствуют определенным словам из изучаемого иностранного языка;<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>учащийся видит название какого-то объекта (насекомого) на английском языке, например, «locust»;<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>игрок должен найти этот объект (саранча) и кликнуть по нему;<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>если игрок нажал на нужный предмет, объект считается найденным и исчезает с экрана;</span></div>
</li>
<li>
<div style="text-align: justify;">на экране появляется название следующего объекта, и т.д.</div>
</li>
</ul>
<p style="text-align: justify;">Такая игра, несомненно, поможет учащемуся проверить и закрепить свои знания английских слов, и будет интереснее, чем простое заучивание иностранных слов.</p>
<p style="text-align: justify;">Игра «Поиск предметов» может быть полезной в обучении и образовательных целях по нескольким причинам:</p>
<ul>
<li>
<div style="text-align: justify;"><span>мотивация и интерес: игровой формат проверки знаний по иностранному языку может стимулировать мотивацию учащихся и вызывать больший интерес к изучению языка. Участие в игре и достижение целей внутри игрового контекста может быть более привлекательным и захватывающим, чем традиционные методы обучения;<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>повторение и закрепление: игра предоставляет возможность повторить и закрепить изученный языковой материал. Поиск предметов, связанных с определенными темами или грамматическими конструкциями, позволяет учащимся активно применять свои знания и запоминать их более эффективно;<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>самостоятельное обучение: игровое приложение может быть использовано в качестве инструмента самостоятельного обучения. Учащиеся могут использовать его для повторения и тренировки в любое удобное для них время, что способствует развитию самоорганизации и самостоятельности;<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>вариативность и адаптивность: игровое приложение может быть настроено на различные уровни сложности и тематики, позволяя адаптировать его под индивидуальные потребности и уровень владения языком каждого учащегося. Это обеспечивает гибкость и возможность персонализации образовательного процесса;<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>расширение словарного запаса: в игре могут использоваться различные предметы, объекты или символы, которые игрок должен найти. Это помогает расширять словарный запас и знакомить с новыми терминами и понятиями;</span></div>
</li>
<li>
<div style="text-align: justify;">обучение конкретным темам: игра «Поиск предметов» может быть адаптирована для обучения конкретным темам или предметам. Например, она может быть использована для изучения географии (поиск географических объектов), биологии (поиск животных или растений) или истории (поиск исторических артефактов).</div>
</li>
</ul>
<p style="text-align: justify;">Игра «Поиск предметов» может быть эффективным дополнением к учебному процессу, способствуя развитию различных навыков и знаний у учащихся.</p>
<p style="text-align: justify;">Предметы на экране будем создавать в дизайнере в виде изображений спрайта, с помощью использования холста (рисунок 1).</p>
<p style="text-align: center;"><img src="https://web.snauka.ru/wp-content/uploads/2023/08/082123_1025_1.png" alt="" /></p>
<p style="text-align: center;"><em>Рисунок 1. Рабочее поле игры<br />
</em></p>
<p style="text-align: justify;">Подготовим изображения (рисунок 2). Рисунки лучше подготовить в формате .png, в котором поддерживается прозрачный фон.</p>
<p style="text-align: center;"><img src="https://web.snauka.ru/wp-content/uploads/2023/08/082123_1025_2.png" alt="" /></p>
<p style="text-align: center;"><em>Рисунок 2. Спрайты для игры<br />
</em></p>
<p style="text-align: justify;">Объявим массив предметов:</p>
<p style="text-align: justify; margin-left: 28pt;">const MASSIV = [</p>
<p style="text-align: justify; margin-left: 28pt;">    "dragonfly",</p>
<p style="text-align: justify; margin-left: 28pt;">    "grasshopper",</p>
<p style="text-align: justify; margin-left: 28pt;">    "locust",</p>
<p style="text-align: justify; margin-left: 28pt;">    "bee",</p>
<p style="text-align: justify; margin-left: 28pt;">    "ladybug",</p>
<p style="text-align: justify; margin-left: 28pt;">    "mosquito",</p>
<p style="text-align: justify; margin-left: 28pt;">    "snail",</p>
<p style="text-align: justify; margin-left: 28pt;">    "muse",</p>
<p style="text-align: justify; margin-left: 28pt;">    "ant",</p>
<p style="text-align: justify; margin-left: 28pt;">    "spider",</p>
<p style="text-align: justify; margin-left: 28pt;">    "bug",</p>
<p style="text-align: justify; margin-left: 28pt;">    "butterfly",</p>
<p style="text-align: justify; margin-left: 28pt;">    "small_butterfly",</p>
<p style="text-align: justify; margin-left: 28pt;">    "cockroach",</p>
<p style="text-align: justify; margin-left: 28pt;">    "caterpillar"</p>
<p style="text-align: justify; margin-left: 28pt;">];</p>
<p style="text-align: justify;">Этот массив мы позже программно перемешаем, чтобы при каждом новом старте игры предметы появлялись в случайном порядке.</p>
<p style="text-align: justify;">С помощь позиционирования разместим картинки на игровом поле (рисунок 1). Для этого укажем координаты спрайтов, например, для яблока:</p>
<p style="text-align: justify; margin-left: 35pt;">#grasshopper {</p>
<p style="text-align: justify; margin-left: 35pt;">position: absolute;</p>
<p style="text-align: justify; margin-left: 35pt;">top: 0; left: 0;</p>
<p style="text-align: justify; margin-left: 35pt;">margin: 530px 0 0 200px;</p>
<p style="text-align: justify; margin-left: 35pt;">}</p>
<p style="text-align: justify;">Координаты игрового поля, наоборот, укажем относительное позиционирование:</p>
<p style="text-align: justify; margin-left: 35pt;">.sunsistem {</p>
<p style="text-align: justify; margin-left: 35pt;">position: relative;</p>
<p style="text-align: justify; margin-left: 35pt;">top: 0; left: 0;</p>
<p style="text-align: justify; margin-left: 35pt;">}</p>
<p style="text-align: justify;">Алгоритм игрового скрипта будет следующим [2]:</p>
<ol>
<li>
<div style="text-align: justify;"><span>Создаем список предметов, которые игрок должен найти (в данном примере это список насекомых на английском языке).<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>Перемешиваем список случайным образом.<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>Инициализируем переменную «индекс», которая отвечает за номер предмета в списке. Вначале он равен 0.<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span><span>С помощью конструкции </span><span>addEventListener</span><span> на нужную картинку, которая ищется первой, «вешаем» событие клика [3]. При клике на картинку она плавно исчезает (видимость равно ЛОЖЬ).<br />
</span></span></div>
</li>
<li>
<div style="text-align: justify;"><span>Увеличиваем значение переменной-счетчика «индекс» на единицу и выводим на экран название следующего объекта.<br />
</span></div>
</li>
<li>
<div style="text-align: justify;"><span>Назначаем то же самое событие на следующий объект, и т.д.</span></div>
</li>
<li>
<div style="text-align: justify;">Когда значение счетчика «индекс» достигает размера списка, это означает, что все заданные предметы были успешно найдены, и мы можем вывести на экран сообщение о завершении игры.</div>
</li>
</ol>
<p style="text-align: justify;">После завершения игры выводится на экран соответствующее уведомление (рисунок 3):</p>
<p style="text-align: center;"><img src="https://web.snauka.ru/wp-content/uploads/2023/08/082123_1025_3.png" alt="" /></p>
<p style="text-align: center;"><em>Рисунок 3. Окончание игры<br />
</em></p>
<p style="text-align: justify;">Вы можете поиграть или ознакомиться с исходным кодом игры на платформе GitHub. GitHub &#8211; это веб-платформа, предназначенная для хранения кода и других программных проектов, совместной работы над ними и их обмена между разработчиками. Это отличное место для публикации интернет-проектов. Посмотреть код и проверить свои знания английского языка по теме «Насекомые» можно по адресу <a href="https://dmitrij-pavlov.github.io/project3/">https://dmitrij-pavlov.github.io/project3/</a>. Для использования приложения достаточно любого современного браузера.</p>
<p style="text-align: justify;">Итак, игра «Поиск предметов» может быть полезной в обучении и в образовательных целях, поскольку она мотивирует, активизирует участие, повторяет и закрепляет материал, поддерживает самостоятельное обучение и обладает вариативностью и адаптивностью в контексте изучения иностранного языка.</p>
]]></content:encoded>
			<wfw:commentRss>https://web.snauka.ru/issues/2023/08/100665/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
