原始碼

滑鼠練習原始碼

滑鼠練習程式是利用 Gemini 產生的程式，以下為 html 原始碼。

需要的人請自行取用。

<!DOCTYPE html>

<head>

<title>滑鼠練習程式</title>

<style>

body {

font-family: 'Inter', sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.task-container {

display: none;

}

.task-container.active {

display: flex;

}

.point-circle {

transition: all 0.2s ease-in-out;

}

.drag-source {

cursor: grab;

transition: transform 0.1s ease-out;

}

.drag-source:active {

cursor: grabbing;

}

</style>

</head>

<h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">滑鼠練習程式</h1>

<p class="text-gray-600 mb-8">讓我們來練習滑鼠的基本操作。<br>每完成10次練習，會顯示你的過關時間</p>

<p class="text-gray-700 text-lg">選擇您想練習的操作：</p>

點一下練習

</button>

點兩下練習

</button>

右鍵練習

</button>

拖曳練習

</button>

</div>

<h2 class="text-2xl font-bold mb-4 text-blue-700">點一下練習</h2>

<p class="text-gray-600 mb-4">請在圓圈出現時，用滑鼠左鍵「點一下」。</p>

</div>

結束練習

</button>

</div>

<h2 class="text-2xl font-bold mb-4 text-green-700">點兩下練習</h2>

<p class="text-gray-600 mb-4">請在圓圈出現時，用滑鼠左鍵「點兩下」。</p>

</div>

結束練習

</button>

</div>

<p class="text-gray-600 mb-4">請在圓圈出現時，用滑鼠「右鍵」點擊。</p>

</div>

結束練習

</button>

</div>

<p class="text-gray-600 mb-4">請將藍色圓圈拖曳到指定的虛線框內。</p>

</div>

結束練習

</button>

</div>

回到主頁

</button>

</div>

// 狀態變數

let currentTask = '';

let score = 0;

let targetInterval;

let synth;

let isDragging = false;

let startTime; // 新增：開始時間變數

const WINNING_SCORE = 10;

// 重置所有事件監聽器，確保每個練習關卡都能獨立運作

function resetEventListeners() {

// 點擊練習

const clickTarget = document.getElementById('click-target');

clickTarget.onclick = null;

// 點兩下練習

const doubleClickTarget = document.getElementById('double-click-target');

doubleClickTarget.ondblclick = null;

// 右鍵練習

const rightClickTarget = document.getElementById('right-click-target');

rightClickTarget.oncontextmenu = null;

const rightClickArea = document.getElementById('right-click-area');

rightClickArea.oncontextmenu = null;

// 拖曳練習

const dragArea = document.getElementById('drag-area');

const dragSource = document.getElementById('drag-source');

dragArea.onmousemove = null;

dragArea.onmouseup = null;

dragSource.onmousedown = null;

dragArea.onmouseleave = null;

// 清除計時器

clearInterval(targetInterval);

}

// 啟動練習

function startTask(task) {

// 每次開始新任務前，先清除所有舊的事件監聽器和計時器

resetEventListeners();

currentTask = task;

score = 0;

startTime = Date.now(); // 新增：記錄開始時間

// 修正：使用 Tone.PolySynth 替換 Tone.Synth 以支援和弦播放

if (!synth) {

synth = new Tone.PolySynth().toDestination();

}

// 由於瀏覽器安全政策，音效必須在使用者互動後啟動

Tone.start();

// 隱藏所有畫面，只顯示選擇的練習

document.getElementById('welcome-screen').style.display = 'none';

document.getElementById('click-task').style.display = 'none';

document.getElementById('double-click-task').style.display = 'none';

document.getElementById('right-click-task').style.display = 'none';

document.getElementById('drag-task').style.display = 'none';

document.getElementById('result-screen').style.display = 'none';

document.getElementById(`${task}-task`).style.display = 'flex';

document.getElementById(`${task}-score`).textContent = (task === 'drag' ? '成功次數：0' : '點擊次數：0');

// 根據不同任務設定不同的事件監聽器

if (task === 'click' || task === 'double-click' || task === 'right-click') {

const target = document.getElementById(`${task}-target`);

const area = document.getElementById(`${task}-area`);

if (task === 'click') {

target.onclick = (e) => handleEvent('click', e);

} else if (task === 'double-click') {

target.ondblclick = (e) => handleEvent('double-click', e);

} else if (task === 'right-click') {

target.oncontextmenu = (e) => {

e.preventDefault();

handleEvent('right-click', e);

};

area.oncontextmenu = (e) => e.preventDefault();

}

moveTarget(target, area);

targetInterval = setInterval(() => moveTarget(target, area), 1500);

} else if (task === 'drag') {

const source = document.getElementById('drag-source');

const area = document.getElementById('drag-area');

const target = document.getElementById('drop-target');

// 初始化拖曳目標和來源的位置

moveDragElements(source, target, area);

// 註冊拖曳事件監聽器

source.onmousedown = (e) => {

isDragging = true;

// 防止圖片拖曳

e.preventDefault();

// 紀錄滑鼠在圓圈內的偏移量

const offsetX = e.clientX - source.getBoundingClientRect().left;

const offsetY = e.clientY - source.getBoundingClientRect().top;

area.onmousemove = (moveEvent) => {

if (isDragging) {

const newX = moveEvent.clientX - area.getBoundingClientRect().left - offsetX;

const newY = moveEvent.clientY - area.getBoundingClientRect().top - offsetY;

source.style.left = `${newX}px`;

source.style.top = `${newY}px`;

}

};

area.onmouseup = () => {

isDragging = false;

area.onmousemove = null;

const dropTargetRect = target.getBoundingClientRect();

const dragSourceRect = source.getBoundingClientRect();

// 檢查圓圈是否在虛線框內

if (

dragSourceRect.left >= dropTargetRect.left &&

dragSourceRect.right <= dropTargetRect.right &&

dragSourceRect.top >= dropTargetRect.top &&

dragSourceRect.bottom <= dropTargetRect.bottom

) {

score++;

document.getElementById('drag-score').textContent = `成功次數：${score}`;

synth.triggerAttackRelease("G4", "8n");

// 成功後重置位置

moveDragElements(source, target, area);

// 新增：檢查是否達成過關分數

if (score >= WINNING_SCORE) {

endTask(true);

}

} else {

// 失敗後回到初始位置

source.style.left = '10px';

source.style.top = '10px';

}

};

// 在拖曳區域外放開滑鼠時也停止拖曳

area.onmouseleave = () => {

if (isDragging) {

isDragging = false;

area.onmousemove = null;

}

};

}

// 處理點擊事件

function handleEvent(task, e) {

const target = document.getElementById(`${task}-target`);

if (e.target.id === target.id) {

score++;

document.getElementById(`${task}-score`).textContent = `點擊次數：${score}`;

// 播放音效

synth.triggerAttackRelease("C4", "8n");

// 成功後移動圓圈

moveTarget(target, document.getElementById(`${task}-area`));

// 新增：檢查是否達成過關分數

if (score >= WINNING_SCORE) {

endTask(true);

}

// 專為點擊練習所設計，使圓圈隨機移動

function moveTarget(target, area) {

const areaRect = area.getBoundingClientRect();

const targetRect = target.getBoundingClientRect();

const newX = Math.random() * (areaRect.width - targetRect.width);

const newY = Math.random() * (areaRect.height - targetRect.height);

target.style.left = `${newX}px`;

target.style.top = `${newY}px`;

}

// 專為拖曳練習所設計，移動拖曳目標和來源

function moveDragElements(source, target, area) {

const areaRect = area.getBoundingClientRect();

const targetRect = target.getBoundingClientRect();

// 設定虛線框的隨機位置

const margin = 20;

const newTargetX = Math.random() * (areaRect.width - targetRect.width - margin * 2) + margin;

const newTargetY = Math.random() * (areaRect.height - targetRect.height - margin * 2) + margin;

target.style.left = `${newTargetX}px`;

target.style.top = `${newTargetY}px`;

// 設定拖曳圓圈的固定初始位置

source.style.left = '10px';

source.style.top = '10px';

}

// 結束練習

function endTask(isVictory) {

resetEventListeners(); // 停止圓圈移動

document.getElementById('click-task').style.display = 'none';

document.getElementById('double-click-task').style.display = 'none';

document.getElementById('right-click-task').style.display = 'none';

document.getElementById('drag-task').style.display = 'none';

const resultScreen = document.getElementById('result-screen');

const finalScore = document.getElementById('final-score');

let taskText = '';

if (currentTask === 'click') taskText = '點一下練習';

if (currentTask === 'double-click') taskText = '點兩下練習';

if (currentTask === 'right-click') taskText = '右鍵練習';

if (currentTask === 'drag') taskText = '拖曳練習';

// 根據是否過關顯示不同訊息和播放不同音效

if (isVictory) {

const elapsedTime = (Date.now() - startTime) / 1000; // 計算經過時間

finalScore.textContent = `恭喜過關！您花了 ${elapsedTime.toFixed(2)} 秒完成！`;

synth.triggerAttackRelease(["C4", "E4", "G4"], "1s"); // 播放和弦音效

} else {

finalScore.textContent = `在 ${taskText} 中，您成功點擊了 ${score} 次！`;

}

resultScreen.style.display = 'block';

}

// 重置程式

function resetApp() {

document.getElementById('result-screen').style.display = 'none';

document.getElementById('welcome-screen').style.display = 'block';

}

// 初始載入時隱藏所有任務畫面

document.addEventListener('DOMContentLoaded', () => {

document.getElementById('click-task').style.display = 'none';

document.getElementById('double-click-task').style.display = 'none';

document.getElementById('right-click-task').style.display = 'none';

document.getElementById('drag-task').style.display = 'none';

document.getElementById('result-screen').style.display = 'none';

});

</script>

</body>

</html>

Page updated

Report abuse