用html+css+jQuery写俄罗斯方块——但钟离版

最新推荐文章于 2024-08-21 13:57:41 发布

君以露

最新推荐文章于 2024-08-21 13:57:41 发布

阅读量585

点赞数

分类专栏：俄罗斯方块文章标签： css3 jquery html5

本文链接：https://blog.csdn.net/yrmth166/article/details/127983379

版权

本文介绍了如何使用HTML、CSS和jQuery来制作一款特别的俄罗斯方块游戏，特色在于独特的地心和天星效果。地心效果会使方块移动速度减半，持续5秒，玩家初始有一次机会，之后每60秒获得一次。天星效果则能消除最底部四行已固定的方块，玩家首次游玩120秒后和完成四连消时可触发。文章提供了包含部分图片的代码示例。

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

———玩法
地心：
效果:方块移速变慢(为当前速度的二分之一)，持续五秒
获取方式:初始一次,每60秒获取一次

天星：
效果:执行两秒动画后,消除最底部四行方块(仅可消除无法移动的方块)
获取方式:初始一次,第一次游玩120秒获取一次(一次),完成成四连消获取一次(多次)

代码如下(有部分图片，无伤大雅)：

<!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>制作人—才子佳人</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script><!-- 导入jQuery插件 -->
</head>
<script>
    $(function () {
        //一个格子宽30px 高30px
        //界面宽10个格子，高20格子 宽300高600
        // □        □ □        □ □ □        □          □       □ □     □ □
        // □        □ □          □          □          □     □ □         □ □
        // □                                □ □      □ □ 
        // □
        //方块样式^    含义分别为I、O、T、L、J、S、Z
        let popo = null//取随机生成方块的值
        let getTimes = 1000//移动速度
        let $tr = $('tbody tr')//获取所有tr
        let $td = $('tbody td')//获取所有td
        let divclass = ['divI', 'divO', 'divT', 'divL', 'divJ', 'divS', 'divZ']//装着方块颜色(class类名)
        let aa = null
        let bb = null
        let wui = null;
        let EGoodTime = null//E——冷却时间计时器
        let firm = 1//记录地心技能次数
        let QGoodTime = null//Q——冷却时间计时器(一次)
        let this_is_order = 1//记录天动万象技能次数
        let noiuy = $('<img src="试1用.gif" class="wodeshijie" alt="动图">')
        let nosiawfafwf = ['真不错！', '漂亮！', '可以哟！', '真棒！']
        let fenshume = null//分数
        let p = null//记录翻转哪个九十度
        let Time_1_s = null//记录一局游戏时间
        let qiqiguaiguai = true
        let bangdshijian = true
        let wodetiantaimafanle = false
        let wodemimi = null//记录选择的难度——使用技能后用此值恢复
        let iotljsz = {
            If: function (s) {
                p = 0
                let num = 2//控制生成方块位置
                let X_s = parseInt(Math.random() * (8 - 0) + 0)//创建横(X)坐标
                let Y_s = X_s + 30   //——————————————————————创建纵(Y)坐标
                if (s == 0) {
                    for (i = 0; i < 4; i++) {
                        let $div = $('<div class=' + divclass[s] + '></div>')//创建一个方块
                        $($td)[Y_s].append($($div)[0])
                        Y_s -= 10
                        num--
                    }//I方块
                } else if (s == 1) {
                    for (i = 0; i < 4; i++) {
                        let $div = $('<div class=' + divclass[s] + '></div>')//创建一个方块
                        $($td)[Y_s].append($($div)[0])
                        if (num == 1) { Y_s -= 11 } else { Y_s++ }
                        num--
                    }//田方块
                } else if (s == 2) {
                    if (X_s == 0) { Y_s++ }//防止生成bug
                    for (i = 0; i < 4; i++) {
                        let $div = $('<div class=' + divclass[s] + '></div>')//创建一个方块
                        $($td)[Y_s].append($($div)[0])
                        if (num == 2) { Y_s -= 9 } else { Y_s-- }
                        num--
                    }//T方块
                } else if (s == 3) {
                    for (i = 0; i < 4; i++) {
                        let $div = $('<div class=' + divclass[s] + '></div>')//创建一个方块
                        $($td)[Y_s].append($($div)[0])
                        if (num == 2) { Y_s++ } else if (num == 1) {
                            Y_s -= 11
                        } else { Y_s -= 10 }
                        num--
                    }//L方块
                } else if (s == 4) {
                    for (i = 0; i < 4; i++) {
                        let $div = $('<div class=' + divclass[s] + '></div>')//创建一个方块
                        $($td)[Y_s].append($($div)[0])
                        if (num == 2) { Y_s++ } else { Y_s -= 10 }
                        num--
                    }//J方块
                } else if (s == 5) {
                    if (X_s == 8) { Y_s-- }//防止生成bug
                    for (i = 0; i < 4; i++) {
                        let $div = $('<div class=' + divclass[s] + '></div>')//创建一个方块
                        $($td)[Y_s].append($($div)[0])
                        if (num == 1) { Y_s -= 10 } else { Y_s++ }
                        num--
                    }//S方块
                } else if (s == 6) {
                    if (X_s == 8) { Y_s-- }
                    Y_s -= 10
                    for (i = 0; i < 4; i++) {
                        let $div = $('<div class=' + divclass[s] + '></div>')//创建一个方块
                        $($td)[Y_s].append($($div)[0])
                        if (num == 1) { Y_s += 10 } else { Y_s++ }
                        num--
                    }//Z方块
                }
                Go_obj.Go()//调用计时器
            }
        }
        let Go_obj = {
            Go: function () {
                let Time1 = setInterval(() => {
                    if (qiqiguaiguai && (getTimes != wodemimi)) {
                        clearInterval(Time1);
                        Go_obj.Go()
                        qiqiguaiguai = false
                        let Timeorder = setTimeout(() => {
                            getTimes = wodemimi
                            qiqiguaiguai = true
                            clearInterval(Time1);
                        }, 10000)
                    }//玉璋护盾
                    let U = null
                    wui = $('tbody div.' + divclass[popo])
                    let olixie = new Array()//储存每个div值
                    let name = true
                    aa = wui
                    $(wui).each(function (e, c) {
                        let indextr = $(c).closest($('tr')).index()
                        let indextd = $(c).closest($('td')).index()
                        let trobj = indextr * 10
                        U = trobj + indextd
                        if (U >= 230 && name) {
                            aa = null
                            name = false
                            $(wui).removeClass(divclass[popo])
                            $(wui).addClass('lets_no')
                            clearInterval(Time1);
                            Go_obj.Ture()
                            return false;
                        }
                    })

                    if (($('tbody div.lets_no').length) && name) {
                        $(wui).each(function (e, c) {
                            let indextr = $(c).closest($('tr')).index()
                            let indextd = $(c).closest($('td')).index()
                            let trobj = indextr * 10 + 10
                            U = trobj + indextd
                            if ($($td[U]).html() == '<div class="lets_no"></div>') {
                                aa = null
                                name = false
                                $(wui).removeClass(divclass[popo])
                                $(wui).addClass('lets_no')
                                clearInterval(Time1);
                                Go_obj.Ture()
                                return false;
                            }
                        })
                    }

                    hao()

                    if (name) {//判断移动
                        $(wui).each(function (e, c) {
                            let indextr = $(c).closest($('tr')).index()
                            let indextd = $(c).closest($('td')).index()
                            let trobj = indextr * 10 + 10
                            U = trobj + indextd
                            olixie.push(U);
                            $($td[U]).append($(c))//改变位置
                        })
                    }

                    $('tbody div.lets_no').each(function (e, c) {
                        let indextr = $(c).closest($('tr')).index()
                        let indextd = $(c).closest($('td')).index()
                        let trobj = indextr * 10
                        let ouys = trobj + indextd
                        if (ouys < 80) {
                            wodetiantaimafanle = false
                            $('div.div—boss').css('display', 'block')
                            clearInterval(Time1);
                            $('p.fenshu'