python+html网页版扫雷

最新推荐文章于 2024-10-15 17:32:53 发布

a_blue_fat

最新推荐文章于 2024-10-15 17:32:53 发布

阅读量671

点赞数 17

分类专栏： python html 文章标签：数据库 python html

本文链接：https://blog.csdn.net/2301_80120329/article/details/139667008

版权

python 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

采用框架

django web框架

创建项目

终端输入：

django-admin startproject xxx（xxx为想要创建的项目名）

我这里创建的是 mysite2

django-admin startproject mysite2

模板设置

配置templates文件夹

项目目录下创建templates目录，找到项目下与项目同名的文件包打开 setting.py,进行配置文件夹

在setting.py中找到TEMPLATES模板进行修改

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,"templates")],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

静态文件夹设置

最后一行添加

STATIC_URL = 'static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR,"static"),)

语言和时区设置

修改

LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

创建应用

 python ``.\manage.py startapp xxx(xxx为应用名)

注册应用

找到项目下与项目同名的文件包打开 setting.py打开找到NSTALLED_APPS模板

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 在用的应用上加一个与你创建的应用同名的值
    'bookstore',


]

配置应用地址

找到项目下与项目同名的文件包打开 urls.py打开找到NSTALLED_APPS模板

from django.contrib import admin
from django.urls import path, include
from . import views
urlpatterns = [
    path('admin/', admin.site.urls),
  # 添加新的地址 path中第一个双引号中如果为空则网站主页直接跳转到
  # bookstore应用内
    path("", include("bookstore.urls")),
]

创建网页界面和配置打开应用网页界面地址

在bookstore目录下找到templates目录(没有就创建一个)，再创建一个bookstore目录，在此目录下创建一个play.html将下面代码粘贴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消消乐</title>
    {% load static %}
    <style>
        body{
            background-image: url("{% static 'image/back.jpg' %}");
            background-size: 100% 100%;
        }
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .game-container {
            margin: auto;
            display: flex;
            flex-direction: column;
            height: 600px;
            width: 1000px;
        }
        .game-header {
            text-align: center;
            padding: 20px;
        }
        .game-board {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
            flex: 1; /* 占据剩余空间 */
        }
        .game-cell {
            background-image: url({% static 'image/1.jpg' %});
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid red;
            {#margin: 5px; /* 增加外边距以区分单元格 */#}
            flex: 0 0 calc(25% - 10px); /* 每个单元格占据25%宽度，减去两倍的外边距 */
            height: 100px; /* 假设每个单元格的高度是固定的 */
            width: 20%;
            overflow: hidden; /* 防止图片溢出单元格 */
        }
        input{
            background-image: url({% static 'image/fg.png' %});
            background-size: 100% 100%;
            width: 100%;
            height: 100%;
        }
        .game-image1{
            background-image: url({% static 'image/fg.png' %});
        }
       .game-image1.clicked{
            background-image: url("{% static 'image/wrang.jpg' %}");
            background-size: 100% 100%;
           background-color: transparent;
           {#border: 3px solid blue;#}
        }
        {#.game-cell:hover{#}
        {#    background-image: url("{% static 'image/test.jpg' %}");#}
                .game-image2{
            background-image: url({% static 'image/fg.png' %});
        }
       .game-image2.clickeds{
            background-image: url("{% static 'image/right.jpg' %}");
            background-size: 100% 100%;
           {#border: 3px solid blue;#}
        }

    </style>

</head>
<body>
    <div class="game-container">
        <div class="game-header">
            <h1>扫雷</h1>
        </div>
        <div class="game-board">
                {% for image in lens %}
            {% if image in boom %}
                    <div class="game-cell">
                        <input type="button" class="game-image1" alt="Game Image" id="images">
                </div>
                    {% else %}
                <div class="game-cell" style=" background-image: url({% static 'image/1.jpg' %});">
                        <input type="button" class="game-image2" alt="Game Image">
                </div>
                    {% endif %}



                {% endfor %}
                </div>
        </div>
    <script>
// 获取所有的按钮元素
var buttons = document.querySelectorAll('.game-image1');

// 为每个按钮添加点击事件监听器
buttons.forEach(function(button) {
    button.addEventListener("click", function() {
        // 切换clicked类，以改变背景颜色
        this.classList.add("clicked");
        alert('你被炸死了');
    });
});
var buttonss = document.querySelectorAll('.game-image2');

// 为每个按钮添加点击事件监听器
buttonss.forEach(function(button) {
    button.addEventListener("click", function() {
        // 切换clicked类，以改变背景颜色
        this.classList.add("clickeds");
    });
});
    </script>
</body>
</html>

静态文件存储位置

在bookstore目录下找到static目录(没有就创建一个)，放入资源网页版扫雷image的zip文件并解压（命名为image）

配置打开应用网页界面地址

在bookstore目录下找到urls.py(没有就创建一个)写法如下

from django.urls import path, include
from bookstore import views
urlpatterns = [
	连接到views.py文件中的自定义函数views.play_view
    path("", views.play_view, name="all_book_index"),

]

在views.py中写入方法

def play_view(request):
    images = ["image/background_image.jpg","image/background_image.jpg","image/background_image.jpg","image/background_image.jpg",
              "image/background_image.jpg","image/background_image.jpg","image/background_image.jpg","image/background_image.jpg",
              "image/background_image.jpg","background_image.jpg","image/background_image.jpg","image/background_image.jpg",
              "image/background_image.jpg","image/background_image.jpg","background_image.jpg","image/background_image.jpg",]
    # 随机选择图片
    selected_images = random.sample(images, 16)  # 例如选择16张图片
    le_images = [str(num) for num in range(len(selected_images))]
    booms = random.sample(le_images, 4)
    booms_id = json.dumps(booms)
    false = [str(num) for num in range(3)]
    right = [str(num) for num in range(16-3)]

    context = {'images':selected_images, 'boom': booms, 'lens': le_images,
               'false':false, 'right':right, 'booms_id':booms_id}

    return render(request, 'bookstore/play.html', context)