{"draftJsState":{"blocks":[{"data":{"image":{"id":"6847da5b083e6952b7739593"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаем первую игру","type":"atomic:image","key":"33glo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":112,"style":"BOLD"}],"text":"Хочешь сделать свою первую игру, но не знаешь с чего начать? Отлично! Ниже — пошаговое руководство, как создать простую игру “Поймай квадрат” с использованием HTML, CSS и JavaScript. Никаких фреймворков, только чистый код и немного фантазии.","type":"unstyled","key":"2e0fg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что за игра?","type":"header-three","key":"n501"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На экране появляется квадрат, который нужно успеть кликнуть, пока он не исчез. Чем больше кликов — тем выше счёт. Простая, но отличная для тренировки логики и понимания основ.","type":"unstyled","key":"a4ub2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 1. Создай HTML-файл","type":"header-three","key":"d77l2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создай файл index.html. По умолчанию он будет открываться браузером, поэтому чтобы отредактировать его открой с помощью текстового редактора. Обычный блокнот подойдет. Вставь в него следующий код:","type":"unstyled","key":"d8et3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n Поймай квадрат\n \n\n\n

Поймай квадрат

Счёт: 0

\n \n\n","type":"blockquote","key":"97ueg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создать файл можно любой текстовый с расширением .txt, затем в блокноте выбрать «Сохранить как» и уже ввести нормальное название и расширение.","type":"unstyled","key":"686sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 2. Добавь JavaScript","type":"header-three","key":"d8jg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создай рядом файл game.js и вставь:","type":"unstyled","key":"8822u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const gameArea = document.getElementById('gameArea');\nconst scoreDisplay = document.getElementById('score');\nlet score = 0;\n\nfunction createSquare() {\n const square = document.createElement('div');\n square.classList.add('square');\n\n // Случайная позиция\n const x = Math.random() * (gameArea.clientWidth - 50);\n const y = Math.random() * (gameArea.clientHeight - 50);\n square.style.left = `${x}px`;\n square.style.top = `${y}px`;\n\n // Клик по квадрату\n square.onclick = function () {\n score++;\n scoreDisplay.textContent = score;\n gameArea.removeChild(square);\n createSquare();\n };\n\n // Удалить через 2 секунды, если не кликнули\n setTimeout(() => {\n if (gameArea.contains(square)) {\n gameArea.removeChild(square);\n createSquare();\n }\n }, 2000);\n\n gameArea.appendChild(square);\n}\n\n// Запуск игры\ncreateSquare();","type":"blockquote","key":"20mda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаг 3. Открой файл index.html","type":"header-three","key":"3g93c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью браузера Chrome, FireFox или другого открой файл и посмотри что получилось.","type":"unstyled","key":"7uacc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что мы сделали:","type":"header-two","key":"4m0od"},{"data":{"image":{"id":"6847d718614ba50502cfb602"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мини-игра \"Поймай квадрат\"","type":"atomic:image","key":"4af9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":13,"style":"BOLD"}],"text":"Использовали HTML для структуры страницы","type":"unordered-list-item","key":"3o5s3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":9,"style":"BOLD"}],"text":"Добавили CSS для внешнего вида и позиционирования","type":"unordered-list-item","key":"djti5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":9,"style":"BOLD"}],"text":"Написали JavaScript, чтобы:\nсоздавать квадрат в случайном месте\nобрабатывать клики\nобновлять счёт\nзаменять квадрат каждые 2 секунды","type":"unordered-list-item","key":"bu9r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание своей игры — отличный способ научиться программировать. Даже простая игра может научить многому: работе с DOM, событиями, позиционированием и логикой. И главное — ты сразу видишь результат и можешь играть в то, что сделал сам.","type":"unstyled","key":"1un0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":71,"style":"BOLD"}],"text":"Хочешь попробовать дальше, но не знаешь, с чего начать?\n\n\uD83D\uDC49 У меня есть мини-курс по HTML, CSS и JavaScript, где ты:","type":"unstyled","key":"fv8uq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":102,"style":"BOLD"}],"text":"\uD83D\uDD38 разберёшься с основами HTML\n\n\uD83D\uDD38 узнаешь, как сделать интерактивную историю с выбором\n\n\uD83D\uDD38 создашь свою первую игру прямо в браузере — всего за 1 час","type":"unstyled","key":"52rsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDCD8 Всё просто, пошагово и без сложных терминов. Курс идеально подойдёт для новичков.","type":"unstyled","key":"a0po4"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":36,"offset":86}],"inlineStyleRanges":[{"length":9,"offset":21,"style":"BOLD"}],"text":"Подписывайся на курс ВКонтакте — и пусть это будет твой первый шаг в мир геймдева:\n\n\uD83D\uDD17 Хочу пройти курс и сделать свою игру","type":"unstyled","key":"3510r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начни сегодня — и создавай игры, а не просто играй в них! \uD83C\uDFAE✨","type":"unstyled","key":"a96g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"mCJ3BcVQaCkHRibmMoCb"}],"entityMap":{"0":{"data":{"url":"https://vk.com/app5898182_-228425592#u=1955553&s=3278180"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}