【JavaScript】俄罗斯方块简单网页版

news2024/11/18 1:47:52

文章目录

    • js制作简单网页版俄罗斯方块
      • 效果演示
      • 设计思路
    • 一、HTML网页结构代码
    • 二、CSS代码
    • 三、JS代码
    • 四、代码资源分享

js制作简单网页版俄罗斯方块

程序虽然很难写,却很美妙。要想把程序写好,需要写好一定的基础知识,包括编程语言、数据结构与算法。程序写得好,需要缜密的逻辑思维能力和良好的梳理基础,而且熟悉编程环境和编程工具

效果演示

请添加图片描述

设计思路

  • 默认五个形状 L T Z O I
  • 用户按上键变换形状
  • 设置地图的行和列地图小块的宽高预览框的行和列…
  • 下落的计时器
  • 满行
  • 得分

一、HTML网页结构代码

<div id="mainbox">
    <div id="map"></div>
    <div id="box">
        <div id="preview"></div>
        <div id="btn">
            <div id="score">0</div>
            <div id="thisScore">0</div>
            <button id="start_btn">开始游戏</button>
            <button id="restart_btn">重新开始</button>
            <button id="add_btn">自定义模块</button>
            <button id="close_btn">退出游戏</button>
        </div>
    </div>
</div>
<div id="add">
    <div id="checkColor">
        选择颜色:<input id="ck_color" type="color"/>(请使用单色)
    </div>
    <div id="squerBox"></div>
    <div id="checkBox">
        <button id="sure">确定</button>
        <button id="cancle">取消</button>
    </div>
</div>
<script src="js/index.js"></script>

二、CSS代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html {
            width: 100%;
            height: 100%;
            background-color: #d9d9d9;
        }
        #mainbox{
            width: 500px;
            height: 580px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            border: 1px solid #000000;
        }
        #map{
            position: relative;
            float: left;
            width: 320px;
            height: 560px;
            margin: 10px;
            background-color: #000;
        }
        #map>*{
            position: absolute;
            border: 1px solid #a9a9a9;
            box-sizing: border-box;
        }
        #box{
            float: left;
            position: relative;
            width: 150px;
            height: 560px;
            margin: 10px auto;
            border: 1px solid #959595;
        }
        #preview{
            position: relative;
            width: 120px;
            height: 120px;
            background-color: #000000;
            margin: 15px;
        }
        #preview>*{
            position: absolute;
            border: 1px solid #a9a9a9;
            box-sizing: border-box;
        }
        #btn{
            position: absolute;
            width: 120px;
            height: 400px;
            top: 140px;
            margin: 15px;
            text-align: center;
        }
        #btn>button{
            width: 100px;
            height: 30px;
            margin: 20px auto;
            background: #ecc787;
            outline: none;
        }
        #score{
            width: 100px;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            color: #e3241f;
            background-color: #ecc787;
            margin: 20px 10px;
            border-radius: 10px;
        }
        #thisScore{
            position: absolute;
            top: 60px;
            width: 120px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            font-weight: 700;
            color: #d21f14;
            visibility: hidden;
        }
        .animate{
            animation: scoreAnimate .6s linear forwards;
        }
        @keyframes scoreAnimate {
            from {
                transform: translatey(0);
                visibility: hidden;
            }
            to{
                transform: translatey(-80px);
                visibility: visible;
            }
        }
        #add{
            width: 350px;
            height: 400px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            border: 1px solid #000000;
            background-color: #ffffff;
            display: none;
        }
        #checkColor{
            width: 240px;
            height: 40px;
            margin: 20px auto 5px;
            font-size: 13px;
        }
        #squerBox{
            position: relative;
            width: 240px;
            height: 240px;
            background-color: #000000;
            margin: 5px auto 15px;
        }
        #squerBox>*{
            position: absolute;
            box-sizing: border-box;
            border: 1px solid #a9a9a9;
        }
        #checkBox{
            width: 240px;
            height: 40px;
            margin: 10px auto;
            text-align: center;
        }
        #checkBox>button{
            width: 70px;
            margin:10px 20px;
        }
    </style>

三、JS代码

