web前端期末大作业--HTML+CSS+JS实现美女拼图游戏

最新推荐文章于 2022-07-01 10:37:59 发布

前端码农..

最新推荐文章于 2022-07-01 10:37:59 发布

阅读量3.5k

点赞数 2

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/BYGFJ/article/details/121869002

版权

这是一篇关于如何使用HTML、CSS和JavaScript实现一个美女拼图游戏的前端大作业。适用于网页设计初学者，提供了完整的代码实现，适合大学期末网页设计作业需求，包含丰富的网页设计题材模板。

摘要由CSDN通过智能技术生成

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有个人、美食、公司、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的美女拼图游戏，画面精明，非常适合初学者学习使用。

代码目录：

主要代码实现：

html {
        padding: 0px;
        margin: 0px;
        background: #eee;
    }
 
    #gameDiv {
        width: 460px;
        height: 460px;
        margin: 20px auto;
        background: #F9F9F9;
        padding: 1px 1px;
        position: relative;
    }
 
    #maskBox {
        opacity: 0.5;
        display: block;
    }

JavaScript代码完整

<script>
        /**
         * Created by admin on 2021/11/10.
         */
        (function($g) {
            //游戏配置
            setting = {
                gameConfig: {
                    url: "345.jpg",
                    id: "gameDiv",
                    //生成规格横4 纵4
                    size: "4*4",
                    //每个元素的间隔
                    margin: 1,
                    //拖动时候块透明度
                    opacity: 0.8
                },
                setElement: {
                    type: "div",
                    id: "",
                    float: "",
                    display: "",
                    margin: "",
                    background: "",
                    width: "",
                    height: "",
                    left: "",
                    top: "",
                    position: "", //absolute
                    opacity: 0.4,
                    animate: 0.8
                }
            };
            //元素生成参数
            var _sg = setting.gameConfig;
            var _st = setting.setElement;
            var gameInfo = function() {};
            gameInfo.prototype = {
                init: function() {
                    this.creatObj();
                    this.eventHand();
                },
                sortObj: {
                    rightlist: [], //正确的排序
                    romdlist: [] //打乱后的排序
                },
                creatObj: function() {
                    _sg.bo