js消消乐小游戏

最新推荐文章于 2024-05-12 12:20:48 发布

兔子爱萝卜@

最新推荐文章于 2024-05-12 12:20:48 发布

阅读量343

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/FG_1314/article/details/124727901

版权


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* 外部大盒 */
        .box,
        .start {
            width: 800px;
            height: 500px;
            margin: 0 auto;

        }

        .box {
            background-color: red;
            position: relative;
            overflow: hidden;
        }

        /* 内容盒子 */
        .content {
            width: 700px;
            height: 500px;
            background-color: blanchedalmond;
            float: right;
            position: relative;
        }

        /* 选项栏 */
        .wrap {
            width: 100px;
            height: 480px;
            background-color: cornsilk;
            padding: 10px 0;
        }

        .unmner p {
            padding: 10px;
            background-color: rgb(216, 162, 100);
            margin: 7px 0;
        }

        .start {
            background-color: #999;
            position: absolute;
            opacity: .7;
            top: 0;
            left: 0;
        }

        .start-box {
            width: 400px;
            height: 100px;
            background: black;
            position: absolute;
            top: 50%;
            left: 200px;
            color: #fff;
            text-align: center;
            font-size: 30px;
            line-height: 100px;
            cursor: pointer;
        }

        li img {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <!-- 隐形外盒子 -->
    <div class="box">
        <!-- 内容盒子 -->
        <div class="content">
            <ul>
                <li><img src="../image/1.png" /></li>
                <li></li>
            </ul>
        </div>

        <!-- 开始结束 -->
        <div class="wrap">
            <!-- 计分盒子 -->
            <div class="unmner">
                <p>得分: <span>0</span></p>
                <p>失分: <span>0</span></p>
                <p>下一个：<img src="../image/1.png" alt=""></p>
                <button>x2</button>
            </div>
        </div>
        <!-- 开始 -->
        <div class="start">
            <div class="start-box n">开始游戏</div>
        </div>
    </div>
    <script src="../utils.js"></script>
    <script>
        //获取元素 开始灰屏
        var start1 = document.getElementsByClassName("start")[0]
        var content = document.getElementsByClassName("content")[0]
        //开始游戏按钮
        var n1 = document.getElementsByClassName("n")[0]
        //获取元素img
        var ospan = document.getElementsByTagName("span")
        var oimg = document.getElementsByTagName("img")[0]
        var oimg1 = document.getElementsByTagName("img")[1]
        //获取img的left值
        var imgl = parseInt(getStyle(oimg, "left"));

        // 盒子高度
        var contenth = parseInt(getStyle(content, 'height'))
        //获取元素 内容文本
        var content1 = document.getElementsByClassName("content")[0]
        //获取元素 p
        var op = document.getElementsByTagName("p")
        console.log(start1, n1, oimg, imgl, content1, op, oimg1)
        //创建数组
        var arr = ["../image/1.png", "../image/2.png", "../image/4.png", "../image/5.png",
            "../image/6.png", "../image/7.png", "../image/8.png", "../image/9.png"
  ]
        var timer = null;
        var addNum = 0; //得分
        var stract = 0; //失分

        //点击取消灰屏  并开始游戏
        n1.onclick = function () {
            start1.style.display = "none";
            piot()
        }

        function piot() {
            //开始  随机出图
            // 随机范围   0-700
            //设置img的left 随机位置
            oimg.style.left = Math.floor(Math.random() * ((700 - 24) - 0 + 1) + 0) + "px";
            //设置随机图片
            oimg.src = arr[Math.floor(Math.random() * (arr.length - 1 - 0 + 1) + 0)]
            console.log(oimg.src = arr[Math.floor(Math.random() * (arr.length - 1 - 0 + 1) + 0)])
            oimg1.src = oimg.src
            //设置第二img
            //掉
            timer = setInterval(function () {
                // 获取当前的top值
                // var currentTop = parseInt(getStyle(face, 'top'))
                //获取img的top值
                var imgt = parseInt(getStyle(oimg, "top"));
                imgt = imgt + 10
                oimg.style.top = imgt + 'px'

                //限制位置 (表情出了盒子)
                if (imgt > contenth) {
                    clearInterval(timer)
                    oimg.style.top = '0px'
                    //失分 显示页面
                    stract--

                    ospan[1].innerHTML = Math.abs(stract)

                    piot()
                    //游戏结束
                    if(2<parseInt(ospan[1].innerHTML)){
                        start1.style.display = "block";
                        clearInterval(timer)
                        oimg.style.top = '0px'
                        oimg.style.left = '0px'
                    }
                }

            }, 100)
        }
        //表情点击消失

        oimg.onclick = function () {
            //分数++ 显示页面
            addNum++
            ospan[0].innerHTML = addNum

            //表情消失
            this.style.display = 'none'
            //清楚定时器
            clearInterval(timer)
            this.style.top = '0px'
            this.style.display = 'block'
            //随机表情 随机位置
            piot()

        }
    </script>
</body>

</html>


/*  getStyle(ele,attr)  获取非行间样式
* ele { object }  元素
* attr  {string} 样式名
*/

function getStyle(ele,attr){
    //做兼容处理  判断获取 计算机内的样式
    if(window.getComputedStyle){ // 如果此方法不存在  undefined  假  
       return window.getComputedStyle(ele)[attr]//retutn  返回函数值  计算机内的样式element元素，因为变量值-变量加[]阔住
    }else{
        return ele.currentStyle[attr]//现在的通用获取样式
    }
}
//-----分割线


    // 点击按钮让图片移动到500  left =500

  
   /*使用方式：
   列一：
   向右运动
    var timer=null;
    btn[0].onclick=function(){
        move(oimg,'left',500,10 )
    }
    列二：
    //向左运动
    btn[1].onclick=function(){
        // moveright(oimg,'left',0,-10)
        move(oimg,'left',0,-10)
    }*/

   /*move(ele,attr,target,step) 运动函数
    * ele { object }  元素 获取的样式名  如 odiv、oimg、oli等
    * attr  {string} 样式名 列:"left"、"top"注意实参带""号
    * target  {number} 目标值   列：设置的目标预定值
    * step  {number} 步长       列：实际移动距离
    */
    //把定时器id 存储在 元素的自定义属性timer 上
    function move (ele, attr, target, step) {
    //在频繁触发定时器之前清楚定时器  
    clearInterval(ele.timer)
    ele.timer = setInterval(function () {
        //获取当前的left值
        var currentLetf = parseInt(getStyle(ele, attr))
        currentLetf = currentLetf + step

        // moveright的判断  
        // 当前的值>=500                      
        // 向右运动的                         向左运动的
        if ((currentLetf >= target && step > 0) || (currentLetf <= target && step < 0)) {
            currentLetf = target
            //到达500位置 停止定时器
            clearInterval(ele.timer)
        }
        // 赋值
        ele.style[attr] = currentLetf + 'px'
    }, 50)
}



    //判断不同

    // 向左移动 currentLetf<=target step <0   
    // 向右移动 currentLetf>=target step >0

兔子爱萝卜@

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js消消乐小游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
复制链接

扫一扫