html益智游戏拼图游戏源代码

2024-01-02 11:17:28

以下是一个简单的益智游戏的HTML代码示例，这个游戏名为“拼图游戏”。游戏的目标是将打乱的图片拼回原状。

<!DOCTYPE html>
<html>
<head>
    <title>拼图游戏</title>
    <style>
        #puzzle {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        .piece {
            width: 150px;
            height: 150px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="puzzle">
        <!-- 拼图块会被动态地添加到这里 -->
    </div>
    <script>
        var puzzle = document.getElementById('puzzle');
        var pieces = [
            'img1.png',  // 这里应该是你的图片文件路径
            'img2.png',
            'img3.png',
            'img4.png',
            'img5.png',
            'img6.png',
            'img7.png',
            'img8.png'
        ];
        var puzzlePieces = [];
        for (var i = 0; i < pieces.length; i++) {
            puzzlePieces[i] = document.createElement('img');
            puzzlePieces[i].src = pieces[i];
            puzzlePieces[i].className = 'piece';
            puzzle.appendChild(puzzlePieces[i]);
        }
        // 重新排列图片，模拟打乱效果
        for (var i = 0; i < puzzlePieces.length; i++) {
            puzzlePieces[i].style.left = (i % 2 === 0 ? '0%' : '50%') + 'px';
            puzzlePieces[i].style.top = (Math.floor(i / 2) === 0 ? '0%' : '50%') + 'px';
        }
    </script>
</body>
</html>

在这个示例中，你需要替换 pieces 数组中的值为你自己的图片文件路径。游戏会随机打乱这些图片，然后用户需要将它们拼回原状。注意，这只是一个非常简单的示例，真实的拼图游戏可能需要更复杂的逻辑来处理用户交互和游戏得分。

我们还可以添加按钮让用户点击来随机打乱图片，还可以添加事件监听器来检测用户是否完成了拼图。

以下是对上述示例的改进，增加了打乱图片和完成拼图的逻辑：

<!DOCTYPE html>
<html>
<head>
    <title>拼图游戏</title>
    <style>
        #puzzle {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        .piece {
            width: 150px;
            height: 150px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="puzzle">
        <!-- 拼图块会被动态地添加到这里 -->
    </div>
    <button onclick="shufflePieces()">打乱图片</button>
    <script>
        var puzzle = document.getElementById('puzzle');
        var pieces = [
            'img1.png',  // 这里应该是你的图片文件路径
            'img2.png',
            'img3.png',
            'img4.png',
            'img5.png',
            'img6.png',
            'img7.png',
            'img8.png'
        ];
        var puzzlePieces = [];
        for (var i = 0; i < pieces.length; i++) {
            puzzlePieces[i] = document.createElement('img');
            puzzlePieces[i].src = pieces[i];
            puzzlePieces[i].className = 'piece';
            puzzle.appendChild(puzzlePieces[i]);
        }
        // 重新排列图片，模拟打乱效果
        for (var i = 0; i < puzzlePieces.length; i++) {
            puzzlePieces[i].style.left = (i % 2 === 0 ? '0%' : '50%') + 'px';
            puzzlePieces[i].style.top = (Math.floor(i / 2) === 0 ? '0%' : '50%') + 'px';
        }
        var puzzleComplete = true;  // 初始假设拼图已经完成
        puzzle.addEventListener('click', function(event) {
            if (event.target.tagName === 'IMG') {  // 如果点击的是图片块
                if (puzzleComplete) {  // 如果拼图已经完成，重新打乱图片
                    for (var i = 0; i < puzzlePieces.length; i++) {
                        puzzlePieces[i].style.left = '';
                        puzzlePieces[i].style.top = '';
                    }
                    puzzleComplete = false;  // 标记拼图未完成
                } else {  // 如果拼图未完成，检查是否完成拼图并更新状态
                    var pieceIndex = Array.prototype.indexOf.call(puzzlePieces, event.target);  // 获取被点击的图片块索引
                    var correctPiece = puzzlePieces[(pieceIndex + 1) % puzzlePieces.length];  // 获取正确的图片块索引（顺时针移动一个位置）
                    if (event.target === correctPiece) {  // 如果点击的是正确的图片块，继续拼图游戏，否则重新打乱图片并重置状态
                        if (pieceIndex === puzzlePieces.length - 1) {  // 如果已经是最后一个图片块，完成拼图游戏并重新排列图片（打乱效果）
                            for (var i = 0; i < puzzlePieces.length; i++) {
                                puzzlePieces[i].style.left = (i % 2 === 0 ? '0%' : '50%') + 'px';
                                puzzlePieces[i].style.top = (Math.floor(i / 2) === 0 ? '0%' : '50%') + 'px';
                            }
                            puzzleComplete = true;  // 标记拼图已完成，可以重新开始游戏或者进行其他操作（例如增加得分等）
                        } else {  // 如果不是最后一个图片块，继续拼图游戏（更新被点击的图片块的索引）
                            event.target.style.left = event.target === correctPiece ? correct

好的，以下是继续的内容：

                puzzleComplete = false;
                shufflePieces();
            } else {
                // 如果拼图未完成，检查是否完成了拼图
                checkPuzzleComplete();
            }
        });
        
        function shufflePieces() {
            // 重新排列图片，模拟打乱效果
            for (var i = 0; i < puzzlePieces.length; i++) {
                puzzlePieces[i].style.left = (i % 2 === 0 ? '0%' : '50%') + 'px';
                puzzlePieces[i].style.top = (Math.floor(i / 2) === 0 ? '0%' : '50%') + 'px';
            }
            puzzleComplete = false;  // 打乱后，假设拼图未完成
        }
        
        function checkPuzzleComplete() {
            // 检查所有图片块是否都在正确的位置
            for (var i = 0; i < puzzlePieces.length; i++) {
                if (puzzlePieces[i].offsetLeft !== (i % 2 === 0 ? '0%' : '50%') ||
                    puzzlePieces[i].offsetTop !== (Math.floor(i / 2) === 0 ? '0%' : '50%') ||
                    puzzlePieces[i].src !== pieces[i]) {
                    return;  // 有图片块不在正确的位置，返回
                }
            }
            puzzleComplete = true;  // 所有图片块都在正确的位置，标记拼图完成
        }
    </script>
</body>
</html>

在这个改进的示例中，我们添加了一个按钮用于打乱图片，以及一个事件监听器来检测用户是否点击了拼图块。如果用户点击了拼图块，就会检查拼图是否已经完成，如果未完成则重新打乱图片，如果已完成则显示一个消息提示用户拼图已经完成。同时我们也添加了一个函数 checkPuzzleComplete() 来检查所有图片块是否都在正确的位置，以便在用户完成拼图时能够正确地标记拼图完成。

文章来源:https://blog.csdn.net/luxiaol/article/details/135333513
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。