/*
 * 定义形状
 * 默认五个形状 L T Z O I
 * 用户按上键变换形状
 * */
var squer = [
    //L
    [
        [
            [1, 0, 0, 0],
            [1, 0, 0, 0],
            [1, 1, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [1, 1, 1, 0],
            [1, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 1, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 0, 1, 0],
            [1, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ]
    ],
    //T
    [
        [
            [1, 1, 1, 0],
            [0, 1, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 0, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 1, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 1, 0, 0],
            [1, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [1, 0, 0, 0],
            [1, 1, 0, 0],
            [1, 0, 0, 0],
            [0, 0, 0, 0]
        ]
    ],
    //Z
    [
        [
            [1, 1, 0, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 0, 1, 0],
            [0, 1, 1, 0],
            [0, 1, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [1, 1, 0, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 0, 1, 0],
            [0, 1, 1, 0],
            [0, 1, 0, 0],
            [0, 0, 0, 0]
        ]
    ],
    //0
    [
        [
            [0, 1, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 1, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 1, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 1, 1, 0],
            [0, 1, 1, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ]
    ],
    [
        [
            [1, 1, 1, 1],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0]
        ],
        [
            [1, 1, 1, 1],
            [0, 0, 0, 0],
            [0, 0, 0, 0],
            [0, 0, 0, 0]
        ],
        [
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0],
            [0, 1, 0, 0]
        ]
    ]
];
//策略集
var Base = {
    map_rows: 14,  //地图的行和列
    map_colume: 8,
    map_squer_w: 40,  //地图小块的宽高
    map_squer_h: 40,
    pre_rows: 4,  //预览框的行和列
    pre_colume: 4,
    pre_squer_w: 30,  //预览框小块的宽高
    pre_squer_h: 30,
    userDefined_w: 60,  //自定义框小块的宽高
    userDefined_h: 60,
    map: [],  //存放属性地图
    currentSquer: null,  //当前的形状
    currentWay: null,  //当前形状的方向
    current_r: null,  //当前块对应地图的行坐标
    current_c: null,  //当前块对应地图的列坐标
    bgColor: ["blue", "pink", "yellow", "green", "purple"],   //形状的背景色
    time: null,  //存放下落的计时器
    speed: 500,  //下落的速度
    map_suqer_type: null,  //地图上的块形状
    map_squer_way: null,  //地图上的块方向
    map_squer_r: null,   //地图上块的行坐标
    map_squer_c: null,  //地图上块的列坐标
    game_start: false,   //记录游戏开始状态
    fullRows: [],   //存储满行的行索引
    score: 0,  //总得分
    thisScore: 0,  //本次得分
    addSquer: [],  //存放自定义形状
};
//策略的使用
var BaseMethod = {
    //获取元素的方法   根据id
    getElement: function (id) {
        return document.getElementById(id);
    },
    //初始化地图界面的方法
    _initPage: function () {
        for (var i = 0; i < Base.map_rows; i++) {
            for (var k = 0; k < Base.map_colume; k++) {
                var div = document.createElement("div");
                div.id = i + "-" + k;
                div.style.width = Base.map_squer_w + "px";
                div.style.height = Base.map_squer_h + "px";
                div.style.left = Base.map_squer_w * k + "px";
                div.style.top = Base.map_squer_h * i + "px";
                this.getElement("map").appendChild(div);
            }
        }
    },
    //初始化预览界面
    _initPreview: function () {
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = 0; k < Base.pre_colume; k++) {
                var div = document.createElement("div");
                div.id = "pre-" + i + "-" + k;
                div.style.width = Base.pre_squer_w + "px";
                div.style.height = Base.pre_squer_h + "px";
                div.style.left = Base.pre_squer_w * k + "px";
                div.style.top = Base.pre_squer_h * i + "px";
                this.getElement("preview").appendChild(div);
            }
        }
    },
    //初始化属性map
    _initMap: function () {
        for (var i = 0; i < Base.map_rows; i++) {
            Base.map.push([]);
            for (var k = 0; k < Base.map_colume; k++) {
                Base.map[i][k] = {};
                Base.map[i][k].ishas = false;  //记录当前块是否填充颜色
                Base.map[i][k].currentColor = null;   //记录当前块的颜色
            }
        }
    },
    //构造随机形状的方法
    getRandom: function (m) {
        return Math.floor(Math.random() * m);
    },
    //下一个块的形状 和在地图上的初始位置
    nextSquer: function () {
        //形状索引
        Base.currentSquer = this.getRandom(squer.length);
        //方向索引
        Base.currentWay = this.getRandom(4);
        //地图上对应的行坐标
        Base.current_r = -4;
        Base.current_c = (Base.map_colume - Base.pre_colume) / 2;
    },
    //存储地图上的形状   和初始坐标
    saveMapSquer: function () {
        Base.map_squer_type = Base.currentSquer;
        Base.map_squer_way = Base.currentWay;
        Base.map_squer_r = Base.current_r;
        Base.map_squer_c = Base.current_c;
    },
    //获取颜色的方法
    getColor: function (index) {
        return Base.bgColor[index];
    },
    //绘制预览区域
    drawPreview: function () {
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = 0; k < Base.pre_colume; k++) {
                //获取预览区域对应的div
                var div = this.getElement("pre-" + i + "-" + k);
                //只绘制1的位置   1为true  0为false
                if (squer[Base.currentSquer][Base.currentWay][i][k]) {
                    //根据当前块的形状绘制背景色
                    div.style.backgroundColor = this.getColor(Base.currentSquer);
                }
                else {
                    div.style.backgroundColor = "";
                }
            }
        }
    },
    //绘制地图上的形状
    drawMapSquer: function () {
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = 0; k < Base.pre_colume; k++) {
                //只绘制1的位置   1为true  0为false
                if (Base.map_squer_r + i >= 0 && squer[Base.map_squer_type][Base.map_squer_way][i][k]) {
                    //获取地图区域对应坐标的div
                    var div = this.getElement((i + Base.map_squer_r ) + "-" + ( k + Base.map_squer_c));
                    div.style.backgroundColor = this.getColor(Base.map_squer_type);
                }
            }
        }
    },
    //下落时 清除当前块之前颜色的方法
    clearColor: function () {
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = 0; k < Base.pre_colume; k++) {
                //只绘制1的位置   1为true  0为false
                if (Base.map_squer_r + i >= 0 && squer[Base.map_squer_type][Base.map_squer_way][i][k]) {
                    //获取地图区域对应坐标的div
                    var div = this.getElement((Base.map_squer_r + i ) + "-" + ( Base.map_squer_c + k));
                    div.style.backgroundColor = "";
                }
            }
        }
    },
    //修改属性map中的属性值  将当前块存放在属性map中
    update_map: function () {
        //修改属性map的属性值
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = 0; k < Base.pre_colume; k++) {
                if (Base.map_squer_r + i >= 0 && squer[Base.map_squer_type][Base.map_squer_way][i][k]) {
                    Base.map[Base.map_squer_r + i][Base.map_squer_c + k].ishas = true;
                    Base.map[Base.map_squer_r + i][Base.map_squer_c + k].currentColor = Base.map_squer_type;
                }
            }
        }
    },
    //检测是否还能下落的方法
    canDown: function () {
        for (var i = Base.pre_rows - 1; i >= 0; i--) {
            for (var k = 0; k < Base.pre_colume; k++) {
                if (!squer[Base.map_squer_type][Base.map_squer_way][i][k]) {
                    //遇0直接进入下一个循环
                    continue;
                }
                //检测是否到地图最下边  如果到底 返回false  不能再下落
                if (Base.map_squer_r + i + 1 >= Base.map_rows) {
                    return false;
                }
                //检测下一行是否有块
                if (Base.map_squer_r + i + 1 >= 0 && Base.map[Base.map_squer_r + i + 1][Base.map_squer_c + k].ishas) {
                    return false;
                }
            }
        }
        return true;
    },
    //检测是否能右移
    canRight: function () {
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = Base.pre_colume - 1; k >= 0; k--) {
                if (!squer[Base.map_squer_type][Base.map_squer_way][i][k]) {
                    //遇0直接进入下一个循环
                    continue;
                }
                //检测是否到地图最右边  如果到了 返回false  不能再右移
                if (Base.map_squer_c + k + 1 >= Base.map_colume) {
                    return false;
                }
                //检测右边是否有块
                if (Base.map_squer_r + i >= 0 && Base.map[Base.map_squer_r + i][Base.map_squer_c + k + 1].ishas) {
                    return false;
                }
            }
        }
        return true;
    },
    //检测是否能左移
    canLeft: function () {
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = 0; k < Base.pre_colume; k++) {
                if (!squer[Base.map_squer_type][Base.map_squer_way][i][k]) {
                    //遇0直接进入下一个循环
                    continue;
                }
                //检测是否到地图最左边  如果到了 返回false  不能再左移
                if (Base.map_squer_c + k <= 0) {
                    return false;
                }
                //检测左边是否有块
                if (Base.map_squer_r + i >= 0 && Base.map[Base.map_squer_r + i][Base.map_squer_c + k - 1].ishas) {
                    return false;
                }
            }
        }
        return true;
    },
    //检测是否能变形
    canRotate: function () {
        //这里只是假设已经变形,不能让Base.map_squer_way实际发生变化   所以要定义一个变量来接收
        var way = Base.map_squer_way;
        //Base.map_squer_way = ++Base.map_squer_way > 3 ? 0 : Base.map_squer_way;   不能直接++Base.map_squer_way,否则它的值会发生变化
        way = ++way > 3 ? 0 : way;
        //使用变形之后的形状去检测map中对应位置是否有内容
        for (var i = 0; i < Base.pre_rows; i++) {
            for (var k = 0; k < Base.pre_colume; k++) {
                if (!squer[Base.map_squer_type][way][i][k]) {
                    continue;
                }
                //检测变形之后是否出边界
                if (Base.map_squer_r + i + 1 >= Base.map_rows) {
                    return false;
                }
                if (Base.map_squer_c + k + 1 >= Base.map_colume) {
                    return false;
                }
                if (Base.map_squer_r + k <= 0) {
                    return false;
                }
                //检测当前变形的位置是否有形状
                if (Base.map_squer_r + i >= 0 && Base.map[Base.map_squer_r + i][Base.map_squer_c + k].ishas) {
                    return false;
                }
            }
        }
        return true;
    },
    //检测是否满行
    checkFullRows: function () {
        for (var i = Base.map_rows - 1; i >= 0; i--) {
            var full = true;
            for (var k = 0; k < Base.map_colume; k++) {
                if (!Base.map[i][k].ishas) {
                    full = false;
                }
            }
            if (full) {
                //如果当前行是满行
                Base.fullRows.push(i);
            }
        }
    },
    //满行时消除界面对应的行颜色
    clearRowColor: function () {
        for (var i = 0; i < Base.fullRows.length; i++) {
            for (var k = 0; k < Base.map_colume; k++) {
                var div = this.getElement(Base.fullRows[i] + "-" + k);
                div.style.backgroundColor = "";
            }
        }
    },
    //更新属性map
    resetMapRow: function () {
        for (var i = Base.fullRows.length - 1; i >= 0; i--) {
            for (var k = Base.fullRows[i] - 1; k >= 0; k--) {  //满行的上一行
                for (var j = 0; j < Base.map_colume; j++) {
                    Base.map[k + 1][j].ishas = Base.map[k][j].ishas;
                    Base.map[k + 1][j].currentColor = Base.map[k][j].currentColor;
                }
            }
        }
    },
    //重绘地图界面
    reDrawMap: function () {
        for (var i = 0; i < Base.map_rows; i++) {
            for (var k = 0; k < Base.map_colume; k++) {
                var div = this.getElement(i + "-" + k);
                if (Base.map[i][k].ishas) {
                    div.style.backgroundColor = this.getColor(Base.map[i][k].currentColor);
                }
                else {
                    div.style.backgroundColor = "";
                }
            }
        }
    },
    //加分
    addScore: function () {
        for (var i = 0; i < Base.fullRows.length; i++) {
            Base.score += 10;
            Base.thisScore += 10;
        }
        score.innerText = Base.score;
        thisScore.innerText = "+" + Base.thisScore;
        thisScore.classList.add("animate");
        setTimeout(function () {
            thisScore.classList.remove("animate");
        }, 600);
        Base.thisScore = 0;
    },
    //初始化自定义模块
    _initUserDefined: function () {
        for (var i = 0; i < Base.pre_rows; i++) {   //对应的行
            Base.addSquer.push([]);
            for (var k = 0; k < Base.pre_colume; k++) {   //对应的列
                Base.addSquer[i].push([0, 0, 0, 0]);
                var div = document.createElement("div");
                div.id = "user-" + i + "-" + k;
                div.setAttribute("data-row", i);
                div.setAttribute("data-col", k);
                div.style.width = Base.userDefined_w + "px";
                div.style.height = Base.userDefined_h + "px";
                div.style.left = Base.userDefined_w * k + "px";
                div.style.top = Base.userDefined_h * i + "px";
                this.getElement("squerBox").appendChild(div);
                //每个div添加点击事件
                div.addEventListener("click", this.handle)
            }
        }
    },
    //自定义模块div的点击事件方法
    handle: function () {
        var row = this.getAttribute("data-row");
        var col = this.getAttribute("data-col");
        if (Base.addSquer[0][row][col] == 1) {
            this.style.backgroundColor = "";
            Base.addSquer[0][row][col] = 0;
        }
        else {
            if (ck_color.value == "#000000") {
                alert("请选择颜色!");
                return;
            }
            else {
                this.style.backgroundColor = ck_color.value;
                Base.addSquer[0][row][col] = 1;
            }
        }
        //开始自动旋转
        var arr = Base.addSquer[0];
        var len = arr.length;
        var deg90 = Base.addSquer[1];
        for (var i = 0; i < len; i++) {
            for (var k = 0; k < len; k++) {
                deg90[k][len - i - 1] = arr[i][k];  //列变成行  行变成列 0行-3列  1-2  2-1  3-0
            }
        }
        var deg180 = Base.addSquer[2];
        for (var i = 0; i < len; i++) {
            for (var k = 0; k < len; k++) {
                deg180[len - i - 1][len - k - 1] = arr[i][k];  //0行-3行  1-2  2-1  3-0
            }
        }
        var deg270 = Base.addSquer[3];
        for (var i = 0; i < len; i++) {
            for (var k = 0; k < len; k++) {
                deg270[len - k - 1][i] = arr[i][k];  //行变成列  列变成行 0列-3行  1-2  2-1  3-0
            }
        }
    },
    //检测该形状是否已存在
    checkSquer: function () {
        //遍历squer
        for (var i = 0; i < squer.length; i++) {
            var ishasSquer = true;
            for (var k = 0; k < Base.pre_rows; k++) {
                for (var j = 0; j < Base.pre_colume; j++) {
                    if (Base.addSquer[0][k][j] != squer[i][0][k][j]) {
                        ishasSquer = false;
                    }
                }
            }
            console.log(ishasSquer);
            if (ishasSquer) {
                return true;
            }
        }
        return false;
    },
    //初始化方法
    init: function () {
        //初始化地图界面
        this._initPage();
        //初始化预览界面
        this._initPreview();
        //初始化属性map
        this._initMap();
    },
    //加载预览形状的方法
    loadPreview: function () {
        //随机形状
        this.nextSquer();
        //绘制预览区域
        this.drawPreview();
    },
    //连续下落的方法
    loop: function () {
        if (this.canDown()) {
            //下落时  清空当前形状下落前的颜色
            this.clearColor();
            Base.map_squer_r++;
            this.drawMapSquer();
        }
        else {
            //不能下落的时候
            //更新属性map  将当前块的形状存到属性map中
            this.update_map();
            //检测当前块的初始行是否小于等于0
            if (Base.map_squer_r <= 0) {
                //游戏结束
                clearInterval(time);
                alert("Game Over!");
                Base.game_start = false;
                return;
            }
            //满行消除
            this.checkFullRows();
            if (Base.fullRows.length > 0) {
                //存在满行
                //加分
                this.addScore();
                //消除界面对应的行
                this.clearRowColor();
                //清除map对应的行
                this.resetMapRow();
                //100ms后重绘地图界面   清空满行索引的数组
                var that = this;
                setTimeout(function () {
                    that.reDrawMap();
                    Base.fullRows = [];
                }, 200);
                console.log(Base.fullRows);
            }


            //更新存储的形状  将上次随机出的形状 和初始坐标重新赋值
            this.saveMapSquer();
            //绘制地图上的形状
            this.drawMapSquer();
            //重新随机 预览
            this.loadPreview();
        }
    },
    //开始游戏
    start: function () {
        //存储随机出的形状和初始位置
        this.saveMapSquer();
        //绘制地图上的形状
        this.drawMapSquer();
        //重新随机 预览
        this.loadPreview();
        //形状块下落
        var that = this;
        time = setInterval(function () {
            that.loop();
        }, Base.speed);
    },
    _initUserDefinedMap: function () {
        //添加自定义模块界面   显示都是默认形状里面 的第一个行  0
        for (var h = 0; h < Base.addSquer.length; h++) {
            for (var i = 0; i < Base.pre_rows; i++) {
                for (var k = 0; k < Base.pre_colume; k++) {
                    if (Base.addSquer[h][i][k] == 1 && h != 0) {
                        Base.addSquer[h][i][k] = 0;
                    }
                    else {
                        Base.addSquer[h][i][k] = 0;
                        //界面对应的颜色修改
                        var div = this.getElement("user-" + i + "-" + k);
                        if (div) {
                            div.style.backgroundColor = "";
                        }
                    }
                }
            }
        }
        //颜色选择清回默认
        ck_color.value = "#000000";
    }
};
window.onload = function () {
    //初始化地图、预览块、属性map
    BaseMethod.init();
    //加载预览形状
    BaseMethod.loadPreview();


    //初始化自定义模块
    BaseMethod._initUserDefined();
    //点击开始按钮事件
    start_btn.onclick = function () {
        if (!Base.game_start) {
            BaseMethod.start();
            Base.game_start = true;
        }
        document.body.onkeydown = function (e) {
            switch (e.key) {
                case"ArrowUp":
                    if (BaseMethod.canRotate()) {
                        BaseMethod.clearColor();
                        Base.map_squer_way = ++Base.map_squer_way > 3 ? 0 : Base.map_squer_way;
                        BaseMethod.drawMapSquer();
                    }
                    break;
                case"ArrowRight":
                    if (BaseMethod.canRight()) {
                        BaseMethod.clearColor();
                        Base.map_squer_c++;
                        BaseMethod.drawMapSquer();
                    }
                    break;
                case"ArrowDown":
                    if (BaseMethod.canDown()) {
                        BaseMethod.loop();
                    }
                    break;
                case"ArrowLeft":
                    if (BaseMethod.canLeft()) {
                        BaseMethod.clearColor();
                        Base.map_squer_c--;
                        BaseMethod.drawMapSquer();
                    }
                    break;
            }
        }
    };
    //退出游戏
    close_btn.onclick = function () {
        window.close();
    };
    //重新开始
    restart_btn.onclick = function () {
        if (Base.game_start) {
            clearInterval(time);
            BaseMethod._initMap();
            BaseMethod.reDrawMap();
            BaseMethod.start();
        }
    };
    //自定义模块
    add_btn.onclick = function () {
        add.style.display = "block";
    };
    //确定添加
    sure.onclick = function () {
        //检测该形状是否已存在  如过存在 提示该形状已存在
        if (BaseMethod.checkSquer()) {
            alert("该形状已存在,请重新选择");
            return false;
        }
        else {
            var arrinfo = [];
            for (var i = 0; i < 4; i++) {
                var arr = [];
                for (var k = 0; k < 4; k++) {
                    arr.push([...Base.addSquer[i][k]]);
                }
                arrinfo.push(arr);
            }
            squer.push(arrinfo);
            Base.bgColor.push(ck_color.value);
            BaseMethod._initUserDefinedMap();
            add.style.display = "none";
        }
    };
    //取消添加
    cancle.onclick = function () {
        add.style.display = "none";
    }
};

