JavaScript mini-game--2048 (MOBILE)

HTML5 New added a lot of events, but because their compatibility problem is not very ideal, the application is not too strong, so basically omitted here, we only share the application of a wide range of compatible good events, and later with the compatibility of the promotion after the addition of sharing. The events today are mainly touch events: Touchstart, Touchmove and Touchend.

The first touch events Touchstart, Touchmove, and Touchend are the iOS version of the Safari browser in order to communicate some information to the developer about the newly added event. Because iOS devices have neither a mouse nor a keyboard, the PC-side mouse and keyboard events are not enough when developing interactive Web pages for mobile Safari browsers.

When the iphone 3Gs was released, its own mobile Safari browser provided some new events related to touch operations. Subsequently, the browser on Android also implemented the same event. Touch events start when the user's finger is on the screen, when it slides on the screen, or when it's removed from the screen. The following are specific instructions:

　　Touchstart event : Triggers when the finger touches the screen, even if a finger is already placed on the screen.

　　touchmove event : Triggers continuously when the finger is sliding on the screen. During this event, calling the Preventdefault () event can prevent scrolling.

　　touchend event : Triggers when the finger is left on the screen.

　　Touchcancel Event : triggered when the system stops tracking touch. The exact departure time for this event is not specified in the documentation, and we can only guess.

All of these events will bubble up and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a way that is compatible with the DOM. So, the event object for each touch event provides properties that are common in mouse practice: bubbles (the type of bubbling event), cancelable (whether the Preventdefault () method can be used to cancel the default action associated with the event), ClientX ( Returns the horizontal coordinates of the mouse pointer when the event is triggered, ClientY (returns the vertical coordinates of the mouse pointer when the event is triggered), ScreenX (the horizontal coordinates of the mouse pointer when an event is triggered), and Screeny (returns the vertical coordinates of the mouse pointer when an event is triggered).

var document_width = window.screen.availWidth;  // Screen Width function Prepare_for_mobile () {    if (Document_width <$) {        $ (' HTML '). CSS ({             ' font-size ': ' 40px '        });}    }

// Monitor the touch of mobile device start document.addeventlistener (' touchstart ',function  (event)    {= Event.touches[0].pagex;     = Event.touches[0].pagey;});

// Monitor mobile device Touch Mobile document.addeventlistener (' touchmove ',function  (evnet) {    Event.preventdefault ();});

//Monitor touch end of mobile deviceDocument.addeventlistener (' Touchend ',function(event) {EndX= Event.changedtouches[0].pagex; Endy= Event.changedtouches[0].pagey; varx = EndX-StartX; vary = Endy-Starty; if(Math.Abs (x) < 0.3*document_width && Math.Abs (y) < 0.3*document_width) {        return; }    if($ (' #score '). Text = =success_string)        {New_game (); return; }    //x    if(Math.Abs (x) >Math.Abs (y)) {        if(X > 0){            //Move Right            if(Move_right ()) {SetTimeout (' Generate_one_number () ', 210); SetTimeout (' Is_gameover () ', 300); }        } Else {            //Move left            if(Move_left ()) {SetTimeout (' Generate_one_number () ', 210); SetTimeout (' Is_gameover () ', 300); }        }    } Else if(Math.Abs (x) < Math.Abs (y)) {//y        if(Y < 0){            //Move Up            if(Move_up ()) {SetTimeout (' Generate_one_number () ', 210); SetTimeout (' Is_gameover () ', 300); }        } Else{//Move Down            if(Move_down ()) {SetTimeout (' Generate_one_number () ', 210); SetTimeout (' Is_gameover () ', 300); }        }    }})

JavaScript mini-game--2048 (MOBILE)