android做一个坦克大战小游戏_一个 ECharts 做的猜数小游戏
大概 1 年多之前,一位老同学找到我,问能不能帮他做一个非常简单的猜数字游戏,需求是这样的:
在 1 到 100 的整数里,随机选一个数字,让小朋友们猜;
如果猜错了,告知小朋友猜大了还是猜小了;
如果猜中了,游戏结束。
正好那段时间,我一直在用ECharts做统计图表。一听到这个需求,马上想到用ECharts的交互效果就能做,而且比直接写程序要省事得多。于是答应他中午午休给他做,1小时左右交差。
结果ECharts果然好用,1小时内实现功能 + 调了调细节交付,1 个 HTML 文件 + 2 个 JS 文件(自己写的 JS + echarts.min.js)就搞定了。思路大致是这样的:
用了基于直角坐标系的热力图(heatmap)和仪表盘图(gauge),去掉直角坐标系的坐标轴(xAxis.show = false, yAxis.show = false),去掉仪表盘指针和刻度值(axisLabel.show = false)等;
点击热力图猜数,仪表盘显示结果(监听 click 事件,设置回调函数更新图表),同时把用不到的数字按钮去掉。
关键代码部分
代码水平可能比较低…因为我是工作之余凭兴趣偶尔写写,请大家多多包涵
1、准备热力图数据
我需要准备 1 到 100 个数,填满热力图。为了偷懒,我弄了 0 到 100 共 101 个数,这样坐标(0, 1)对应的数字正好是 1,(1, 0)对应 10 ,看起来比较直观,省脑子…哈哈!
data: [ // X坐标, Y坐标, 数值 [ 0, 0, 0], [ 0, 1, 1], [ 0, 2, 2] ]
这是生成数据的代码,循环嵌套:
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;})();
结果大致是这样的
[[ 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]]
然后发现犯二了,x 坐标和 y 坐标位置弄反了,数字竖向排列了,赶紧交换下位置(或者把 res.push() 里面的 i, j 顺序换下)
guessNumData = data.map(function(item) {return [item[1], item[0], item[2] || '-'];});
2、点击事件的监听处理
使用 myChart.on() 监听点击事件。
// 设置一个变量,如果猜对了将其赋值为 1var flag = 0;//监听点击事件,在猜中之前进行响应,params.data[2]就是所猜的数字myChart.on('click', function(params) {if (params.seriesId === 'guessPanel' && flag == 0) { guess(parseInt(params.data[2])); }});
guess 函数做了什么?与预先生成的随机数比对,根据比对结果提供刷新图表的参数:
是否猜中,1 代表猜中,0 代表没猜中;
提示信息;
新的猜数范围最小值;
新的猜数范围最大值。
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 + '之间的数'; 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 函数又做了什么?根据 guess 函数提供的参数更新图表。
function renewEcharts(isGet, msg, min, max) {var opt; // 根据新的猜数范围,修改仪表盘颜色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); // 如没猜中,更新仪表盘和热力图,提示用户继续猜 } 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', // 将新的猜数范围之外的按钮去掉(直接更换热力图的数据) 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); }}
?
android做一个坦克大战小游戏_一个 ECharts 做的猜数小游戏相关推荐
- 用python做一个坦克大战
这是一个非常有意思的项目!如果你想用 Python 来做一个坦克大战游戏,可以考虑使用 Pygame 这个库.它是一个专门用于制作游戏的 Python 库,能够帮助你快速开发出一个坦克大战游戏. 首先 ...
- 用java写一个坦克大战游戏
写一个坦克大战游戏需要具备一定的Java编程基础和对游戏开发的了解.具体实现步骤如下: 需求分析:明确游戏的目标.玩家.障碍物.子弹等要素,并制定游戏规则. 设计游戏界面:设计游戏界面,包括坦克.障碍 ...
- python逻辑运算的一些流程图_Python猜数小游戏
使用random变量随机生成一个1到100之间的数 采集用户所输入的数字,如果输入的不符合要求会让用户重新输入. 输入符合要求,游戏开始.如果数字大于随机数,输出数字太大:如果小于随机数,输出数字太小 ...
- R语言入门——猜数小游戏
R语言入门--猜数小游戏 题目介绍 使用代码(2种方法) 运行结果 题目介绍 设计一个猜数字的游戏:计算机随机生成一个1~100 之间的整数,然后由用户猜测所产生的随机数.根据用户猜测的情况给出不同提 ...
- 【Java——猜数小游戏】
文章目录 (一)编程实现 (二)讲解知识点 1.前测试条件循环 - while循环 (1)语法格式 (2)执行情况 2.后测试条件循环 - do-while循环 (1)语法格式 (2)执行情况 3.随 ...
- 编写程序,实现猜数小游戏。
编写程序,实现猜数小游戏.随机生成一个0~99(包括0和99)的数字,从控制台输入猜测的数字,输出提示太大还是太小,继续猜测,直到猜到为止,游戏过程中,记录猜对所需的次数,游戏结束后公布结果.程序运行 ...
- Java Web应用小案例:猜数小游戏
Java Web应用小案例:猜数小游戏 文章目录 一.演示Python版猜数游戏 二.JSP版猜数游戏程序运行效果
- Java-好玩的猜数小游戏
package net.lyt.month1;import java.util.Scanner;public class Java23 {public static void main(String[ ...
- python制作的简单的猜数小游戏
今天花了一点时间用python写了个猜数小游戏,10分钟就能搞定! 废话不多说,直接上代码 由于代码太过于简单,所以没有什么注释. import randomprint("欢迎来到猜数小游戏 ...
- 完成给“余”猜数的游戏:心里先想好一个1~100之间的整数x,将它分别除以3,4和7并得到3个余数。把这3个余数输入计算机,计算机能马上猜出这个数。
(17)完成给"余"猜数的游戏: 心里先想好一个1~100之间的整数x,将它分别除以3,4和7并得到3个余数.把这3个余数输入计算机,计算机能马上猜出这个数. Please thi ...
最新文章
- spring security 自定义认证登录
- [MOSS开发]:WSS v3授权
- VTK:在多面体数据上使用裁剪和封盖用法实战
- 最小二乘法原理及极值点判定
- angularjs 缓存详解
- RSA 公钥加密——私钥解密
- Android 获取光线强弱,开启闪光灯,关闭闪光灯
- 【Java】基础知识整理
- Centos单网卡多IP的配置
- scrapy命令介绍
- html页面网页打开乱码怎么解决方法,网页乱码怎么解决?
- uniapp项目使用mescroll中mescroll-body组件记录
- 苹果手机!!!fiddler自动抓抓包iphone上的http(或https)请求,手机设置完http代理,但是手机不能上网了。即(fiddler iphone http代理 不能上网)
- 厦门大学计算机专业录取分数线2019,【厦门大学:2019-2016山西省各专业录取分数线】...
- 基于ZigBee技术的智能家居系统实施方案
- 【2019.11.27】EM算法详细推导
- linux管理账户是,Linux管理账户
- Feign原理以及feign调优
- Windows系统下的部分dos命令
- 服务器相关 HTTP 请求错误
热门文章
- 图像检索:CNN对Hash组算法的颠覆
- VTK修炼之道24:图像基本操作_单颜色通道图像合成彩色
- C++/CLI Winform中调用DLL的三种方法
- [转]COM线程模型-套间
- STM32时钟树学习笔记
- 输入3个字符串,按由小到大顺序输出
- protobuf扫盲
- idea debug只断点当前线程,不阻塞其他线程
- STM32开发 -- 地球坐标系(WGS84),火星坐标系(GCJ02), 百度坐标系(BD09)坐标转换
- Ubuntu断电重启后黑屏左上角光标闪烁,分辨率低解决办法