四、代码资源分享

💡网页简单版小游戏俄罗斯方块代码资源分享点击进入仓库下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/128686.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在mac上搭建php的SNMP开发环境

前言 最近需要开发AC的snmp协议&#xff0c;需要开启php的snmp扩展&#xff0c;网上能搜索到的主要还是windows和centos下面的几篇资料。这里主要介绍下mac系统下如何搭建php的snmp开发环境。 第一步&#xff0c;安装php&#xff1a; 首先需要在mac上面安装PHP&#xff0c;这…

重点物联网漏洞利用情况

重点物联网 漏洞利用情况本节我们选取了两个漏洞进行分析。UPnP 相关的漏洞我们将在 4.4.3 进行分析&#xff0c;除去 UPnP 相关漏 洞外&#xff0c;被利用最多的是 Eir D1000 路由器的一个漏洞 [44]&#xff08;CVE-2016-10372&#xff09;&#xff0c;我们将对其进行分析。 …

第006课 - 使用vagrant快速创建linux虚拟机

使用vagrant快速创建linux虚拟机 项目中使用的环境,都是装在linux当中的,我们可以使用linux虚拟机。 https://www.virtualbox.org/ 直接双击进行安装运行。 CPU开启虚拟化 virtualbox安装需要我们的cpu开启虚拟化。 这个需要设置主板。 在开机启动的时候,找到cpu配置:…

