带你开发个转盘抽奖小游戏【附源码】

简介: 小时候有没有玩过老虎机抽奖游戏?今天一起来用代码编程实现个简单抽奖的小游戏!首先,先带大家看看实现的效果图是怎么样的:

效果图


小时候有没有玩过老虎机抽奖游戏?今天一起来用代码编程实现个简单抽奖的小游戏!首先,先带大家看看实现的效果图是怎么样的:


1.gif


2分析如何实现


看了上面的效果图,头脑里有没有立刻想到用什么知识点来自己做一个呢?如果有想到,说明你非常不错,可以对知识点举一反三了!

如果没有任何想法,可以继续看本文详细分析。

1、为什么会看到旋转的效果?

这个其实简单,就是对一张图片,外围包裹一层边框,然后让其先隐藏掉,这样每次轮转到这张图片的时候,就让外边框显示出来,其他的图片隐藏。

代码如下:


//定义一个方法,用来显示指定位置的图片框背景
   //不管怎么变化,最终一定会调用该方法,并传入position参数,这个参数就是中奖结果
   public void showBg(int position) {
       //如果遍历到的ImageView的位置正好是position,就显示选中的背景图片,
       //其他都不显示背景
       valuse = position;
       for (int i = 0; i < imgs.length; i++) {
           if (i == position) {
               imgs[i].setBackgroundResource(R.drawable.img_bg);
           } else {
               //其他的,背景都去掉
               imgs[i].setBackgroundResource(0);
           }
       }
   }


2、怎么让其旋转起来,实现游戏效果?

这个如果你可以想到Android中的Handler,想必要实现这个效果,那不是so easy的一件事。

具体代码如下:

Handler handler = new Handler() {
       @Override
       public void handleMessage(Message msg) {
           super.handleMessage(msg);
           switch (msg.what) {
               case 100: {
                   //表示显示下一个图片的背景
                   //取出当前显示背景图片的位置
                   int current = msg.arg1;
                   //++
                   current++;
                   //再创建一个Message,设置其arg1
                   Message msgNew = Message.obtain();
                   //标识
                   msgNew.what = 100;
                   //参数
                   msgNew.arg1 = current;
                   //延时发送
                   handler.sendMessageDelayed(msgNew, current * 10);
                   //切换显示图片背景
                   showBg(current % imgs.length);
               }
               break;
               case 200: {
                   //收到停止的消息
                   //移除msg.what=100的所有消息
                   handler.removeMessages(100);
                   //读取最终结果
                   Toast.makeText(MainActivity.this, "恭喜你,中了:" + valuse, Toast.LENGTH_LONG).show();
               }
               break;
           }
       }
   };


3、如何让每次转到的位置都不一样?

这个就需要我们用一个随机数,来控制Handle的消息的随机发送时间长短。具体的代码如下:


public void start(View view) {
       //查看消息队列
       if (handler.hasMessages(100)) {
           //表示消息队列中含有该消息,也就是说已经启动过
           Toast.makeText(this, "游戏已经启动,请稍候~~~~", Toast.LENGTH_LONG).show();
           return;
       }
       //让Handler玩起来
       Message msg = handler.obtainMessage();
       msg.what = 100;
       msg.arg1 = 0;
       msg.sendToTarget();
       //生成一个随机数:5~10秒之间
       Random rd = new Random();
       int time = rd.nextInt(5) + 5;
       //延时发送停止消失
       Message msg_stop = Message.obtain();
       msg_stop.what = 200;
       handler.sendMessageDelayed(msg_stop, time * 1000);
   }


想明白了以上三点,实现这个小游戏,应该不成问题了!


3本文源码


