- Автор темы
- #1
преколная игрруа
кккккккккккккккккккккккоооооооокд:
<?php
session_start();
if (!isset($_SESSION['record'])) {
$_SESSION['record'] = 0;
}
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['score'])) {
$score = (int)$_POST['score'];
if ($score > $_SESSION['record']) {
$_SESSION['record'] = $score;
}
echo json_encode(['record' => $_SESSION['record']]);
exit;
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сбор орешков</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background-image: linear-gradient(to bottom, #a8e6cf, #dcedc1);
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
h1 {
color: #4a6b3a;
margin-bottom: 30px;
}
.counter {
font-size: 24px;
margin: 20px 0;
color: #5d4037;
font-weight: bold;
}
.nut {
width: 60px;
height: 50px;
background-color: #8d6e63;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
display: inline-block;
margin: 10px;
cursor: pointer;
position: relative;
transition: transform 0.2s;
}
.nut:before {
content: "";
position: absolute;
width: 10px;
height: 15px;
background-color: #5d4037;
border-radius: 5px;
top: -10px;
left: 25px;
}
.nut:hover {
transform: scale(1.1);
}
.nut:active {
transform: scale(0.9);
}
.forest {
margin-top: 30px;
position: relative;
height: 200px;
}
.tree {
position: absolute;
bottom: 0;
}
.tree:nth-child(1) {
left: 10%;
font-size: 40px;
color: #2e7d32;
}
.tree:nth-child(2) {
left: 30%;
font-size: 60px;
color: #388e3c;
}
.tree:nth-child(3) {
left: 50%;
font-size: 50px;
color: #43a047;
}
.tree:nth-child(4) {
left: 70%;
font-size: 45px;
color: #4caf50;
}
.tree:nth-child(5) {
left: 90%;
font-size: 55px;
color: #66bb6a;
}
.celebration {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 100;
flex-direction: column;
justify-content: center;
align-items: center;
animation: fadeIn 1s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.celebration h2 {
font-size: 48px;
color: #d32f2f;
margin-bottom: 20px;
text-shadow: 2px 2px
4px rgba(0, 0, 0, 0.3);
}
.celebration p {
font-size: 24px;
color: #5d4037;
margin-bottom: 30px;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f44336;
opacity: 0.7;
animation: fall linear forwards;
}
.grass {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background-color: #7cb342;
}
#nuts-container {
position: relative;
height: 300px;
margin: 20px 0;
border: 2px dashed #7cb342;
border-radius: 10px;
overflow: hidden;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Собираем орешки в лесу!</h1>
<div class="counter">Орешков собрано: <span id="count">0</span>/150</div>
<div>Ваш рекорд: <span id="record"><?php echo $_SESSION['record']; ?></span></div>
<div id="nuts-container">
</div>
<div class="forest">
<div class="tree">🌲</div>
<div class="tree">🌳</div>
<div class="tree">🌴</div>
<div class="tree">🌲</div>
<div class="tree">🌳</div>
<div class="grass"></div>
</div>
</div>
<div id="celebration" class="celebration">
<h2>Поздравляем!! 🎉</h2>
<p>Вы собрали 150 орешков!</p>
<p>🐿️ 🎉 🍂</p>
<button onclick="resetGame()" style="padding: 10px 20px; font-size: 18px; background-color: #4caf50; color: white; border: none; border-radius: 5px; cursor: pointer;">Играть снова</button>
</div>
<script>
let count = 0;
const countElement = document.getElementById('count');
const nutsContainer = document.getElementById('nuts-container');
const celebration = document.getElementById('celebration');
const recordElement = document.getElementById('record');
function createNut() {
const nut = document.createElement('div');
nut.className = 'nut';
nut.addEventListener('click', collectNut);
const maxX = nutsContainer.offsetWidth - 60;
const maxY = nutsContainer.offsetHeight - 50;
nut.style.position = 'absolute';
nut.style.left = Math.random() * maxX + 'px';
nut.style.top = Math.random() * maxY + 'px';
nutsContainer.appendChild(nut);
}
function collectNut() {
count++;
countElement.textContent = count;
this.remove();
createNut();
if (count === 150) {
showCelebration();
updateRecord();
}
}
function showCelebration() {
celebration.style.display = 'flex';
for (let i = 0; i < 100; i++) {
createConfetti();
}
}
function createConfetti() {
const confetti = document.createElement('div');
confetti.className = 'confetti';
const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722'];
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.top = -10 + 'px';
const size = Math.random() * 10 + 5;
confetti.style
confetti.style.width = size + 'px';
confetti.style.height = size + 'px';
confetti.style.borderRadius = Math.random() > 0.5 ? '50%' : '0';
const animationDuration = Math.random() * 3 + 2;
confetti.style.animationDuration = animationDuration + 's';
document.body.appendChild(confetti);
setTimeout(() => {
confetti.remove();
}, animationDuration * 1000);
}
function resetGame() {
count = 0;
countElement.textContent = count;
celebration.style.display = 'none';
nutsContainer.innerHTML = '';
initGame();
}
function initGame() {
for (let i = 0; i < 10; i++) {
createNut();
}
}
function updateRecord() {
fetch('', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: 'score=' + count
})
.then(response => response.json())
.then(data => {
if (data.record !== undefined) {
recordElement.textContent = data.record;
}
})
.catch(console.error);
}
window.onload = initGame;
</script>
</body>
</html>