什么是金手指,金手指的设计要求有哪些?

金手指&#xff08;connecting finger&#xff09;是电脑硬件如&#xff1a;&#xff08;内存条上与内存插槽之间、显卡与显卡插槽等&#xff09;&#xff0c;所有的信号都是通过金手指进行传送的。金手指由众多金黄色的导电触片组成&#xff0c;因其表面镀金而且导电触片排列如…

阿里云主要产品架构介绍

文章目录前言主要产品云产品访问拓扑ECS架构RDS架构OCS架构SLB架构OSS架构OTS架构ODPS架构SLSSLS的产品视角SLS运维视角OAS结语前言 阿里云产品众多&#xff0c;基本涵盖了从存储到计算到网络的方方面面&#xff0c;当然还包括大数据和人工智能。这些产品&#xff0c;共同组成…

响应式原理 之 vue2 vue3

目录 一、响应式概念 二、响应式函数的实现 watchFn 三、响应式依赖的收集 四、监听对象的变化 1. vue2 2. vue3 五、对象的依赖管理 1. 图解 2. 代码 六、响应式完整代码 一、响应式概念 m有一个初始化的值&#xff0c;有一段代码使用了这个值那么在m有一个新的值时…

热门探讨丨SaaS软件是否正在“毁掉”数字化转型企业?

