大概 1 年多之前，一位老同學(xué)找到我，問能不能幫他做一個非常簡單的猜數(shù)字游戲，需求是這樣的：

在 1 到 100 的整數(shù)里，隨機選一個數(shù)字，讓小朋友們猜；

如果猜錯了，告知小朋友猜大了還是猜小了；

如果猜中了，游戲結(jié)束。

正好那段時間，我一直在用ECharts做統(tǒng)計圖表。一聽到這個需求，馬上想到用ECharts的交互效果就能做，而且比直接寫程序要省事得多。于是答應(yīng)他中午午休給他做，1小時左右交差。

結(jié)果ECharts果然好用，1小時內(nèi)實現(xiàn)功能 + 調(diào)了調(diào)細節(jié)交付，1 個 HTML 文件 + 2 個 JS 文件(自己寫的 JS + echarts.min.js)就搞定了。思路大致是這樣的：

用了基于直角坐標系的熱力圖(heatmap)和儀表盤圖(gauge)，去掉直角坐標系的坐標軸(xAxis.show = false, yAxis.show = false)，去掉儀表盤指針和刻度值(axisLabel.show = false)等；

點擊熱力圖猜數(shù)，儀表盤顯示結(jié)果(監(jiān)聽 click 事件，設(shè)置回調(diào)函數(shù)更新圖表)，同時把用不到的數(shù)字按鈕去掉。

關(guān)鍵代碼部分

代碼水平可能比較低…因為我是工作之余憑興趣偶爾寫寫，請大家多多包涵

1、準備熱力圖數(shù)據(jù)

我需要準備 1 到 100 個數(shù)，填滿熱力圖。為了偷懶，我弄了 0 到 100 共 101 個數(shù)，這樣坐標(0, 1)對應(yīng)的數(shù)字正好是 1，(1, 0)對應(yīng) 10 ，看起來比較直觀，省腦子…哈哈！

data: [????????//?X坐標,?Y坐標,?數(shù)值? [ 0, 0, 0],????????[??0,????1,???1],????????[??0,????2,???2] ]

這是生成數(shù)據(jù)的代碼，循環(huán)嵌套：

var data = (function() {var res = [];for (i = 0; i < 11; i++) {for (j = 0; j < 10; j++) {if (i * 10 + j < 101) { res.push([i, j, '' + (i * 10 + j)]); } } }return res;})();

結(jié)果大致是這樣的

[[?0,?0,?0],?[?0,?1,?1],?..., [ 0, 9, 9],?[?1,?0,?10],[?1,?1,?11], ..., [ 1, 9, 19],?...,?[?9,?0,?90],[?9,?1,?91],?..., [ 9, 9, 99],?[?10,?0,?100]]

然后發(fā)現(xiàn)犯二了，x 坐標和 y 坐標位置弄反了，數(shù)字豎向排列了，趕緊交換下位置(或者把 res.push() 里面的 i, j 順序換下)

guessNumData = data.map(function(item) {return [item[1], item[0], item[2] || '-'];});

2、點擊事件的監(jiān)聽處理

使用 myChart.on() 監(jiān)聽點擊事件。

//?設(shè)置一個變量，如果猜對了將其賦值為?1var flag = 0;//監(jiān)聽點擊事件，在猜中之前進行響應(yīng)，params.data[2]就是所猜的數(shù)字myChart.on('click', function(params) {if (params.seriesId === 'guessPanel' && flag == 0) {????????guess(parseInt(params.data[2])); }});

guess 函數(shù)做了什么？與預(yù)先生成的隨機數(shù)比對，根據(jù)比對結(jié)果提供刷新圖表的參數(shù)：

是否猜中，1 代表猜中，0 代表沒猜中；

提示信息；

新的猜數(shù)范圍最小值；

新的猜數(shù)范圍最大值。

function guess(num) {var info;if (num == secretNum) { info = '猜中了！！！'; flag = 1; renewEcharts(1, info, min, max); } else if (num < min || num > max) { info = '請猜' + min + '到' + max + '之間的數(shù)'; renewEcharts(0, info, min, max); } else if (num < secretNum) {min = num + 1; info = '猜小了，答案在' + min + '與' + max + '之間'; renewEcharts(0, info, min, max); } else {max = num - 1; info = '猜大了，答案在' + min + '與' + max + '之間'; renewEcharts(0, info, min, max); }}

renewEcharts 函數(shù)又做了什么？根據(jù) guess 函數(shù)提供的參數(shù)更新圖表。

function renewEcharts(isGet, msg, min, max) {var opt;????//?根據(jù)新的猜數(shù)范圍，修改儀表盤顏色var color = '#5BC49F';if (max - min < 8) { color = '#B5495B'; } else if (max - min < 15) { color = '#FF7C7C'; } else if (max - min < 30) { color = '#FFDA43'; }// 如果猜中，只更新儀表盤中心的提示信息if (isGet == 1) { opt = {series: {detail: {formatter: msg } } }; myChart.setOption(opt);????//?如沒猜中，更新儀表盤和熱力圖，提示用戶繼續(xù)猜 } else { opt = {series: [{id: 'guess',axisLine: {lineStyle: {????????????????????????//?更新儀表盤中，除灰色之外部分的長度和顏色 color: [ [0, '#BEBEBE'], [min / 100, '#BEBEBE'], [max / 100, color], [1, '#BEBEBE'] ] } },????????????????//?更新儀表盤中心的提示信息及文字顏色 detail: {formatter: msg,color: color } }, {id: 'guessPanel',????????????????//?將新的猜數(shù)范圍之外的按鈕去掉(直接更換熱力圖的數(shù)據(jù)) data: (function() {var res = [];for (var item in guessNumData) {if (parseInt(guessNumData[item][2]) >= min && parseInt(guessNumData[item][2]) <= max) { res.push(guessNumData[item]); } }return res; })() }] }; myChart.setOption(opt); }}

??

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的android做一个坦克大战小游戏_一个 ECharts 做的猜数小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。