Skip to content

Hw 9 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Origamidnd wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Hw 9 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
272e756
editHW
Origamidnd Aug 10, 2025
79f0f33
HW last
Origamidnd Sep 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added img/Star 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 21 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,18 @@ <h1 class="welcome-text ml-119">
</p>
<a href="#about-games" class="intro-button ml-119">Поехали!</a>
</div>
<div class="bottom-line">
<div class="bottom-line__games">ВИКТОРИНА</div>
<div class="bottom-line__games">УГАДАЙ ЧИСЛО</div>
<div class="bottom-line__games">ПЕРЕВЕРНИ ТЕКСТ</div>
<div class="bottom-line__games">ПРОСТАЯ АРИФМЕТИКА</div>
</div>
<div class="bottom-line">
<div class="bottom-line__wrapper">
<div class="bottom-line__games">ВИКТОРИНА</div>
<div class="bottom-line__games">УГАДАЙ ЧИСЛО</div>
<div class="bottom-line__games">ПЕРЕВЕРНИ ТЕКСТ</div>
<div class="bottom-line__games">ПРОСТАЯ АРИФМЕТИКА</div>
<div class="bottom-line__games">ВИКТОРИНА</div>
<div class="bottom-line__games">УГАДАЙ ЧИСЛО</div>
<div class="bottom-line__games">ПЕРЕВЕРНИ ТЕКСТ</div>
<div class="bottom-line__games">ПРОСТАЯ АРИФМЕТИКА</div>
</div>
</div>
</header>

<!--Блок "Об играх" -->
Expand Down Expand Up @@ -144,14 +150,14 @@ <h3 class="game-card__title">Угадай число</h3>

<!-- Карточка 2 -->
<div class="game-card game-card--reversed" id="game2">
<img class="game-card__img" src="img/game2.png" alt="game" />
<div class="game-card__content">
<h3 class="game-card__title">Простая арифметика</h3>
<p class="game-card__description">
Решай примеры на сложение, вычитание, умножение и деление
</p>
<button class="game-card__button">Играть!</button>
<button class="game-card__button" onclick="startMathGame()">Играть!</button>
</div>
<img class="game-card__img" src="img/game2.png" alt="game" />
</div>

<!-- Карточка 3 -->
Expand All @@ -161,21 +167,21 @@ <h3 class="game-card__title">Переверни текст</h3>
<p class="game-card__description">
Введи текст и получи его в обратном порядке
</p>
<button class="game-card__button">Играть!</button>
<button class="game-card__button" onclick="startReverseTextGame()">Играть!</button>
</div>
<img class="game-card__img" src="img/game3.png" alt="game" />
</div>

<!-- Карточка 4 -->
<div class="game-card game-card--reversed" id="game4">
<img class="game-card__img" src="img/game5.png" alt="game" />
<div class="game-card__content">
<h3 class="game-card__title">Викторина</h3>
<p class="game-card__description">
Проверь свои знания в разных областях
</p>
<button class="game-card__button">Играть!</button>
<button class="game-card__button" onclick="startQuizGame()">Играть!</button>
</div>
<img class="game-card__img" src="img/game5.png" alt="game" />
</div>

<!-- Карточка 5 -->
Expand All @@ -185,22 +191,22 @@ <h3 class="game-card__title">Камень, ножницы, бумага</h3>
<p class="game-card__description">
Сыграй в классическую игру против компьютера
</p>
<button class="game-card__button">Играть!</button>
<button class="game-card__button" onclick="playRockPaperScissors()">Играть!</button>
</div>
<img class="game-card__img" src="img/game4.png" alt="game" onclick="playGameRockPaperScissors()" />
</div>

<!-- Карточка 6 -->
<div class="game-card game-card--reversed" id="game6">
<img class="game-card__img" src="img/game6.png" alt="game" />
<div class="game-card__content">
<h3 class="game-card__title">Генератор случайных чисел</h3>
<h3 class="game-card__title">Генератор случайного цвета</h3>
<p class="game-card__description">
Игра, в которой при клике на кнопку фон страницы меняется на
случайный.
</p>
<button class="game-card__button">Играть!</button>
<button class="game-card__button" onclick="startRandomColorGame() ">Играть!</button>
</div>
<img class="game-card__img" src="img/game6.png" alt="game" />
</div>
</div>
</section>
Expand Down
135 changes: 134 additions & 1 deletion script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,47 @@ function startGameOne() {
}
}