——当它浮出水面&#xff0c;才能看到水下的错落。 截至2021年末&#xff0c;我国企业的数量达到4842万户&#xff0c;增长1.7倍&#xff0c;其中99%以上都是中小企业。 根据调查&#xff0c;在数字化转型浪潮中&#xff0c;我国有超过70%的企业对数字化转型处于积极态度&am…

网络部署运维实验(pat 端口映射含命令)

♥️作者&#xff1a;小刘在这里 ♥️每天分享云计算网络运维课堂笔记&#xff0c;疫情之下&#xff0c;你我素未谋面&#xff0c;但你一定要平平安安&#xff0c;一 起努力&#xff0c;共赴美好人生&#xff01; ♥️夕阳下&#xff0c;是最美的&#xff0c;绽放&#xff0c;…

Vue JSX 上手指南

JSX 简介 JSX Javascript XML。在 Javascript 里写 XML&#xff0c;同时拥有 Javascript 的灵活性和 HTML 的语义化。 Template vs JSX template 是 Vue 的默认写法&#xff0c;也更推荐。因为 template 语法是固定的&#xff0c;Vue 在编译层面为它做了很多静态标记的优化…

MySQL简介及常用引擎介绍

MySQL 由 My 和 SQL 组成&#xff0c;其中的 SQL 部分即为&#xff1a;Structured Query Language&#xff0c;意为结构化查询语⾔&#xff0c;是访问数据库的最常⻅的标准化语⾔。 MySQL 是一款优秀的、开源的数据库管理系统&#xff0c;同时 MySQL 也是一款可移植的数据库&a…

