html 小游戏俄罗斯方块

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

squabLi

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

阅读量3.8k

点赞数 8

分类专栏：游戏文章标签： html 游戏

本文链接：https://blog.csdn.net/IT_arookie/article/details/108352500

版权

本文介绍了如何使用HTML创建一个简单的俄罗斯方块小游戏。通过HTML布局和样式设置，实现了方块的显示和基本游戏功能。

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

样式如下：
在这里插入图片描述
html代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>俄罗斯方块</title>
        <style>
            body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, textarea, p, blockquote, th, td {
    
                padding: 0;
                margin: 0;
            }

            body {
    
                font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
                font-size: 12px;
                background: #fff;
                color: #333;
            }

            a {
    
                outline: none;
                -moz-outline: none;
                text-decoration: none;
            }

            .wrap {
    
                width: 1000px;
                margin: 10px auto;
            }

            .play_wrap {
    
                padding-left: 260px;
            }

            #play_area {
    
                float: left;
                width: 300px;
                height: 480px;
                margin: auto;
                background-color: #fefefe;
                border-radius: 2px;
                color: black;
                box-shadow: 0px 0px 8px #e5e5e5;
                padding: 1px 0 0 1px;
            }

            #play_area .play_cell {
    
                float: left;
                width: 19px;
                height: 19px;
                border: 1px solid #eee;
                margin: -1px 0 0 -1px;
            }

            #play_area .play_cell.active {
    
                background: #999;
                border: 1px solid #ccc;
            }

            #play_area .play_cell.goal {
    
                background: #0C0;
            }

            .play_menu {
    
                float: left;
                margin-left: 60px;
                font-size: 14px;
                padding-top: 20px;
            }

            .play_menu #play_nextType {
    
                width: 60px;
                height: 60px;
                padding: 1px 0 0 1px;
                margin: 10px 0 20px 00px;
            }

            .play_menu .play_mini_cell {
    
                float: left;
                width: 14px;
                height: 14px;
                border: 1px solid #fff;
                margin: -1px 0 0 -1px;
            }

            .play_menu .play_mini_cell.active {
    
                background: #999;
                border: 1px solid #ccc;
            }

            .play_menu p {
    
                line-height: 200%;
                clear: both;
            }

            .play_menu a.play_btn {
    
                display: block;
                margin-bottom: 20px;
                width: 80px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                text-decoration: none;
                color: #333;
                background: #fefefe;
                border: 1px solid #eee;
                border-radius: 2px;
                box-shadow: 1px 1px 2px #eee;
                border-color: #ddd #d2d2d2 #d2d2d2 #ddd;
                outline: none;
                -moz-outline: none;
            }

            .play_menu a.play_btn:hover {
    
                background-color: #fcfcfc;
                border-color: #ccc;
                box-shadow: inset 0 -2px 6px #eee;
            }

            .play_menu a#play_btn_level {
    
                position: relative;
                margin-bottom: 30px;
            }

            .level_text {
    
                margin-left: -10px;
            }

            .level_icon {
    
                display: block;
                position: absolute;
                top: 12px;
                right: 16px;
                width: 0;
                height: 0;
                overflow: hidden;
                border: 5px solid #FFF;
                border-color: #999 transparent transparent transparent;
            }

            .level_menu {
    
                position: absolute;
                margin: -30px 0 0px 1px;
                display: none;
            }

            .level_menu ul {
    
                list-style: none;
            }

            .level_menu li {
    
                float: left;
            }

            .level_menu li a {
    
                display: block;
                padding: 3px 10px;
                border: 1px solid #e8e8e8;
                margin-left: -1px;
                color: #09c;
            }

            .level_menu li a:hover {
    
                background: #09c;
                color: #fefefe;
            }
        </style>

        <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    var Tetris = function (options) {
    
        this.e_playArea = $("#play_area");
        this.e_startBtn = $("#play_btn_start");
        this.e_playScore = $("#play_score");
        this.e_playDirection = $("#play_direction");
        this.e_levelBtn = $("#play_btn_level");
        this.e_levelMenu = $("#play_menu_level");
        this.e_nextType = $("#play_nextType");

        this.cellCol = 15;
        this.cellRow = 24;
        this.cellArr = [];
        this.miniCellArr = [];
        this.score = 0;
        this.direction = "bottom";
        this.timer = null;
        this.interval = [600, 300, 100];
        this.levelScore = [10, 20, 40];
        this.doubleScore = [1, 4, 10, 20];
        this.level = 1;

        this.playing = false;
        this.turning = false;
        this.death = false;

        this.offsetCol = Math.floor(this.cellCol / 2);
        this.offsetRow = -3