js拼图游戏，记忆纸牌游戏

最新推荐文章于 2024-04-30 16:57:21 发布

VIP文章睡觉睡觉神精病

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量91

点赞数

分类专栏： js面向对象编程文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_62026062/article/details/128819387

版权

评图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin:0;padding:0;}
            .box{
                width:600px;
                height:600px;
                border:5px solid red;
                position:relative;
            }
            .box>div{
                width:200px;
                height:200px;
                background-image:url(1.webp);
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <!-- <div class="a1"></div>
            <div class="a2"></div>
            <div class="a3"></div>
            <div class="a4"></div>
            <div class="a5"></div>
            <div class="a6"></div>
            <div class="a7"></div>
            <div class="a8"></div>
            <div class="a9"></div> -->
        </div>
        <script>
            /* 
                面向对象编程 代码的高度封装
             */
            // 定义构造函数 设置游戏
            // num 代表游戏规格
            function Game(num,selectBox){
                // this.num 游戏内内容的个数
                this.allNum = Math.pow(num,2);
                // this.selectBox 接受传入的元素
                this.selectBox = selectBox;
                // this.passGame 接受通关地图
                this.passGame = [];
                // this.maveGame 接受被打乱的地图
                this.moveGame = [];
                // this.whiteBox 接受白块
                this.whiteBox = null;
                // 定义游戏是否结束
                this.flag = false;
                // 设置初始化方法
                this.init()
            }
            
            // 定义初始化方法
            Game.prototype.init=function(){
                // 创建初始地图
                this.createPass()
                // 创建被打乱的地图
                this.createMove()
                // 将打乱的地图添加的页面上
                this.appendMap()
                // 给每一个元素都添加事件
                this.addEvents()
            }
            
            // 定义创建初始地图方法
            Game.prototype.createPass=function(){
                // console.log('开始创建地图')
                // 定义x与y轴
                var x=0;
                var y=-1;
                // 根据设置的内容个数进行内容创建
                for(var i=0;i<this.allNum;i++){
                    // 创建div标签
                    var div = document.createElement('div');
                    // 设置div标签相