【WSL】[02] windows subsytem linux 配置和使用

第【2】章前言&#xff1a; 上一篇我们已经安装好了ubuntu在WSL下的GUI的桌面&#xff1a;我们现在继续进一步进行配置工作。同时也把&#xff0c;运用WSL的流程摸一把&#xff0c;以备后用。 1 在windows的PowerShell终端进行配置和查询&#xff1a; 1.1 查询所有支持的可以…

极小尺寸,超低功耗,高度集成,天翼物联NB-IoT云芯模组

数字经济时代&#xff0c;物联网已融入我们的日常生活。比如&#xff0c;智能抄表代替人工上门抄表&#xff0c;运动手环实时传输心率情况&#xff0c;烟感报警器远程告警……这些高科技背后都有一颗小而强大的芯片在支撑。 天翼物联云芯模组依托天翼物联网平台&#xff08;AIo…

制造业项目管理软件如何帮助企业做好项目管理?

项目产品、采购、销售、BOM变更管理不全面&#xff1b; 项目进度追踪管理难&#xff1b; 项目进度款管不清、项目尾款管不到&#xff1b; … … 而以上仅仅是生产制造企业所面临的项目管理问题的“冰山一角”。 采用“项目制”生产模式的制造企业&#xff0c;需要做到项目…