function startMathGame() {
let num1, num2, operation, question, correctAnswer;

let operations = ["+", "-", "*", "/"];
operation = operations[Math.floor(Math.random() * operations.length)];

if (operation === "/") {
num2 = Math.floor(Math.random() * 19) + 1;
correctAnswer = Math.floor(Math.random() * 10) + 1;
num1 = num2 * correctAnswer;
} else {
num1 = Math.floor(Math.random() * 20) + 1;
num2 = Math.floor(Math.random() * 20) + 1;
switch (operation) {
case "+":
correctAnswer = num1 + num2;
break;
case "-":
correctAnswer = num1 - num2;
break;
case "*":
correctAnswer = num1 * num2;
break;
}
}

question = `${num1} ${operation} ${num2}`;


let userAnswer = prompt(`Реши пример: ${question}`);

if (Number(userAnswer) === correctAnswer) {
alert("Верно!");
} else {
alert(`Ошибка! Правильный ответ: ${correctAnswer}`);
}
}




// Игра "Камень, ножницы, бумага"
const playGameRockPaperScissors = () => {
const choices = ["камень", "ножницы", "бумага"];
Expand Down Expand Up @@ -71,4 +112,96 @@ function startGameOne() {

alert(`Ваш выбор: ${userChoice}\nВыбор компьютера: ${computerChoice}\nРезультат: ${result}`);
};


function startReverseTextGame() {
let userText = prompt("Введите текст, который нужно перевернуть:");

if (userText !== null) {
let reversed = userText.split("").reverse().join("");

alert("Перевернутый текст: " + reversed);
}
}


function startQuizGame() {
const quiz = [
{
question: "Какой цвет небо?",
options: ["1. Красный", "2. Синий", "3. Зеленый"],
correctAnswer: 2
},
{
question: "Сколько дней в неделе?",
options: ["1. Шесть", "2. Семь", "3. Восемь"],
correctAnswer: 2
},
{
question: "Сколько у человека пальцев на одной руке?",
options: ["1. Четыре", "2. Пять", "3. Шесть"],
correctAnswer: 2
}
];

let score = 0;

for (let i = 0; i < quiz.length; i++) {
let q = quiz[i];
let userAnswer = prompt(q.question + "\n" + q.options.join("\n"));

if (Number(userAnswer) === q.correctAnswer) {
score++;
}
}

alert("Вы ответили правильно на " + score + " из " + quiz.length + " вопросов!");
}

function playRockPaperScissors() {
const options = ["камень", "ножницы", "бумага"];

let userChoice = prompt("Выберите: камень, ножницы или бумага").toLowerCase();

if (!options.includes(userChoice)) {
alert("Ошибка! Нужно ввести: камень, ножницы или бумага.");
return;
}

let computerChoice = options[Math.floor(Math.random() * options.length)];

let result = "";

if (userChoice === computerChoice) {
result = "Ничья!";
} else if (
(userChoice === "камень" && computerChoice === "ножницы") ||
(userChoice === "ножницы" && computerChoice === "бумага") ||
(userChoice === "бумага" && computerChoice === "камень")
) {
result = "Вы выиграли! 🎉";
} else {
result = "Вы проиграли 😢";
}

alert(
"Ваш выбор: " + userChoice +
"\nВыбор компьютера: " + computerChoice +
"\nРезультат: " + result
);
}


function startRandomColorGame() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
const sections = document.querySelectorAll(".about-games, .mini-games");
sections.forEach(section => {
section.style.backgroundColor = color;
});

alert("Новый случайный цвет: " + color);
}

73 changes: 48 additions & 25 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,21 @@ html {
align-items: center;
}

.bottom-line__wrapper {
display: flex;
gap: 60px;
animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

.bottom-line__games:not(:last-child)::after {
content: url(img/Star.svg);
display: inline-block;
Expand All @@ -109,17 +124,20 @@ html {
margin: 0;
}

.about-games {
background-image: url(img/aboutgames-background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
.about-games,
.mini-games {
background-color: rgba(32, 32, 39, 1);
background-image: url("img/Star 2.png"), url("img/Star 1.png");
background-repeat: no-repeat, no-repeat;
background-position: bottom 100px left 50px, top 50px right 50px;
background-size: 120px, 300px;
width: 100%;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
}


.about-games__title {
color: rgb(255, 255, 255);
display: flex;
Expand Down Expand Up @@ -286,12 +304,6 @@ html {
padding: 32px;
}

.mini-games {
background-color: #202027;
width: 100%;
margin: 0 auto;
}

/* Контейнер для карточек игр */
.mini-games__container {
display: flex;
Expand Down Expand Up @@ -445,22 +457,33 @@ html {
margin-left: 0 !important;
align-self: center;
}
.bottom-line {
position: absolute;
bottom: 0;
left: 0;
top: auto;
height: 51px;
padding: 0 20px;
justify-content: center;
align-items: center;
font-size: 24px;
overflow: hidden;
}

.bottom-line__games:not(:last-child)::after {
margin: 30px;
.bottom-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 51px;
padding: 0 20px;
font-size: 24px;
overflow: hidden;
background: rgb(188, 236, 48);
}

.bottom-line__wrapper {
display: flex;
gap: 60px;
animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
}

/* Мобильные устройства*/
Expand Down
Loading