利用原生JS实现欢乐水果机小游戏

玩家点击某个押注物品则在该物品上下注。点击开始则游戏开始,如果没有下注则不能开始游戏。
游戏中的物品有八中,分别为:苹果、西瓜、柠檬、橙子、铃铛、77、双星、BAR。
在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点
击加号增加一个筹码注金,反之减号就减少一个筹码注金
开始: 开始键
奖励:GOOD LUCK
由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分。
出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单的水果机玩玩,废话不多说,直接上代码,只有js有注释,html和css就没有注释了。
这是样式图

在这里插入图片描述

这里是html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fruit</title> <link href="https://www.jb51.net/Fruit.css" > <script src="https://www.jb51.net/Fruit.js"></script> </head> <body> <div> <h2>欢乐水果机</h2> <div> <div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/orange.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/ld.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/25.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/50.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/apple.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/apple2.png" alt=""></a></div> </div> <div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/lemon.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/watermelon.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/watermelon2.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/right.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/apple.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/orange2.png" alt=""></a></div> </div> <div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/orange.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/ld.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/seven2.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/seven.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/apple.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/lemon2.png" alt=""></a></div> </div> <div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/lemon.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/star.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/star2.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/left.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/apple.png" alt=""></a></div> <div><a href="javascript:;" ><img src="https://www.jb51.net/imgs/ld2.png" alt=""></a></div> </div> <button>开始</button> <div> <div> <div> <img src="https://www.jb51.net/imgs/apple.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> <div> <img src="https://www.jb51.net/imgs/orange.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> <div> <img src="https://www.jb51.net/imgs/lemon.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> <div> <img src="https://www.jb51.net/imgs/ld2.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> </div> <div> <div> <img src="https://www.jb51.net/imgs/watermelon.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> <div> <img src="https://www.jb51.net/imgs/star.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> <div> <img src="https://www.jb51.net/imgs/seven.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> <div> <img src="https://www.jb51.net/imgs/50.png" alt=""> <button>-</button> <span>0</span> <button>+</button> </div> </div> </div> <span></span> <span>中将金额<p>0</p></span> <span>当前余额<p>0</p></span> <button>充值¥100</button> </div> </div> </body> </html>

加上一点简单的css布局

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/6d1acf223524a3f005ccdfe5ed386393.html