理解XaaS(SaaS、Baas、Paas、Iaas)

XaaS : XX as a Service 参考原文 以电商来举例 一套电商系统需要的开发资料 产品经理&#xff1a;设计电商系统 前端工程师&#xff1a;开发页面 后端工程收&#xff1a;开发后端 运维工程师&#xff1a;搭建环境&#xff0c;部署到服务器&#xff0c;负责后期维护等 服务器…

指南解读:急性心力衰竭中国急诊管理指南(2022)

心力衰竭&#xff08;heart failure&#xff0c;HF 简称心衰&#xff09;是由于心脏结构和 / 或功能异常导致心室充盈和/或射血能力受损的一组临床综合征&#xff0c;其病理生理学特征为肺淤血和/或体循环淤血、伴或不伴有组织器官低灌注&#xff0c;主要临床表现为呼吸困难、乏…

美容门店信息化管理系统该如何搭建?不妨参考一下百数

随着人们的生活水平越来越高&#xff0c;人们在解决了温饱问题之后有了更多的追求。其中美容正在成为不少人新的必做项目&#xff0c; 迎合了人们对于爱美的需求。目前我国美容机构市场规模已超过4500亿元&#xff0c;行业从业人员超过3000万。据国家工商联统计数字显示&#x…

JS_fetch请求数据

