Создай код для 5 детских игры по методу монтессори, которые будут работать через html файл на мобильных устройствах iphone и android, очень важно что бы игры работали на мобильных устройствах через сенсор экрана
Вот код для 5 детских игр по методике Монтессори, которые работают на мобильных устройствах (iPhone и Android) через сенсорный экран. Эти игры развивают мелкую моторику, сенсорное восприятие, логику и координацию.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Монтессори игры для детей</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 10px;
max-width: 100%;
overflow-x: hidden;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 20px;
font-size: 24px;
}
.game-container {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.game {
background-color: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.game-title {
color: #3498db;
margin-bottom: 10px;
font-size: 18px;
text-align: center;
}
.game-description {
color: #7f8c8d;
font-size: 14px;
margin-bottom: 10px;
text-align: center;
}
.game-area {
margin-top: 15px;
position: relative;
min-height: 150px;
border: 1px dashed #ccc;
border-radius: 5px;
overflow: hidden;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
font-size: 14px;
margin-top: 10px;
width: 100%;
cursor: pointer;
}
button:active {
background-color: #2980b9;
}
/* Стили для игры с перетаскиванием фигур */
.draggable-shape {
position: absolute;
width: 60px;
height: 60px;
touch-action: none;
user-select: none;
}
.shape-slot {
position: absolute;
width: 60px;
height: 60px;
border: 2px dashed #3498db;
border-radius: 5px;
opacity: 0.7;
}
/* Стили для игры с сортировкой цветов */
.color-item {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 5px;
display: inline-block;
touch-action: none;
}
.color-bin {
width: 100%;
min-height: 60px;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Стили для игры с пазлом */
.puzzle-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.puzzle-piece {
width: 100%;
aspect-ratio: 1;
background-size: 300% 300%;
background-color: #eee;
border: 1px solid #ccc;
touch-action: none;
}
.puzzle-slot {
width: 100%;
aspect-ratio: 1;
border: 1px dashed #3498db;
background-color: rgba(52, 152, 219, 0.1);
}
/* Стили для игры с бусинами */
.bead {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 5px;
display: inline-block;
touch-action: none;
}
.bead-wire {
width: 100%;
min-height: 50px;
background-color: #f1c40f;
margin-bottom: 10px;
border-radius: 5px;
display: flex;
align-items: center;
padding: 0 10px;
flex-wrap: wrap;
}
/* Стили для игры с рисованием */
.drawing-area {
width: 100%;
height: 200px;
border: 1px solid #ccc;
background-color: white;
touch-action: none;
}
.color-picker {
display: flex;
justify-content: center;
margin-top: 10px;
}
.color-option {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 5px;
border: 2px solid transparent;
}
.color-option.selected {
border-color: #000;
}
</style>
</head>
<body>
<h1>Монтессори игры для детей</h1>
<div class="game-container">
<!-- Игра 1: Перетаскивание фигур -->
<div class="game" id="shape-game">
<div class="game-title">Перетащи фигуру в правильное место</div>
<div class="game-description">Развиваем координацию и пространственное мышление</div>
<div class="game-area" id="shape-area">
<div class="shape-slot" style="top: 20px; left: 20px;"></div>
<div class="shape-slot" style="top: 20px; right: 20px;"></div>
<div class="shape-slot" style="bottom: 20px; left: 20px;"></div>
<div class="shape-slot" style="bottom: 20px; right: 20px;"></div>
<div class="draggable-shape" style="top: 100px; left: 50px; background-color: #e74c3c; border-radius: 50%;"></div>
<div class="draggable-shape" style="top: 100px; right: 50px; background-color: #2ecc71; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);"></div>
<div class="draggable-shape" style="bottom: 100px; left: 50px; background-color: #9b59b6; clip-path: polygon(0% 0%, 100% 0%, 50% 100%);"></div>
<div class="draggable-shape" style="bottom: 100px; right: 50px; background-color: #f1c40f; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);"></div>
</div>
<button onclick="resetShapes()">Начать заново</button>
</div>
<!-- Игра 2: Сортировка цветов -->
<div class="game" id="color-game">
<div class="game-title">Сортировка цветов</div>
<div class="game-description">Развиваем цветовосприятие и логическое мышление</div>
<div class="game-area">
<div class="color-bin" style="background-color: #ffcccc;">
<span class="color-item" style="background-color: #ff9999;"></span>
<span class="color-item" style="background-color: #ff6666;"></span>
<span class="color-item" style="background-color: #ff3333;"></span>
</div>
<div class="color-bin" style="background-color: #ccffcc;">
<span class="color-item" style="background-color: #99ff99;"></span>
<span class="color-item" style="background-color: #66ff66;"></span>
<span class="color-item" style="background-color: #33ff33;"></span>
</div>
<div class="color-bin" style="background-color: #ccccff;">
<span class="color-item" style="background-color: #9999ff;"></span>
<span class="color-item" style="background-color: #6666ff;"></span>
<span class="color-item" style="background-color: #3333ff;"></span>
</div>
<div style="text-align: center; margin-top: 10px;">
<span class="color-item" style="background-color: #ff9999;"></span>
<span class="color-item" style="background-color: #99ff99;"></span>
<span class="color-item" style="background-color: #9999ff;"></span>
<span class="color-item" style="background-color: #ff6666;"></span>
<span class="color-item" style="background-color: #66ff66;"></span>
<span class="color-item" style="background-color: #6666ff;"></span>
</div>
</div>
<button onclick="resetColors()">Перемешать цвета</button>
</div>
<!-- Игра 3: Простой пазл -->
<div class="game" id="puzzle-game">
<div class="game-title">Собери картинку</div>
<div class="game-description">Развиваем логику и мелкую моторику</div>
<div class="game-area">
<div class="puzzle-container" id="puzzle-slots">
<div class="puzzle-slot" data-piece="0"></div>
<div class="puzzle-slot" data-piece="1"></div>
<div class="puzzle-slot" data-piece="2"></div>
<div class="puzzle-slot" data-piece="3"></div>
<div class="puzzle-slot" data-piece="4"></div>
<div class="puzzle-slot" data-piece="5"></div>
<div class="puzzle-slot" data-piece="6"></div>
<div class="puzzle-slot" data-piece="7"></div>
<div class="puzzle-slot" data-piece="8"></div>
</div>
<div class="puzzle-container" id="puzzle-pieces" style="margin-top: 10px;">
<!-- Здесь будут кусочки пазла -->
</div>
</div>
<button onclick="resetPuzzle()">Перемешать пазл</button>
</div>
<!-- Игра 4: Нанизывание бусин -->
<div class="game" id="bead-game">
<div class="game-title">Нанизывание бусин</div>
<div class="game-description">Развиваем мелкую моторику и координацию</div>
<div class="game-area">
<div class="bead-wire" id="bead-wire">
<!-- Бусины будут добавляться сюда -->
</div>
<div style="text-align: center;">
<span class="bead" style="background-color: #e74c3c;"></span>
<span class="bead" style="background-color: #3498db;"></span>
<span class="bead" style="background-color: #2ecc71;"></span>
<span class="bead" style="background-color: #f1c40f;"></span>
<span class="bead" style="background-color: #9b59b6;"></span>
</div>
</div>
<button onclick="resetBeads()">Убрать бусины</button>
</div>
<!-- Игра 5: Рисование -->
<div class="game" id="drawing-game">
<div class="game-title">Рисование</div>
<div class="game-description">Развиваем творческие способности и моторику</div>
<div class="game-area">
<canvas class="drawing-area" id="drawing-canvas"></canvas>
<div class="color-picker">
<div class="color-option selected" style="background-color: #000000;" data-color="#000000"></div>
<div class="color-option" style="background-color: #e74c3c;" data-color="#e74c3c"></div>
<div class="color-option" style="background-color: #3498db;" data-color="#3498db"></div>
<div class="color-option" style="background-color: #2ecc71;" data-color="#2ecc71"></div>
<div class="color-option" style="background-color: #f1c40f;" data-color="#f1c40f"></div>
</div>
</div>
<button onclick="clearDrawing()">Очистить</button>
</div>
</div>
<script>
// Игра 1: Перетаскивание фигур
document.addEventListener('DOMContentLoaded', function() {
const shapes = document.querySelectorAll('.draggable-shape');
const slots = document.querySelectorAll('.shape-slot');
shapes.forEach(shape => {
makeDraggable(shape);
});
function makeDraggable(element) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
element.onmousedown = dragMouseDown;
element.ontouchstart = dragTouchStart;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function dragTouchStart(e) {
e.preventDefault();
const touch = e.touches[0];
pos3 = touch.clientX;
pos4 = touch.clientY;
document.ontouchend = closeDragElement;
document.ontouchmove = elementTouchMove;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
checkSnap(element);
}
function elementTouchMove(e) {
const touch = e.touches[0];
pos1 = pos3 - touch.clientX;
pos2 = pos4 - touch.clientY;
pos3 = touch.clientX;
pos4 = touch.clientY;
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
checkSnap(element);
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
document.ontouchend = null;
document.ontouchmove = null;
checkSnap(element);
}
function checkSnap(shape) {
const shapeRect = shape.getBoundingClientRect();
slots.forEach(slot => {
const slotRect = slot.getBoundingClientRect();
const distance = Math.sqrt(
Math.pow(shapeRect.left + shapeRect.width/2 - (slotRect.left + slotRect.width/2), 2) +
Math.pow(shapeRect.top + shapeRect.height/2 - (slotRect.top + slotRect.height/2), 2)
);
if (distance < 30) {
shape.style.top = (slot.offsetTop) + "px";
shape.style.left = (slot.offsetLeft) + "px";
}
});
}
}
window.resetShapes = function() {
document.querySelector('.draggable-shape:nth-child(5)').style.top = '100px';
document.querySelector('.draggable-shape:nth-child(5)').style.left = '50px';
document.querySelector('.draggable-shape:nth-child(6)').style.top = '100px';
document.querySelector('.draggable-shape:nth-child(6)').style.right = '50px';
document.querySelector('.draggable-shape:nth-child(6)').style.left = '';
document.querySelector('.draggable-shape:nth-child(7)').style.bottom = '100px';
document.querySelector('.draggable-shape:nth-child(7)').style.left = '50px';
document.querySelector('.draggable-shape:nth-child(7)').style.top = '';
document.querySelector('.draggable-shape:nth-child(8)').style.bottom = '100px';
document.querySelector('.draggable-shape:nth-child(8)').style.right = '50px';
document.querySelector('.draggable-shape:nth-child(8)').style.left = '';
document.querySelector('.draggable-shape:nth-child(8)').style.top = '';
};
});
// Игра 2: Сортировка цветов
document.addEventListener('DOMContentLoaded', function() {
const colorItems = document.querySelectorAll('.color-item');
const colorBins = document.querySelectorAll('.color-bin');
colorItems.forEach(item => {
makeDraggable(item);
});
function makeDraggable(element) {
let originalParent = element.parentNode;
let originalPosition = { x: 0, y: 0 };
element.onmousedown = dragMouseDown;
element.ontouchstart = dragTouchStart;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
originalPosition.x = element.offsetLeft;
originalPosition.y = element.offsetTop;
element.style.position = 'absolute';
element.style.zIndex = '1000';
document.body.appendChild(element);
element.style.left = (e.clientX - element.offsetWidth/2) + 'px';
element.style.top = (e.clientY - element.offsetHeight/2) + 'px';
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function dragTouchStart(e) {
e.preventDefault();
const touch = e.touches[0];
originalPosition.x = element.offsetLeft;
originalPosition.y = element.offsetTop;
element.style.position = 'absolute';
element.style.zIndex = '1000';
document.body.appendChild(element);
element.style.left = (touch.clientX - element.offsetWidth/2) + 'px';
element.style.top = (touch.clientY - element.offsetHeight/2) + 'px';
document.ontouchend = closeDragElement;
document.ontouchmove = elementTouchMove;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
element.style.left = (e.clientX - element.offsetWidth/2) + 'px';
element.style.top = (e.clientY - element.offsetHeight/2) + 'px';
}
function elementTouchMove(e) {
const touch = e.touches[0];
element.style.left = (touch.clientX - element.offsetWidth/2) + 'px';
element.style.top = (touch.clientY - element.offsetHeight/2) + 'px';
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
document.ontouchend = null;
document.ontouchmove = null;
let dropped = false;
const itemRect = element.getBoundingClientRect();
colorBins.forEach(bin => {
const binRect = bin.getBoundingClientRect();
if (
itemRect.right > binRect.left &&
itemRect.left < binRect.right &&
itemRect.bottom > binRect.top &&
itemRect.top < binRect.bottom
) {
// Проверяем, совпадает ли цвет предмета с цветом корзины
const itemColor = element.style.backgroundColor;
const binColor = bin.style.backgroundColor;
if (isColorFamilyMatch(itemColor, binColor)) {
bin.appendChild(element);
element.style.position = '';
element.style.left = '';
element.style.top = '';
element.style.zIndex = '';
dropped = true;
}
}
});
if (!dropped) {
originalParent.appendChild(element);
element.style.position = '';
element.style.left = '';
element.style.top = '';
element.style.zIndex = '';
}
}
function isColorFamilyMatch(itemColor, binColor) {
// Простая проверка на принадлежность к одной цветовой гамме
const itemRgb = hexToRgb(itemColor);
const binRgb = hexToRgb(binColor);
if (!itemRgb || !binRgb) return false;
// Проверяем красный канал
const redMatch =
(itemRgb.r > 200 && binRgb.r > 200) ||
(itemRgb.r < 100 && binRgb.r < 100) ||
Math.abs(itemRgb.r - binRgb.r) < 50;
// Проверяем зеленый канал
const greenMatch =
(itemRgb.g > 200 && binRgb.g > 200) ||
(itemRgb.g < 100 && binRgb.g < 100) ||
Math.abs(itemRgb.g - binRgb.g) < 50;
// Проверяем синий канал
const blueMatch =
(itemRgb.b > 200 && binRgb.b > 200) ||
(itemRgb.b < 100 && binRgb.b < 100) ||
Math.abs(itemRgb.b - binRgb.b) < 50;
return redMatch && greenMatch && blueMatch;
}
function hexToRgb(hex) {
if (!hex) return null;
// Удаляем пробелы и преобразуем в нижний регистр
hex = hex.replace(/\s/g, '').toLowerCase();
// Проверяем формат rgb()
const rgbMatch = hex.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (rgbMatch) {
return {
r: parseInt(rgbMatch[1]),
g: parseInt(rgbMatch[2]),
b: parseInt(rgbMatch[3])
};
}
// Проверяем формат #xxx или #xxxxxx
const hexMatch = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) ||
hex.match(/^#?([a-f\d])([a-f\d])([a-f\d])$/i);
if (hexMatch) {
return {
r: parseInt(hexMatch[1].length === 1 ? hexMatch[1] + hexMatch[1] : hexMatch[1], 16),
g: parseInt(hexMatch[2].length === 1 ? hexMatch[2] + hexMatch[2] : hexMatch[2], 16),
b: parseInt(hexMatch[3].length === 1 ? hexMatch[3] + hexMatch[3] : hexMatch[3], 16)
};
}
return null;
}
}
window.resetColors = function() {
const colorContainer = document.querySelector('#color-game .game-area > div:last-child');
const allItems = document.querySelectorAll('.color-item');
allItems.forEach(item => {
if (!colorContainer.contains(item)) {
colorContainer.appendChild(item);
}
});
};
});
// Игра 3: Простой пазл
document.addEventListener('DOMContentLoaded', function() {
const puzzleSlots = document.getElementById('puzzle-slots');
const puzzlePieces = document.getElementById('puzzle-pieces');
const pieceSize = 100;
const imageUrl = 'https://via.placeholder.com/300x300/3498db/ffffff?text=Пазл';
// Создаем кусочки пазла
function createPuzzle() {
puzzlePieces.innerHTML = '';
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
const piece = document.createElement('div');
piece.className = 'puzzle-piece';
piece.dataset.piece = row * 3 + col;
// Устанавливаем фоновое изображение для каждого кусочка
const bgPosX = -col * pieceSize + 'px';
const bgPosY = -row * pieceSize + 'px';
piece.style.backgroundImage = `url('${imageUrl}')`;
piece.style.backgroundPosition = `${bgPosX} ${bgPosY}`;
makeDraggable(piece);
puzzlePieces.appendChild(piece);
}
}
}
function makeDraggable(element) {
let originalParent = element.parentNode;
let originalPosition = { x: 0, y: 0 };
element.onmousedown = dragMouseDown;
element.ontouchstart = dragTouchStart;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
originalPosition.x = element.offsetLeft;
originalPosition.y = element.offsetTop;
element.style.position = 'absolute';
element.style.zIndex = '1000';
document.body.appendChild(element);
element.style.left = (e.clientX - element.offsetWidth/2) + 'px';
element.style.top = (e.clientY - element.offsetHeight/2) + 'px';
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function dragTouchStart(e) {
e.preventDefault();
const touch = e.touches[0];
originalPosition.x = element.offsetLeft;
originalPosition.y = element.offsetTop;
element.style.position = 'absolute';
element.style.zIndex = '1000';
document.body.appendChild(element);
element.style.left = (touch.clientX - element.offsetWidth/2) + 'px';
element.style.top = (touch.clientY - element.offsetHeight/2) + 'px';
document.ontouchend = closeDragElement;
document.ontouchmove = elementTouchMove;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
element.style.left = (e.clientX - element.offsetWidth/2) + 'px';
element.style.top = (e.clientY - element.offsetHeight/2) + 'px';
}
function elementTouchMove(e) {
const touch = e.touches[0];
element.style.left = (touch.clientX - element.offsetWidth/2) + 'px';
element.style.top = (touch.clientY - element.offsetHeight/2) + 'px';
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
document.ontouchend = null;
document.ontouchmove = null;
let dropped = false;
const pieceRect = element.getBoundingClientRect();
const pieceId = element.dataset.piece;
const slots = document.querySelectorAll('.puzzle-slot');
slots.forEach(slot => {
const slotRect = slot.getBoundingClientRect();
if (
pieceRect.right > slotRect.left &&
pieceRect.left < slotRect.right &&
pieceRect.bottom > slotRect.top &&
pieceRect.top < slotRect.bottom
) {
if (slot.dataset.piece === pieceId) {
// Правильное место для кусочка
slot.innerHTML = '';
slot.appendChild(element);
element.style.position = '';
element.style.left = '';
element.style.top = '';
element.style.zIndex = '';
dropped = true;
// Проверяем, собран ли весь пазл
checkPuzzleComplete();
}
}
});
if (!dropped) {
originalParent.appendChild(element);
element.style.position = '';
element.style.left = '';
element.style.top = '';
element.style.zIndex = '';
}
}
}
function checkPuzzleComplete() {
const slots = document.querySelectorAll('.puzzle-slot');
let complete = true;
slots.forEach(slot => {
if (slot.children.length === 0) {
complete = false;
} else {
const piece = slot.children[0];
if (piece.dataset.piece !== slot.dataset.piece) {
complete = false;
}
}
});
if (complete) {
setTimeout(() => {
alert('Поздравляем! Вы собрали пазл!');
}, 200);
}
}
window.resetPuzzle = function() {
createPuzzle();
// Очищаем слоты
const slots = document.querySelectorAll('.puzzle-slot');
slots.forEach(slot => {
slot.innerHTML = '';
});
};
// Инициализируем пазл при загрузке
createPuzzle();
});
// Игра 4: Нанизывание бусин
document.addEventListener('DOMContentLoaded', function() {
const beadWire = document.getElementById('bead-wire');
const beads = document.querySelectorAll('.bead');
beads.forEach(bead => {
makeDraggable(bead);
});
function makeDraggable(element) {
let originalParent = element.parentNode;
let originalIndex = Array.from(originalParent.children).indexOf(element);
element.onmousedown = dragMouseDown;
element.ontouchstart = dragTouchStart;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
element.style.position = 'absolute';
element.style.zIndex = '1000';
document.body.appendChild(element);
element.style.left = (e.clientX - element.offsetWidth/2) + 'px';
element.style.top = (e.clientY - element.offsetHeight/2) + 'px';
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function dragTouchStart(e) {
e.preventDefault();
const touch = e.touches[0];
element.style.position = 'absolute';
element.style.zIndex = '1000';
document.body.appendChild(element);
element.style.left = (touch.clientX - element.offsetWidth/2) + 'px';
element.style.top = (touch.clientY - element.offsetHeight/2) + 'px';
document.ontouchend = closeDragElement;
document.ontouchmove = elementTouchMove;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
element.style.left = (e.clientX - element.offsetWidth/2) + 'px';
element.style.top = (e.clientY - element.offsetHeight/2) + 'px';
}
function elementTouchMove(e) {
const touch = e.touches[0];
element.style.left = (touch.clientX - element.offsetWidth/2) + 'px';
element.style.top = (touch.clientY - element.offsetHeight/2) + 'px';
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
document.ontouchend = null;
document.ontouchmove = null;
const beadRect = element.getBoundingClientRect();
const wireRect = beadWire.getBoundingClientRect();
if (
beadRect.right > wireRect.left &&
beadRect.left < wireRect.right &&
beadRect.bottom > wireRect.top &&
beadRect.top < wireRect.bottom
) {
// Добавляем бусину на проволоку
const wireChildren = Array.from(beadWire.children);
let insertBeforeIndex = null;
// Находим позицию для вставки
for (let i = 0; i < wireChildren.length; i++) {
const child = wireChildren[i