#html #css
#HTML #css
Вопрос:
Итак, мы группа из трех человек, у которых есть наше первое задание. Мы должны создать простую игру или просто веб-сайт с некоторыми базовыми HTML и CSS (без JS), желательно с анимацией. Мы решили создать игру, в которой ваш курсор — Гомер Симпсон, и он пытается съесть пончики на кухне.
Основой для этого является фоновое изображение кухонной комнаты, несколько изображений пончиков и изображение для курсора мыши. Пончики представляют собой несколько PNG с тем же размером экрана, что и фоновое изображение.
До сих пор нам удалось создать рабочий курсор, фоновое изображение и размещение пончиков. Однако наша проблема заключается в том, что мы не можем понять, как сделать пончики невидимыми при нажатии.
Ниже приведен код из наших документов HTML и CSS.
body {
height: 100vh;
cursor: url('../images/homer2.png'), auto;
}
body:active {
height: 100vh;
cursor: url('../images/homer-eat2.png'), auto;
}
.kitchen {
position: relative;
top: 0;
left: 0;
}
.donut1{
position: absolute;
top: 0;
left: 0;
visibility: visible;
}
.donut1:active{
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.donut2{
position: absolute;
top: 0;
left: 0;
}
.donut3{
position: absolute;
top: 0;
left: 0;
}
.donut4{
position: absolute;
top: 0;
left: 0;
}
.donut5{
position: absolute;
top: 0;
left: 0;
}
.images {
position: relative;
left: 0;
top: 0;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div images>
<img src="../images/background-page2-new.png" class="kitchen" draggable="false" usemap="#img-map">>
<img src="../images/donut-1.png" class="donut1" draggable="false">
<img src="../images/donut-2.png" class="donut2" draggable="false">
<img src="../images/donut-3.png" class="donut3" draggable="false">
<img src="../images/donut-4.png" class="donut4" draggable="false">
<img src="../images/donut-5.png" class="donut5" draggable="false">
</div>
</body>
</html> До сих пор мы только пытались заставить donut1 исчезнуть, поскольку мы сочли немного бессмысленным копировать вставлять этот код до того, как он действительно заработает. Donut1 — это тот, который за столом.
Ниже приведены некоторые изображения для справки: https://i.imgur.com/aWFRewj.png
https://i.imgur.com/mDQYi1u.png
Комментарии:
1. использование :active или:focus приведет к повторному отображению изображений, вы можете легко сделать это с помощью переключателей help. простой и понятный
Ответ №1:
вы можете добиться желаемого результата с помощью переключателей. это хороший и чистый трюк, чтобы скрыть что-то только с помощью HMTL, CSS. (без JS) Здесь я настроил для вас небольшой пример.
Следуйте этому в своей игре, поместите изображение пончика в ярлык и скройте его, когда соответствующий ввод проверен с помощью CSS, как я, попробуйте запустить этот фрагмент, а затем нажмите на текст d1, d2.
Примечание: если вы хотите повторно отобразить свое изображение при повторном нажатии, используйте Checkbox вместо radio .
input {display: none;}
input:checked label {
display: none;
} <section>
<div>
<input type="radio" id="donut1">
<label for="donut1">Donut 1</label>
</div>
<div>
<input type="radio" id="donut2">
<label for="donut2">Donut 2</label>
</div>
<div>
<input type="radio" id="donut3">
<label for="donut3">Donut 3</label>
</div>
<div>
<input type="radio" id="donut4">
<label for="donut4">Donut 4</label>
</div>
</section> Комментарии:
1. Это работает. Единственная проблема сейчас в том, что вам нужно нажать кнопку сбоку страницы, чтобы скрыть пончик, я бы хотел, чтобы эта кнопка была невидимой и помещалась на пончик. рис.: i.imgur.com/TGIEZZv.png код, который я использовал: pastebin.com/RjQwjwk7
2. Вам не нужно оставлять их на своей странице, в соответствии с вашим кодом, который вы используете в изображениях пончиков, поэтому просто сделайте их положение абсолютным и разместите их на разных позициях, я могу помочь вам больше, если вы создадите codepen или fiddle с тем же примером.
3. Я попытался сделать их абсолютными сейчас, но, похоже, они не исчезают при нажатии (эти кнопки также исчезли). Впервые попытался создать скрипку: jsfiddle.net/b43cxurw/#amp;togetherjs=VlvaaADBfL Также были загружены некоторые рабочие файлы на диск: drive.google.com/drive/folders /…
4. Я обновил вашу скрипку в соответствии с вашими потребностями, наслаждайтесь кодированием, jsfiddle.net/mgn39rye