1、axios 比如常用的需求中&#xff0c;想要请求A接口的数据再去请求B接口的数据&#xff0c;axios的做法是需要先请求A接口&#xff0c;然后在A接口的成功的回调函数里面去请求B接口。 fetch使用的情况并不多&#xff0c;主要是由于存在兼容性问题&#xff0c;在企业中就不会…

南大通用数据库-Gbase-8a-学习-29-常用函数介绍

一、测试环境 名称值cpu12th Gen Intel Core™ i7-12700H操作系统CentOS Linux release 7.9.2009 (Core)内存3G逻辑核数2Gbase-8a数据库版本9.5.3.27 二、函数介绍 1、HEX &#xff08;1&#xff09;说明 将数字或字符串转换成十六进制形式。 &#xff08;2&#xff09;例…

2022年我去过最喜欢的16座城市

欢迎关注「苏南下」分享我的旅行、摄影心得感悟2022 年我去了 16 个城市地区&#xff0c;拍了 40条旅行短片。又是很久没更新&#xff0c;2022 年过得好快&#xff0c;马上就是 2023 了。如果用一个关键词来总结我这一年&#xff0c;我觉得可以是&#xff1a;运气好。从年初 1 …

P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布

题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样&#xff0c;则不分胜负。在《生活大爆炸》第二季第 8 集中出现了一种石头剪刀布的升级版游戏。 升级版游戏在传统的石头剪刀布游戏的基础上,增加了两个新手势: 斯波克:《星际迷航》主角…