DeepSeek简单实现写个少儿英文单词的连线的页面-CSDN博客

本文链接：https://blog.csdn.net/weixin_41722928/article/details/146247784

以下是一个使用 HTML、CSS 和 JavaScript 实现的少儿英文单词连线页面的示例代码。这个页面会展示一些英文单词和对应的图片，用户可以通过鼠标拖动线条将单词和正确的图片连接起来。

代码思路

HTML 部分：用于创建页面的基本结构，包括单词列表、图片列表和一个用于绘制连线的画布。
CSS 部分：用于设置页面的样式，使单词和图片排列整齐，画布覆盖整个页面。
JavaScript 部分：用于处理鼠标事件，实现连线的绘制和判断连线是否正确。

示例代码

<!DOCTYPE html>
<html lang="en">

<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;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }

        .word-list,
        .image-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .word,
        .image {
            cursor: pointer;
            padding: 10px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 5px;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>

<body>
    <div class="word-list">
        <div class="word" data-word="apple">apple</div>
        <div class="word" data-word="banana">banana</div>
        <div class="word" data-word="cherry">cherry</div>
    </div>
    <div class="image-list">
        <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Red_Apple.jpg/1200px-Red_Apple.jpg"
            data-word="apple" alt="apple" width="100">
        <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bananas_white_background.jpg/1200px-Bananas_white_background.jpg"
            data-word="banana" alt="banana" width="100">
        <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Cherry_Stella.jpg/1200px-Cherry_Stella.jpg"
            data-word="cherry" alt="cherry" width="100">
    </div>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const words = document.querySelectorAll('.word');
        const images = document.querySelectorAll('.image');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let startElement = null;
        let startX, startY;

        words.forEach(word => {
            word.addEventListener('mousedown', (e) => {
                startElement = word;
                const rect = word.getBoundingClientRect();
                startX = rect.right;
                startY = rect.top + rect.height / 2;
                document.addEventListener('mousemove', drawLine);
                document.addEventListener('mouseup', endLine);
            });
        });

        function drawLine(e) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(e.clientX, e.clientY);
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 2;
            ctx.stroke();
        }

        function endLine(e) {
            document.removeEventListener('mousemove', drawLine);
            document.removeEventListener('mouseup', endLine);

            images.forEach(image => {
                const rect = image.getBoundingClientRect();
                if (e.clientX >= rect.left && e.clientX <= rect.right &&
                    e.clientY >= rect.top && e.clientY <= rect.bottom) {
                    if (startElement.dataset.word === image.dataset.word) {
                        ctx.beginPath();
                        ctx.moveTo(startX, startY);
                        ctx.lineTo(rect.left, rect.top + rect.height / 2);
                        ctx.strokeStyle = 'green';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                        alert('连线正确！');
                    } else {
                        alert('连线错误，请重试。');
                    }
                }
            });
            startElement = null;
        }
    </script>
</body>

</html>