以下是一个可以用于幼儿园表演区互动小墙面的设计方案:
.interactive-wall {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
background-color: #f2f2f2;
}
.wall-section {
width: 30%;
margin-bottom: 30px;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.interactive-element {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.drawing-canvas {
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
.tools button {
margin: 0 10px;
}
.game-board {
position: relative;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
.game-piece {
position: absolute;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
.game-path {
position: absolute;
width: 100%;
height: 100%;
background-color: #f2f2f2;
}
// 音乐播放
const playMusicButton = document.querySelector('.play-sound');
const musicAudio = new Audio('music.mp3');
playMusicButton.addEventListener('click', () => {
musicAudio.play();
});
// 绘画互动
const drawingCanvas = document.getElementById('drawing-canvas');
const drawingContext = drawingCanvas.getContext('2d');
let currentTool = 'pen';
let isDrawing = false;
drawingCanvas.addEventListener('mousedown', (e) => {
isDrawing = true;
drawingContext.beginPath();
drawingContext.moveTo(e.offsetX, e.offsetY);
});
drawingCanvas.addEventListener('mousemove', (e) => {
if (isDrawing) {
if (currentTool === 'pen') {
drawingContext.lineTo(e.offsetX, e.offsetY);
drawingContext.stroke();
} else if (currentTool === 'eraser') {
drawingContext.clearRect(e.offsetX - 10, e.offsetY - 10, 20, 20);
}
}
});
drawingCanvas.addEventListener('mouseup', () => {
isDrawing = false;
drawingContext.closePath();
});
document.querySelectorAll('.draw-tool').forEach((tool) => {
tool.addEventListener('click', () => {
currentTool = tool.dataset.tool;
});
});
document.querySelector('.clear-canvas').addEventListener('click', () => {
drawingContext.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
});
// 探索游戏
const gamePiece = document.querySelector('.game-piece');
const gameBoard = document.querySelector('.game-board');
const startGameButton = document.querySelector('.start-game');
let isGameStarted = false;
let gameInterval;
startGameButton.addEventListener('click', () => {
if (!isGameStarted) {
isGameStarted = true;
startGameButton.textContent = '停止游戏';
gameInterval = setInterval(() => {
const randomX = Math.floor(Math.random() * (gameBoard.offsetWidth - gamePiece.offsetWidth));
const randomY = Math.floor(Math.random() * (gameBoard.offsetHeight - gamePiece.offsetHeight));
gamePiece.style.left = `${randomX}px`;
gamePiece.style.top = `${randomY}px`;
}, 1000);
} else {
isGameStarted = false;
startGameButton.textContent = '开始游戏';
clearInterval(gameInterval);
}
});
这个设计方案包括三个互动区域:音乐环节、绘画互动和探索游戏。每个区域都有相应的互动元素,如音乐播放按钮、绘画画布和游戏棋子。设计风格采用简洁明了的布局和色彩,方便幼儿操作和游玩。您可以根据实际需求对这个设计进行调整和扩展。
查看详情
查看详情