The swiping card function is operated in the latest iPhone application. To promote this function, the team members independently developed a simpleSuper cashier games. The first time I wrote a front-end game, I was seriously aware that JS was missing. After all, I was still young, and I felt that my head was too old. Today, I will share with you the results of this game. If you are interested, scan the QR code first.
Directory:
- Game Ideas
- Game scenarios
- Core code
Game Ideas
I like playing games and have played many games. In May, I came into contact with the mobile game "The Legend of the turret", which is fun and interesting, I love and hate spending time and money and enjoy the fun of it. I believe "fun" and "commercial success" are the goals of a game. For Super cashier games, there are many similar products on the market, and our goal is very simple. We just want to make super cashiers into a fun little game. The idea is as follows:
Simple gameplay
Different items are randomly displayed on the game interface. Click the bar code to add points. Other values are reduced.
Easy to use
You can play games in the first game or second game, and the learning cost is low.
Fun
Game UI-style humor, such as an explosion after a bird is hit.
Abuse
The game is simple, fast, and difficult from the very beginning, error-prone, and unacceptable to users.
Share text and pull hate
Most users scored less than 40 for the first time. They were awarded the "commodity cashier" title and all 50% of them were defeated by the cashier. Ask your friends for revenge;
If the score is greater than 40, he is awarded the title of "Super cashier". Ask your friends to surpass it;
Spread and promote through users.
Game scenarios
Works from the master pickles, version, the original interface looks better --
Core code1. randomly generate items
Items appear at any time in the jiugongge. The function is as follows:
// Generate a random number, for example, from 1 ~ 9. Select three random numbers. getrandom (3, 9) function getrandom (count, totle) {var arr = []; var TMP; while (ARR. length <count) {TMP = parseint (math. random () * totle); If (ARR. indexof (TMP) =-1) {arr. push (TMP) ;}} return arr ;}
To add a class for the Li label at any time:
VaR time; // game time var interval; // game running frequency // random display card number. The less time remaining, the card switching speed and the increasing number of cards function _ updateinterval () {// randomly select a class and randomly Add the class $ ("body") for the selected Li "). find (". game-Main li "). removeclass (); var prize_config = ["bird", "code ", "card"]; If (interval> = 800) {var classname_arr = getrandom ("1", "3"); var li_arr = getrandom ("1 ", "9"); For (VAR I = 0; I <1; I ++) {var li_randomname = prize_config [classname_arr [I]; var li_randomli = $ (". game-Main li ") [li_arr [I]; $ (" body "). find (li_randomli ). addclass ("ico-" + li_randomname) ;}// Code omitted here... if (interval <50) {var classname_arr = getrandom ("8", "9"); var li_arr = getrandom ("8", "9 "); for (VAR I = 0; I <8; I ++) {var li_randomname = prize_config [classname_arr [I]; var li_randomli = $ (". game-Main li ") [li_arr [I]; $ (" body "). find (li_randomli ). addclass ("ico-" + li_randomname) ;}// Loop itself time_out = setTimeout (arguments. callee, interval );}
2. Time and score Control
VaR time_minus; var time_out; // time control function prize_time () {time_minus = setinterval (_ countdown, 1000); time_out = setTimeout (_ updateinterval, interval );} function _ updatetime (minus) {time-= minus;} // game time update function _ updatecount () {$ ("# game_time "). text (time) ;}// game time reduction function _ countdown () {_ updatetime (1); If (Time> = 0) {_ updatecount (); interval = time * 15; interval = math. max (interval, 550);} else if (time <0) {_ showend (); time_minus & clearinterval (time_minus); time_out & cleartimeout (time_out );}} // score control, touch the bird and card Avatar and deduct 5 points $ (". game-Main li "). on ("tap", function () {var gamemainli = $ (this); gamemainli. addclass ("On"); If (gamemainli. hasclass ("ico-Bird") {_ updatetime (5)} else if (gamemainli. hasclass ("ico-card") {_ updatetime (5)} else if (gamemainli. hasclass ("ico-Code") {Val + = 1; $ ("# game_order "). text (VAL );}})
3. generate shared text based on the number of game results
First, we need to load the sharing module interface. We will not introduce it here. The sharing cases to the circle of friends are as follows:
// When the time is reached, function _ showend () {$ (". game-Main li "). removeclass (); $ (". state "). removeclass ("hide"); $ (". state-order "). text (VAL); // TXT = math. min (Val/80) * 100) + (math. random () * 99/100 )). tofixed (2), 100); If (Val> = 40) {$ (". state "). addclass ("show-suc"); txt1 = "I am a super cashier, do you dare to challenge me "; // The title of the shared image is pai_img = "ico_mirror_suc.jpg" // The share icon pai_txt = "I swipe the card with a QR code, 60 seconds for the cashier" + Val +, do you dare to challenge the cashier who beat the world's "+ txt2 +" %? "// Shared description} else {$ (". state "). addclass ("show-fail"); txt1 = "I Am a commodity cashier, who will avenge me"; pai_img = "ico_pai_fail.jpg" pai_txt = "I swipe my card with a QR code, 60 seconds cash register "+ Val +" single, beat by the world "+ (100.00-txt2) +" % of the Cashier/(ㄒ o done )/~~, Who will avenge me "}}
Summary
The first complete development of a small game, although not difficult, is also a few days of tossing, the above ideas, the level is limited, the shortcomings, you are welcome to make a brick ~
Finally, I would like to thank the front-end big cat for your assistance ~
[Original] I am a super cashier. Do you dare to challenge me?