1. public class MainActivity extends AppCompatActivity {
 2. //八个ImageView数组
 3. ImageView[] imgs = new ImageView[8];
 4. //id数组
 5. int[] ids = {
 6. R.id.iv1, R.id.iv2, R.id.iv3, R.id.iv4, R.id.iv5, R.id.iv6, R.id.iv7, R.id.iv8, };
 15. @Override
 16. protected void onCreate(Bundle savedInstanceState) {
 17. super.onCreate(savedInstanceState);
 18. setContentView(R.layout.activity_main);
 19. //初始化ImageView
 20. initImgs();
 21. }
 22. /**
 23. * 找到所有的图片控件
 24. */
 25. private void initImgs() {
 26. for (int i = 0; i < imgs.length; i++) {
 27. imgs[i] = (ImageView) findViewById(ids[i]);
 28. }
 29. }
 30. //记录最终中奖位置
 31. int values = 0;
 32. //定义一个方法,用来显示指定位置的图片框背景
 33. public void showBg(int position) {
 34. //如果遍历到的ImageView的位置正好是position,就显示选中的背景图片,
 35. //其他都不显示背景
 36. values = position;
 37. for (int i = 0; i < imgs.length; i++) {
 38. if (i == position) {
 39. imgs[i].setBackgroundResource(R.drawable.img_bg);
 40. } else {
 41. //其他的,背景都去掉
 42. imgs[i].setBackgroundResource(0);
 43. }
 44. }
 45. }
 46. Handler handler = new Handler() {
 47. @Override
 48. public void handleMessage(Message msg) {
 49. super.handleMessage(msg);
 50. switch (msg.what) {
 51. case 100: {
 52. //表示显示下一个图片的背景
 53. //取出当前显示背景图片的位置
 54. int current = msg.arg1;
 55. //++
 56. current++;
 57. //再创建一个Message,设置其arg1
 58. Message msgNew = Message.obtain();
 59. //标识
 60. msgNew.what = 100;
 61. //参数
 62. msgNew.arg1 = current;
 63. //延时发送
 64. handler.sendMessageDelayed(msgNew, current * 10);
 65. //切换显示图片背景
 66. showBg(current % imgs.length);
 67. }
 68. break;
 69. case 200: {
 70. //收到停止的消息
 71. //移除msg.what=100的所有消息
 72. handler.removeMessages(100);
 73. //读取最终结果
 74. Toast.makeText(MainActivity.this, "恭喜你中奖了" + values, Toast.LENGTH_SHORT).show();
 75. }
 76. break;
 77. }
 78. }
 79. };
 80. //点击开始,动起来
 81. //重复点击,多次启动
 82. /*
 83. * 1.点击时,判断消息队列是否有what=100的消息时,如果有,说明已经启动
 84. *
 85. * 2.点击后,设置按钮不可用,当handler收到消息,重新设置可点击
 86. *
 87. * */
 88. public void start(View view) {
 89. if (handler.hasMessages(100)) {
 90. //表示该队列含有该消息,说明已经启动
 91. Toast.makeText(MainActivity.this, "游戏已经启动", Toast.LENGTH_SHORT).show();
 92. return;
 93. }
 94. //让Handler玩起来
 95. Message msg = Message.obtain();
 96. msg.what = 100;
 97. msg.arg1 = 0;
 98. handler.sendMessage(msg);
 99. //生成一个随机数:5~10秒之间
 100. Random rd = new Random();
 101. int time = rd.nextInt(5) + 5;
 102. //延时发送停止消失
 103. Message msg_stop = Message.obtain();
 104. msg_stop.what = 200;
 105. handler.sendMessageDelayed(msg_stop, time * 1000);
 106. }
 107. }


最后,提前祝大家元旦快乐!

相关文章
|
7月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
90 7
jQuery幸运大转盘抽奖活动代码
|
29天前
|
JavaScript
原生JS实现斗地主小游戏
这是一个原生的JS网页版斗地主小游戏,代码注释全。带有斗地主游戏基本的地主、选牌、提示、出牌、倒计时等功能。简单好玩,欢迎下载
29 7
|
29天前
|
JavaScript
新年倒计时动画网页特效源码
新年倒计时动画网页特效源码是一段基于JS实现的中国节日元旦2025年倒计时动画效果代码,利用此代码,可以实现任意节日的倒计时效果,欢迎对此代码感兴趣的朋友前来下载参考。
35 6
|
4月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
7月前
|
开发者
如何在游戏中实现一个好看的金币效果
如何在游戏中实现一个好看的金币效果
99 1
|
7月前
|
小程序
html+css+js实现带有转盘的抽奖小程序
html+css+js实现带有转盘的抽奖小程序
125 0
|
小程序 JavaScript
小程序实现大转盘仿天猫抽奖 跑马灯效果(有图有源码)---微信小程序源码大集004
小程序实现大转盘仿天猫抽奖 跑马灯效果(有图有源码)---微信小程序源码大集004
287 0
|
小程序 开发工具
小蚂蚁的答题游戏模版
到现在为止答题类型的游戏模版已经做了 3 个了,经常有人来问关于答题游戏的模版,之前都分散在各处,还得一个一个的找,今天索性就把它们汇总到这里,方便查看体验,也方便购买。
126 0
|
前端开发 JavaScript
3D魔方小游戏(附源码)
一说到魔方 想必大家都熟悉的不能再熟悉了 自己或者曾今自己的朋友非常喜欢玩的一款游戏 言归正卷 那么实用前端的技术怎么实现3D的魔方制作呢 从以下几个方面就不难发现 前端实现3D魔方都得需要用上这些技术栈
3D魔方小游戏(附源码)
下一篇
DataWorks