（小游戏）详解消方块：微信小程序开发

大家好！我又来了。今天我又写了一个超级无聊的小游戏

在无聊的道路上，渐行渐远。还记得儿时我们喜欢玩的这个游戏吗？

由于我申请的小程序不是小游戏，所以无法体验；

于是我又写成H5页面：http://www.yating.online/brick.html

喜欢就给我点个星吧：https://github.com/Chenyating/easyGame

一、简单介绍：

简单的介绍一下我的小游戏：

通过红色小块的反弹，吃掉白色小块，长条需接住反弹回来的红色小块；

操作说明：

1、点击界面的空白处；

游戏规则：

1、红色小块开始从白色长条出发，周而复始随机撞击小白块；

2、红色小块回到底部时，必须在白色长条上；

结束条件：

红色小块落地；（吃完小白块需要猴年马月）

 

二、技术难点

• 小程序的canvas的使用；
• 本次开发的是小程序；

通过开发的过程，该游戏最大的难点如下：

1、小红运动的方式角度

2、小长条运动的方法：

 

三、实现步骤：

接下来我开始详细说明这个游戏设计过程，实现的逻辑；

红色小块简称：小红（red），

白色长条简称：小长（slider），

小白块简称：小白；

以下为我设置的变量：

  data: {
        // 画布配置
        canvasWidth: 310,
        canvasHeight: 500,
        canvasCenterX: 0,
        // 整块画布
        context: null,
        // 滑块配置
        sliderX: 125,
        sliderY: 490,
        sliderWidth: 100, //滑块宽度
        sliderHeight: 10, //滑块高度
        sliderCenter: null, //滑块中心
        sliderSpeed: 1, //滑块速度
        // 滑块移动到的位置
        mouseX: null,
        position: 1, //1为右，-1为左
        redraw: null, //滑块移动的循环作用
        // 砖头们的设置
        blocksContext: null,
        blocks: null,
        blocksWidth: 9,
        // 小红砖
        redBlock: null,
        redX: 150,
        redY: 480,
        redK: -1,
        redB: null,
        redM: 1,
        rered: null,
        redSpeed: 5,
        // 分值记录
        fail: 0,
        score: 0
    },

一、绘制

1、小长的绘制：

    // 绘制滑块
    drawSlider(x) {
        var bu = this.data.context
        bu.setFillStyle('#ffffff');
        bu.fillRect(x, this.data.sliderY, this.data.sliderWidth, this.data.sliderHeight);
        bu.draw();
    },

需要获取鼠标点击的位置，鼠标点击的位置相对于滑块中心点的方位，这里position为在x轴上移动的距离；

 //获取鼠标X的位置
    sliderDot(e) {
        this.setData({
            mouseX: e