创建一个美观且功能完整的数独游戏，包含所有需求功能实现方案

王大师王文峰

于 2025-06-28 11:18:25 发布

阅读量1k

点赞数 29

CC 4.0 BY-SA版权

文章标签：游戏 html css

本文链接：https://blog.youkuaiyun.com/Feng_wwf/article/details/148973845

本人详解
作者：王文峰，参加过优快云 2020年度博客之星，《Java王大师王天师》
公众号：JAVA开发王大师，专注于天道酬勤的 Java 开发问题
中国国学、传统文化和代码爱好者的程序人生，期待你的关注和支持！本人外号：神秘小峯山峯
转载说明：务必注明来源（注明：作者：王文峰哦）

在这里插入图片描述

学习教程（传送门）

1、掌握 JAVA入门到进阶知识(持续写作中……）
2、学会Oracle数据库用法(创作中……）
3、手把手教你vbs脚本制作(完善中……）
4、牛逼哄哄的 IDEA编程利器(编写中……）
5、吐血整理的面试技巧(更新中……）

数独游戏实现

创建一个美观且功能完整的数独游戏，包含所有需求功能实现方案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数独游戏</title>
    <style>
        * {
     
     
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
     
     
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            padding: 20px;
        }
        
        .game-container {
     
     
            max-width: 600px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            padding: 25px;
        }
        
        .header {
     
     
            text-align: center;
            margin-bottom: 25px;
        }
        
        .header h1 {
     
     
            color: #1a2a6c;
            font-size: 2.5rem;
            margin-bottom: 8px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .header p {
     
     
            color: #555;
            font-size: 1.1rem;
        }
        
        .sudoku-container {
     
     
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .sudoku-grid {
     
     
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            border: 3px solid #333;
            background-color: #fff;
            margin-bottom: 20px;
        }
        
        .cell {
     
     
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.8rem;
            font-weight: bold;
            border: 1px solid #ccc;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }
        
        .cell:nth-child(3n):not(:nth-child(9n)) {
     
     
            border-right: 2px solid #333;
        }
        
        .cell:nth-child(n+19):nth-child(-n+27),
        .cell:nth-child(n+46):nth-child(-n+54) {
     
     
            border-bottom: 2px solid #333;
        }
        
        .cell.predefined {
     
     
            background-color: #f0f0f0;
            color: #1a2a6c;
        }
        
        .cell.user-input {
     
     
            color: #2980b9;
        }
        
        .cell.selected {
     
     
            background-color: #c1e4ff;
            transform: scale(1.05);
            z-index: 1;
            box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
        }
        
        .cell.error {
     
     
            color: #e74c3c;
            animation: shake 0.5s;
        }
        
        .input-overlay {
     
     
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        
        .number-selector {
     
     
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .number-btn {
     
     
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .number-btn:hover {
     
     
            background-color: #2980b9;
            transform: scale(1.1);
        }
        
        .controls {
     
     
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }
        
        .btn {
     
     
            padding: 12px 25px;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .btn:hover {
     
     
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
        }
        
        .btn:active {
     
     
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .solve-btn {
     
     
            background: linear-gradient(135deg, #27ae60, #2ecc71);
            color: white;
        }
        
        .reset-btn {
     
     
            background: linear-gradient(135deg, #e67e22, #f39c12);
            color: white;
        }
        
        .solution-btn {
     
     
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            color