Development of JavaScript Game "kingdoms Cao Chuan" Parts Development (v) Implementation of mobile map _javascript skills

Source: Internet
Author: User
Tags setinterval

First, the preface

This is a simple story and it will be quicker to understand. So I only focus on the analysis, the other is the turn of the people think Oh! First of all, I can be less in-depth game development, because now programmers love to use canvas, I will only take a few div together. But it doesn't matter, because the game is the same. Ha! Nonsense recently a little more, hope everyone forgives. Next, look at the code parsing.

Second, the code explanation

Today, the order of explanation, first look at the code to see the picture.

This is the contents of the Slg.js:

Copy Code code as follows:

var subtractedmargin = 0;
var subtractedmarginl = 0;
var MouseDown = 0;

var toright;
var ToLeft;
var Todown;
var Toup;

Window.onmouseup = function () {
MouseDown = 0;

Clearinterval (ToRight);
Clearinterval (ToLeft);
Clearinterval (Todown);
Clearinterval (Toup);
}

function Mapmove (direction)
{
switch (direction) {
Case "Down":
Subtractedmargin-= 15;

$ ("#ID_IMG_MAP"). Animate ({margintop:subtractedmargin + "px"}, 120);

Break

Case "Up":
Subtractedmargin + 15;

$ ("#ID_IMG_MAP"). Animate ({margintop:subtractedmargin + "px"}, 120);

Break

Case ' right ':
SUBTRACTEDMARGINL-= 15;

$ ("#ID_IMG_MAP"). Animate ({marginleft:subtractedmarginl + "px"}, 120);

Break

Case "left":
Subtractedmarginl + 15;

$ ("#ID_IMG_MAP"). Animate ({marginleft:subtractedmarginl + "px"}, 120);

Break
}

if (Subtractedmarginl <-415) {
Clearinterval (ToRight);
Clearinterval (ToLeft);
}
if (Subtractedmarginl >-20) {
Clearinterval (ToRight);
Clearinterval (ToLeft);
}

if (Subtractedmargin <-640) {
Clearinterval (Todown);
Clearinterval (Toup);
}
if (Subtractedmargin >-20) {
Clearinterval (Todown);
Clearinterval (Toup);
}
}

$ ("body"). Ready (function () {
$ ("#ID_DIV_TORIGHT"). MouseDown (function () {
MouseDown = 1;

if (Subtractedmarginl > -415 && mousedown = 1) {
Mapmove ("right");
ToRight = setinterval (function () {Mapmove ("right");}, 120);
}

});

$ ("#ID_DIV_TOLEFT"). MouseDown (function () {
MouseDown = 1;

if (Subtractedmarginl < -20 && MouseDown = 1) {
Mapmove ("left");
ToLeft = setinterval (function () {Mapmove ("left");}, 120);
}
});

$ ("#ID_DIV_TODOWN"). MouseDown (function () {
MouseDown = 1;

if (Subtractedmargin > -640 && mousedown = 1) {
Mapmove ("Down");
Todown = setinterval (function () {Mapmove ("Down");}, 120);
}
});

$ ("#ID_DIV_TOUP"). MouseDown (function () {
MouseDown = 1;

if (Subtractedmargin < -20 && MouseDown = 1) {
Mapmove ("Up");
Toup = setinterval (function () {Mapmove ("Up");}, 120);
}
});
});

When you see the title of this article must not understand the meaning of the topic, because too abstract. Now do the explanation: Removable is representative can move around in all directions, map is a map, can be the world map, China map, game map ... It has to be a picture anyway. Here are a few more words, but it doesn't matter, because it's better to know the truth than to know it.
Next I publish the HTML code because the HTML code is so important:
Copy Code code as follows:

<title>SLG</title>

<link rel= "stylesheet" type= "Text/css" href= "/main_looks.css"./>
<script type= "Text/javascript" src= "Jquery-1.8.0.js" ></script>

<script type= "Text/javascript" src= "/slg.js" ></script>
<body>
<div id= "Id_div_slgpage" style= "WIDTH:718PX; height:500px; border:5px solid lightgray; Overflow:hidden; " >

</div>
<!--<input type= "button" value= "Down" id= "Id_button_down"/>
<input type= "button" value= "Up" id= "id_button_up"/>
<input type= "button" value= "left" id= "Id_button_left"/>
<input type= "button" value= "right" id= "Id_button_right"/>-->
<div id= "Id_div_toright" style= "width:30px; height:500px; border:0px solid lightgray; Position:absolute; Z-index:9; Margin: -508px 0 0 689px; " ></div>
<div id= "Id_div_toleft" style= "width:30px; height:500px; border:0px solid lightgray; Position:absolute; Z-index:9; Margin: -508px 0 0 0px; " ></div>
<div id= "Id_div_todown" style= "WIDTH:718PX; height:30px; border:0px solid lightgray; Position:absolute; Z-index:10; Margin: -41px 0 0 0px; " ></div>
<div id= "Id_div_toup" style= "WIDTH:718PX; height:30px; border:0px solid lightgray; Position:absolute; Z-index:10; Margin: -508px 0 0 0px; " ></div>
</body>

Now you can compare two pieces of code to see, it is worth noting that there is a point: in the HTML code, I put a picture into the Div, then the Div would not cover the picture, but when you add Overflow:hidden, you can cover the picture.

In this program in order to click near the border can make the map move, I used four div press the picture four edges, when the border is clicked near, is equal to point Div, Point Div will mobilize the corresponding function. This may be a bit of a bad technique, but it's also a good idea.

Another point to note is that when you click the function near the border, I use a very special way to keep the map moving until you release the mouse. This method is to use SetInterval () Wait a few seconds and then move, SetInterval () is a continuous cycle of dongdong, so it has been called down, when the mouse release, the use of clearinterval (); let SetInterval () stop, so, This is the link,!!!. Ha ha.

Yes, don't forget to give the pictures to everyone, the picture is a bit big ...


SOURCE Download Address

Third, the demonstration effect

First look at the demo Picture:


Then it is:


Demo Address:
Note: After entering the demo, click on the edge of the picture to move the map.

I hope we can support you! Thank you!

Use JavaScript to develop "Kingdoms Cao Chuan" series of articles almost to the end, the next time we study the HTML5 game development. Believe that is the challenge of wisdom. Please look forward to it! ---yorhom Wang

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.