HTML实验三：扑克牌拖放小游戏。

Emery小张

已于 2023-10-24 22:15:51 修改

阅读量719

点赞数 6

文章标签： html 游戏前端 1024程序员节

于 2023-10-24 22:07:48 首次发布

本文链接：https://blog.csdn.net/weixin_59267622/article/details/134021255

版权

实验三：扑克牌拖放小游戏

实验目的
实验要求
具体实现

实验目的

理解元素拖放流程
理解CSS定位规则
熟悉DOM添加和删除子元素流程

实验要求

设计一款扑克牌拖放小游戏。在网页中插入A框和B框。要求用户拖动从A框拖动5张连续的扑克牌至B框，完成游戏。
具体要求：

初始时，A框包含13张随机乱序后的同花色扑克牌，以背面显示。
用户可任意拖动其中一张扑克牌至B框，扑克牌以正面展示。
用户也可将扑克牌从B框拖至A框，扑克牌会自动回到初始的位置，且背面展示。
B框最多能够容纳5张扑克牌。在接收到5张扑克牌后，如果满足顺子要求，则提示用户游戏结束并显示用户成绩（拖动次数）。若不满足要求，用户必须先将其中不满足的牌拖回A框，游戏方可继续。

具体实现

动态图演示

在这里插入图片描述

具体实现代码

代码里有很多控制台输出语句，
是方便我测试的时候看控制台数据用的，
介意的友友可以删掉

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态盒子生成随机蜘蛛纸牌游戏</title>
    <style>
    
      /*这里插入css代码*/
      
    </style>
</head>

<body>
    <div id="containerA" name="boxA">
        <!-- 13个小盒子将会在这里动态生成 -->
    </div>
    <div id="containerB">
        <div class="bigItem" id="boxB" draggable="true">
            拖入此处放入B盒子
        </div>
        <!-- 用于拖放纸牌 -->
    </div>
    <script>
    
        <!-- 此处插入JavaScript代码 -->
        
    </script>
</body>
</html>

css部分

 #containerA,
        #containerB {
   
            background-color: #009dffb5;
            position: relative;
            margin: 20px auto;
            border: dashed;
            width: 1568px;
            /* 你可以根据需要调整这个值 */
            height: 300px;
            /* 你可以根据需要调整这个值 */
            overflow: hidden;
            /* 防止小盒子溢出 */
        }

        .item {
   

            position: absolute;
            margin-left: 8px;
            /*左边距和宽度之和为120px*/
            width: 112px;
            /* 你可以根据需要调整这个值 */
            height: 160px;
            /* 你可以根据需要调整这个值 */
            line-height: 50px;
            /* 设置行高使得文字垂直居中 */
            text-align: center;
            /* 设置文字水平居中 */
            background-color: rgba(255, 0, 0, 0.413);
            /* 设置背景色以便看到小盒子 */
            border: 1px solid black;
            /* 设置边框以便看到小盒子的边缘 */
        }

        .bigItem