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
