用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    957

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-3-3 15:17:45 柿霖不是林 咫尺尊享 楼主 82259

    undefined不会玩扫雷

    作者:jixiaod

    微信小程序这几天很火,9号正式发布,今天19号过了10天,到现在略有降温的趋势。个大厂商对微信小程序的态度很不看好,最激进的要数[罗辑思维],直接下架了自己的[得到APP]。滴滴、京东等APP也只保留了最精简的功能,某些担心过于完善的功能会抢夺APP本身的用户。不过这也印证了小程序的初衷,小而精、用完即走。(并不否认腾讯微信平台确实流氓的事实)

    PS:墨迹天气也开发了微信小程序版本,并且在1月9号第一时间发布,欢迎使用。

    作为技术人员,怎能不亲手试试小程序开发呢?扫雷 Minesweeper

    实现思路:
    • 如果不了解扫雷的游戏规则,请自行 Google
    • 绘制一张 10*10 的地图,并且标注地雷和非地雷,并且需要用数字表示每个点周围地雷的数量
    • 用 mineMap[x][y] 表示一个点位
      • mineMap[x][y] < 0 (代码中 == -1) 初始状态
      • 0 < mineMap[x][y] < 9 该点周围地雷的数量
      • mineMap[x][y] == 9 表示该点是地雷
      • mineMap[x][y] > 9 (代码中 == 10)表示该点插旗

    如何跑起来?
    • 下载&安装微信小程序开发工具
    • 配置 wechat-app-minesweeper 代码目录到开发工具即可
    玩法
    • 需要注意的是,由于没有鼠标右键标记Flag,简单做了 Flag 切换,开启后,方可标记Flag
    • 最初的想法是通过 tap 和 longtap 来区分扫雷和Flag,但是开发工具不能区分这俩个事件,只能作罢







    [HTML] 纯文本查看 复制代码
    //index.js
    //获取应用实例
    var app = getApp()
     
    Page({
     
        data: {
            mineMap: {},
            timesGo: 0,
            minesLeft: 0
        },
     
        mineMap: {},
        mineMapMapping: {},
        rowCount: 10,
        colCount: 10,
        mineCount: 10,
        minMineCount: 10,
        maxMineCount: 20,
        minesLeft: 0,
        timesGo: 0,
        timeInterval: null,
        flagOn: false,
        flags: 0,
        endOfTheGame: false,
        safeMinesGo: 0,
     
        onLoad: function() {
     
            this.setData({
                minesLeft: 0,
                timesGo: 0
            });
            this.drawMineField();
        },
     
        setGame: function() {
     
            this.drawMineField();
            this.createMinesMap();
            this.setMinesLeft();
            this.timeGoReset();
            this.timeGoClock();
            this.endOfTheGame = false;
            this.safeMinesGo = 0;
        },
     
        setMinesLeft: function() {
            this.minesLeft = this.mineCount;
            this.setData({minesLeft: this.minesLeft});
        },
     
        timeGoClock: function() {
            var self = this;
            this.timeInterval = setInterval(function () {
                // console.log(self.data.timesGo);
                self.timesGo = self.timesGo + 1;
                self.setData({timesGo: self.timesGo});
                 
            }, 1000);
        },
     
        timeGoStop: function() {
         
            clearInterval(this.timeInterval);
        },
     
        timeGoReset: function() {
            clearInterval(this.timeInterval);
            this.timesGo = 0;
            this.setData({timesGo: this.timesGo});
        },
     
        createMinesMap: function() {
     
            var tmpMineMap = {};
            // initalize mine map with 0.
            for (var row = 0; row < this.rowCount; row++) {
     
                tmpMineMap[row] = [];
                for (var col = 0; col < this.colCount; col++) {
     
                    tmpMineMap[row][col] = 0;
                }
            }
             //console.log(tmpMineMap);
             
            // laying mines with 9
            this.mineCount = this.rangeRandom(this.minMineCount, this.maxMineCount);
     
            var tmpCount = this.mineCount;
            //console.log("Mine count: ", tmpCount);
            while (tmpCount > 0) {
     
                var row = this.rangeRandom(0, this.rowCount - 1);
                var col = this.rangeRandom(0, this.colCount - 1);
     
                if (tmpMineMap[row][col] != 9) {
     
                    tmpMineMap[row][col] = 9;
                    tmpCount--;
                }
            }
     
            // calculate numbers around mines.
            for (var row = 0; row < this.rowCount; row++) {
                for (var col = 0; col < this.colCount; col++) {
                    var startRow = row - 1;
                    var startCol = col - 1;
                    //console.log("check====== r" +startRow +"c"+startCol );
                    for (var r = row-1; r < row+2; r++) {
                        for (var c = col-1; c < col+2; c++) {
                            //console.log("go: r"+r+":c"+c);
                            if (c >= 0 && c < this.colCount
                                && r >= 0 && r < this.rowCount
                            && !(r === row && c === col)
                            && tmpMineMap[r][c] == 9
                            && tmpMineMap[row][col] != 9) {
                                tmpMineMap[row][col]++;
                            }
                        }
                    }
                }
            }
            this.mineMapMapping = tmpMineMap;
        },
     
        drawMineField: function() {
     
            var tmpMineMap = {};
            for (var row = 0; row < this.rowCount; row++) {
     
                tmpMineMap[row] = [];
                for (var col = 0; col < this.colCount; col++) {
     
                    tmpMineMap[row][col] = -1;
                }
            }
            this.mineMap = tmpMineMap;
            //console.log(this.mineMap);
     
            this.setData({
                mineMap: this.mineMap 
            })
     
        },
     
        demining: function(event) {
     
            if (JSON.stringify(this.mineMapMapping) == "{}") return;
     
     
            var x = parseInt(event.target.dataset.x);
            var y = parseInt(event.target.dataset.y);
            var value = parseInt(event.target.dataset.value);
            //console.log("value:" + value +" x:"+x +" y:"+y);
     
            //flag this field as mine.
            if (this.flagOn) {
     
                this.flag(x, y, value);
                return;
            }
     
            // if field has been opened, return.
            if (value > 0) return;
             
            var valueMapping = this.mineMapMapping[x][y];
            //console.log(this.mineMapMapping);
            //console.log(valueMapping);
     
            if (valueMapping < 9) {
                this.mineMap[x][y] = valueMapping;
                this.setData({mineMap: this.mineMap});
                this.safeMinesGo++;
                console.log("Safe mine go: " + this.safeMinesGo);
                if ((this.safeMinesGo + this.mineCount) == (this.rowCount * this.colCount)) {
                    this.success();
                }
            }
     
            // When digg the mine.
            if (valueMapping == 9) {
                this.failed();
            }
     
            // Open the fields with 0 mines arround.
            if (valueMapping == 0) {
     
                this.openZeroArround(x, y);
                this.setData({mineMap:this.mineMap});
            }
        },
     
        success: function() {
     
            wx.showToast({
                title: 'GOOD!',
                duration: 3000
            })
            this.timeGoStop();
            this.endOfTheGame = true;
        },
     
        failed: function() {
            wx.showToast({
                title: 'SORRY!',
                duration: 3000
            })
     
            this.showAll();
            this.timeGoStop();
            this.endOfTheGame = true;
        },
     
        // Open the fields arround 0 field recursively.
        openZeroArround: function(row, col) {
            //console.log("click" + row + " " + col)
            for (var r = (row-1); r < (row+2); r++) {
                for (var c = (col-1); c < (col+2); c++) {
                    //console.log("go: r"+r+":c"+c);
                    if (r >= 0 && r < this.rowCount
                        && c >= 0 && c < this.colCount
                    && !(r === row && c === col)
                    && this.mineMap[r][c] < 0) {
     
                        this.mineMap[r][c] = this.mineMapMapping[r][c];
                        this.safeMinesGo++;
     
                        if (this.mineMapMapping[r][c] == 0) {
                            this.openZeroArround(r, c);
                        }
     
                    }
                }
            }
            console.log("Safe mine go: " + this.safeMinesGo);
            if ((this.safeMinesGo + this.mineCount) == (this.rowCount * this.colCount)) {
                this.success();
            }
     
        },
     
        flagSwitch: function(e) {
     
            if (e.detail.value) {
     
                this.flagOn = true;
            } else {
     
                this.flagOn = false;
            }
        },
     
        flag: function(x, y, value) {
     
            if (value > 0 && value < 10) return;
     
            // if flaged already, set the original state.
            if (value == 10) {
     
                this.pullUpFlag(x, y);
                return;
            }
     
            if (this.minesLeft <= 0) return;
     
            this.minesLeft = this.minesLeft - 1;
            this.mineMap[x][y] = 10;
     
            this.setData({mineMap: this.mineMap, minesLeft: this.minesLeft});
        },
     
        pullUpFlag: function(x, y) {
     
            if (this.minesLeft < this.mineCount) {
                this.minesLeft = this.minesLeft + 1;
            }
            this.mineMap[x][y] = -1;
            this.setData({mineMap: this.mineMap, minesLeft: this.minesLeft});
        },
     
        rangeRandom: function(x, y) {
            var z = y - x + 1;
            return Math.floor(Math.random() * z + x);
        },
     
        showAll: function() {
            this.mineMap = this.mineMapMapping;
            this.setData({mineMap: this.mineMap});
        }
     
    });



    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    正需要,支持楼主大人了!
    谢谢楼主的分享
    十分感谢楼主的分享,课程作业很需要参照。
    参考一下
    使用道具 举报 回复
    999999999999999999999999999999
    999999999999999999999999999999
    2019-8-3 22:30:31 sheerly 来自手机 新人求带
    8#
    使用道具 举报 回复
    谢谢分享!
    使用道具 举报 回复
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X