同色消除小游戏UI框架搭建

第一步：

/**
 * Created by jamesgan on 2018/6/10.
 * 同色消消乐，腾讯课程微信小游戏课程，JavaScript快速入门，示例项目
 */

// html的body容器
var body;

// 游戏UI界面
var mainContainer;
var menuContainer;
var gameContainer;
var infoContainer;
var overContainer;

第二步：

// 初始化UI界面
initUi();

function initUi() {
    body = document.body;
}

第三步：

/**
 * 创建各种容器的方法
 * @param options 通过此参数传递各种样式、文案、父容器等设置
 * @returns {*}
 */
function createContainer(options) {
    var div = document.createElement('div');// 创建元素
    options.id && (div.id = options.id);// 设置dom id
    options.background && (div.style.background = options.background);// 设置背景色
    options.width && (div.style.width = options.width);// 设置宽度
    options.height && (div.style.height = options.height);// 设置高度
    options.lineHeight && (div.style.lineHeight = options.lineHeight);// 设置行高
    options.color && (div.style.color = options.color);// 设置文字颜色
    options.fontSize && (div.style.fontSize = options.fontSize);// 设置字号
    options.textAlign && (div.style.textAlign = options.textAlign);// 设置文字对方方式
    options.boxSizing && (div.style.boxSizing = options.boxSizing);// 设置盒子模型
    options.paddingTop && (div.style.paddingTop = options.paddingTop);// 设置上内边距值
    options.margin && (div.style.margin = options.margin);// 设置外边距
    options.padding && (div.style.padding = options.padding);// 设置内边距
    options.borderRadius && (div.style.borderRadius = options.borderRadius);// 设置边框圆角
    options.innerText && (div.innerText = options.innerText);// 设置文案内容
    options.appendTo && options.appendTo.append(div);// 设置父容器
    return div; // 返回值
}

第四步：

    // 创建主容器
function initUi() {
    body = document.body;

    // 创建主容器
    mainContainer = createContainer({ 
        id: 'main',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '640px',
        appendTo: body
    });
}

第五步：

function initUi() {
    body = document.body;

    // 创建主容器
    mainContainer = createContainer({
        id: 'main',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '640px',
        appendTo: body
    });

    // 创建菜单容器
    menuContainer = createContainer({
        id: 'menu',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '640px',
        fontSize: '24px',
        textAlign: 'center',
        boxSizing: 'border-box',
        paddingTop: '200px',
        innerText: '同色消消消乐\n\n开始',
        appendTo: mainContainer
    });

    // 创建游戏结束容器
    overContainer = createContainer({
        id: 'over',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '640px',
        fontSize: '24px',
        textAlign: 'center',
        boxSizing: 'border-box',
        paddingTop: '200px',
        appendTo: mainContainer
    });


    // 创建信息显示容器
    infoContainer = createContainer({
        id: 'info',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '30px',
        lineHeight: '30px',
        color: 'white',
        textIndent: '10px',
        textAlign: 'center',
        appendTo: mainContainer
    });

    // 创建游戏容器
    gameContainer = createContainer({
        id: 'game',
        background: 'rgba(255,255,255,0.5)',
        borderRadius: '20px',
        margin: '20px auto',
        padding: '20px 20px',
        appendTo: mainContainer
    });

第六步：

/**
 * 设置容器可见性
 * @param container 需要设置的容器
 * @param show 是否需要显示
 */
function setVisible(container, show) {
    container.style.display = show ? 'block' : 'none';
}

第七步：

function initUi() {
    body = document.body;

    // 创建主容器
    mainContainer = createContainer({
        id: 'main',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '640px',
        appendTo: body
    });

    // 创建菜单容器
    menuContainer = createContainer({
        id: 'menu',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '640px',
        fontSize: '24px',
        textAlign: 'center',
        boxSizing: 'border-box',
        paddingTop: '200px',
        innerText: '同色消消消乐\n\n开始',
        appendTo: mainContainer
    });

    // 创建游戏结束容器
    overContainer = createContainer({
        id: 'over',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '640px',
        fontSize: '24px',
        textAlign: 'center',
        boxSizing: 'border-box',
        paddingTop: '200px',
        appendTo: mainContainer
    });


    // 创建信息显示容器
    infoContainer = createContainer({
        id: 'info',
        background: 'rgb(0,102,102)',
        width: '360px',
        height: '30px',
        lineHeight: '30px',
        color: 'white',
        textIndent: '10px',
        textAlign: 'center',
        appendTo: mainContainer
    });

    // 创建游戏容器
    gameContainer = createContainer({
        id: 'game',
        background: 'rgba(255,255,255,0.5)',
        borderRadius: '20px',
        margin: '20px auto',
        padding: '20px 20px',
        appendTo: mainContainer
    });

    // 游戏首次初始化时，只显示开始菜单，隐藏游戏结束界面、游戏主界面、信息显示栏
    setVisible(menuContainer, true);
    setVisible(overContainer, false);
    setVisible(gameContainer, false);
    setVisible(infoContainer, false);

    console.log('初始化游戏界面完成');
}