[Original] I am a super cashier. Do you dare to challenge me?

Source: Internet
Author: User

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?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.