国产+人+亚洲,成人 a v天堂

Home

Web Front-end

JS Tutorial

Javascript game development: 'Three Kingdoms Cao Cao Biography' component development (4) using map blocks to create a large map_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:42 PM

map

When we were kids, we played jigsaw puzzles and put them together with our own hands. Today we will study how to use javascript to create puzzles. It is also a puzzle, but it is much more troublesome to use js to puzzle than to do it by hand, so I will optimize it into an engine in the future.

1. Foreword

The above is an introduction. I won’t go too far. Players who are familiar with "The Legend of Cao Cao" know that the map of "Three Kingdoms Cao Cao" is made up of small map tiles. To achieve it, it is the same as what the introduction says. : Very troublesome. But even trouble is still a skill, so I share it with you here, I hope you like it.

2. Code explanation

Today I want to change the way of explanation. I won’t give you the code first. Let’s think about the principle first. Now, if you have a picture, cut it into several parts and scramble them. Now if you use js to organize them, how to do it? Let’s not talk about the order of the pictures. First of all, it is difficult to put them together. At this time, I will reduce the difficulty and give you a few options:
A. Use margin to adjust slowly B. Use an array to arrange them C. Give up

In this question, it is unwise to choose A. Choosing C means you are not sure either. It seems that choice B is the best. Since everyone is told to use arrays, let’s start with the code. So as not to dampen everyone's interest.
js code:

Copy code The code is as follows:

/* 
*Prompt: 
*If you want to add hurdle, find string: "{{Add hurdle above." and "{{After add hurdle, add the hurdle to the vector above." please. 
*If you want to add or change type of grid, find string: "{{Add new grid above.". 
*If you want to change position of map, please find string: "{{Change map margin above.". 
*If the icon of crid is changed, you have to change the size of icon. Find "{{Change icon size above." to change size. 
*/ 

//Map of hurdle or military or resource. 
var vView = []; 

/*Remarks: 
*L: land *S: sea *R: river *W: swamp *A: lawn *B: bridge *H: house *h: hospital *w: warehouse *b: bourse *M: military academy *m: military factories 
*r: research Center *P: port *D: dock *s: Shipyard 
*/ 
var mScene = { 
'L': ['./land.png', '陸地'] 
, 'S': ['./sea.png', '河流'] 
, 'T': ['./tree.png', '樹木'] 
, 'B': ['./bridge.png', '橋'] 
, 'C': ['./beach.png', '沙灘'] 
}; 
//{{Add new grid above. 

var mCurrent = { 
Margin: { 
left: -1 
, top: -1 
, right: -1 
, bottom: -1 
} 
, Position: { 
X: -1 
, Y: -1 
} 
, Type: 'NONE' 

}; 
var mTitle = {}; 

var sHurdleONE = 
'S,S,S,S,S,S,S,S,S,S,S' 
  ';T,L,T,T,T,T,S,S,S,S,T' 
  ';T,L,L,T,S,S,S,S,S,L,T' 
  ';T,L,L,L,C,C,C,S,S,T,S' 
  ';T,L,L,L,C,C,C,B,B,L,T' 
  ';T,L,L,C,C,C,C,S,S,L,T' 
  ';T,L,L,C,C,T,S,S,L,L,T' 

//{{Add hurdle above. 

var vHurdles = [sHurdleONE]; 
//{{After add hurdle, add the hurdle to the vector above. 

function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin) 
{ 
var mCoordMember = { 
left: nWidthBasic 
, top: nHeightBasic 
, right: nWidthBasic   nPicWidth 
, bottom: nHeightBasic   nPicHeight 
}; 
var mPositionMember = { 
X: (mCoordMember.left - mMargin.x) / nPicWidth 
, Y: (mCoordMember.top - mMargin.y) / nPicHeight 
}; 
var mItem = { 
Coord: mCoordMember 
, Position: mPositionMember 
, Type: cType 
}; 

return mItem; 
} 

function _loadHurdle(sHurdle) 
{ 
var nBasic = 0; 
var nWidthBasic = nBasic; //margin-left. 
var nHeightBasic = 0; //margin-top. 

//{{Change map margin above. 

var nPicWidth = 45; //Picture width is nBasic. 
var nPicHeight = 45; //Picturn height is nHeightBasic. 
//{{Change icon size above. 

var nSub; 
var nRow; 
var nCol; 

var v = sHurdle.split(';'); 
var vRec = []; 

for(nSub = 0; nSub < v.length; nSub  ){ 
var vCrid = v[nSub].split(','); 
vRec[vRec.length] = vCrid; 
} 

for(nRow = 0; nRow < vRec.length; nRow  ){ 
var vCol = vRec[nRow]; 

for(nCol = 0; nCol < vCol.length; nCol  ){ 
var cType = vCol[nCol]; 
var mMargin = {x: nBasic, y: nBasic}; 

vView[vView.length] = _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin); 

nWidthBasic  = nPicWidth; 
} 

nHeightBasic  = nPicHeight; 
nWidthBasic = nBasic; 
} 
} 



//Show map with vector 'vView'. 
function _showMap(sID) 
{ 
var xDiv=document.getElementById(sID); 

var xGrid; 
var xImg; 


var nTop = 0; 

var nSub; 
var sIdPrefix = 'ID_IMG_NUM_'; 
var sIdGrid = 'ID_A_NUM_'; 
for(nSub = 0; nSub < vView.length; nSub  ){ 
var mGrid = vView[nSub]; 

if(mGrid){ 
var xMargin = mGrid.Coord; 
var cType = mGrid.Type; 
var xProper = mScene[cType]; 

if(xProper){ 
xGrid = document.createElement('a'); 
xImg = document.createElement('img'); 

xImg.style.position = 'absolute'; 
xImg.style.marginLeft = xMargin.left; 
xImg.style.marginTop = xMargin.top; 

xImg.src = xProper[0]; 

xImg.style.border = '0px solid #000000'; 
xImg.id = sIdPrefix   nSub; 

xImg.style.width = 45; 
xImg.style.height = 45; 

xImg.style.display = 'block'; 

xGrid.onclick = function(e){ 
var xCurrentGrid = e.target; 
var sId = xCurrentGrid.id; 
var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length)); 

mCurrent = vView[nIdAsSub]; 
if(!mCurrent){ 
alert("Error 0004."); 
} 
}; 
xGrid.title = xProper[1]   '('   parseInt(mGrid.Position.X)   ', '   parseInt(mGrid.Position.Y 2)   ')'; 
xGrid.id = sIdGrid   nSub; 

xGrid.appendChild(xImg); 

xDiv.appendChild(xGrid); 
}else{ 
alert("Error: 0003."); 
} 
}else{ 
alert("Error: 0002."); 
} 
} 
} 

//Show map of hurdle. 
function _showHurdle(nHurdle) 
{ 
if(vHurdles[nHurdle - 1]){ 
_loadHurdle(vHurdles[nHurdle - 1]); 
_showMap('ID_DIV_BATTLEFIELD'); 
}else{ 
alert("Error: 0001."); 
} 
}

Look, this program only uses 195 lines, and this is a map. It seems to be a bit troublesome. It's okay, explain slowly.
First of all, let’s put the material here:

The material is not from "The Legend of Cao Cao", because I didn't sort out the map materials of "The Legend of Cao Cao", so I just found some randomly. But it can still be used. I hope you don't mind.

Troublesome code is the easiest to make a mess, so make a good distinction between style settings and puzzle core at this time.
Where is the core of the puzzle? Here:

Copy the code The code is as follows:

var mScene = { 
'L ': ['./land.png', 'Land'] 
, 'S': ['./sea.png', 'River'] 
, 'T': ['./tree. png', 'trees'] 
, 'B': ['./bridge.png', 'bridge'] 
, 'C': ['./beach.png', 'beach'] 
}; 
//{{Add new grid above. 

var mCurrent = { 
Margin: { 
left: -1 
, top: -1 
 , right: -1 
, bottom: -1 
} 
, Position: { 
X: -1 
, Y: -1 
} 
, Type: ' NONE' 

}; 
var mTitle = {}; 

var sHurdleONE = 
'S,S,S,S,S,S,S,S,S, S,S' 
 ';T,L,T,T,T,T,S,S,S,S,T' 
 ';T,L,L,T,S,S,S, S,S,L,T' 
 ';T,L,L,L,C,C,C,S,S,T,S' 
 ';T,L,L,L,C, C,C,B,B,L,T' 
 ';T,L,L,C,C,C,C,S,S,L,T' 
 ';T,L,L, C,C,T,S,S,L,L,T' 

//{{Add hurdle above. 

var vHurdles = [sHurdleONE]; 
//{{ After add hurdle, add the hurdle to the vector above.

First I define S, T, B, C, L so that S represents the river, T represents the tree, B represents the bridge, and stands for beach and L stands for land. var mCurrent will be useful later, so I won’t explain it yet. Then there is var mTitle, which is specifically used to display the title, so I won’t explain it. The key is below:

Copy code The code is as follows:

var sHurdleONE = 
'S ,S,S,S,S,S,S,S,S,S,S' 
 ';T,L,T,T,T,T,S,S,S,S,T' 
 ';T,L,L,T,S,S,S,S,S,L,T' 
 ';T,L,L,L,C,C,C,S,S,T, S' 
 ';T,L,L,L,C,C,C,B,B,L,T' 
 ';T,L,L,C,C,C,C,S, S,L,T' 
 ';T,L,L,C,C,T,S,S,L,L,T' 

This code is The defined core of S, T, B, C, and L connected together. Later, you only need to define the width and height of S, T, B, C, and L to connect them together. And the style can be changed just by adjusting their position in the array.
Next, in order to switch maps, we put the first map into the array:

Copy the code The code is as follows:

var vHurdles = [sHurdleONE]; 
//{{After add hurdle, add the hurdle to the vector above.

If a map is added later, Just add the array name to which the map belongs to the vHurdles array, and you can directly write the corresponding subscript when calling it.
The style settings are as follows:

Copy the code The code is as follows:

function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin) 
{ 
var mCoordMember = { 
left: nWidthBasic 
, top: nHeightBasic 
, right: nWidthBasic   nPicWidth 
, bottom: nHeightBasic   nPicHeight 
}; 
var mPositionMember = { 
X: (mCoordMember.left - mMargin.x) / nPicWidth 
, Y: (mCoordMember.top - mMargin.y) / nPicHeight 
}; 
var mItem = { 
Coord: mCoordMember 
, Position: mPositionMember 
, Type: cType 
}; 

return mItem; 
} 

function _loadHurdle(sHurdle) 
{ 
var nBasic = 0; 
var nWidthBasic = nBasic; //margin-left. 
var nHeightBasic = 0; //margin-top. 

//{{Change map margin above. 

var nPicWidth = 45; //Picture width is nBasic. 
var nPicHeight = 45; //Picturn height is nHeightBasic. 
//{{Change icon size above. 

var nSub; 
var nRow; 
var nCol; 

var v = sHurdle.split(';'); 
var vRec = []; 

for(nSub = 0; nSub < v.length; nSub  ){ 
var vCrid = v[nSub].split(','); 
vRec[vRec.length] = vCrid; 
} 

for(nRow = 0; nRow < vRec.length; nRow  ){ 
var vCol = vRec[nRow]; 

for(nCol = 0; nCol < vCol.length; nCol  ){ 
var cType = vCol[nCol]; 
var mMargin = {x: nBasic, y: nBasic}; 

vView[vView.length] = _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin); 

nWidthBasic  = nPicWidth; 
} 

nHeightBasic  = nPicHeight; 
nWidthBasic = nBasic; 
} 
} 



//Show map with vector 'vView'. 
function _showMap(sID) 
{ 
var xDiv=document.getElementById(sID); 

var xGrid; 
var xImg; 


var nTop = 0; 

var nSub; 
var sIdPrefix = 'ID_IMG_NUM_'; 
var sIdGrid = 'ID_A_NUM_'; 
for(nSub = 0; nSub < vView.length; nSub  ){ 
var mGrid = vView[nSub]; 

if(mGrid){ 
var xMargin = mGrid.Coord; 
var cType = mGrid.Type; 
var xProper = mScene[cType]; 

if(xProper){ 
xGrid = document.createElement('a'); 
xImg = document.createElement('img'); 

xImg.style.position = 'absolute'; 
xImg.style.marginLeft = xMargin.left; 
xImg.style.marginTop = xMargin.top; 

xImg.src = xProper[0]; 

xImg.style.border = '0px solid #000000'; 
xImg.id = sIdPrefix   nSub; 

xImg.style.width = 45; 
xImg.style.height = 45; 

xImg.style.display = 'block'; 

xGrid.onclick = function(e){ 
var xCurrentGrid = e.target; 
var sId = xCurrentGrid.id; 
var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length)); 

mCurrent = vView[nIdAsSub]; 
if(!mCurrent){ 
alert("Error 0004."); 
} 
}; 
xGrid.title = xProper[1]   '('   parseInt(mGrid.Position.X)   ', '   parseInt(mGrid.Position.Y 2)   ')'; 
xGrid.id = sIdGrid   nSub; 

xGrid.appendChild(xImg); 

xDiv.appendChild(xGrid); 
}else{ 
alert("Error: 0003."); 
} 
}else{ 
alert("Error: 0002."); 
} 
} 
}

以上的代碼很簡單，自己可以看看，提示一下：當(dāng)你在自己開發(fā)的過程中如果彈出一個(gè)Error: 0002, Error: 0003, Error: 0001什么之類的，就代表出了錯(cuò)，需要馬上去檢查。這是為了在麻煩的程序開發(fā)中有一點(diǎn)提醒而設(shè)計(jì)的。值得注意的是：這里的圖片全是createElement弄出來的，所以請不要猜疑html代碼里有什么蹊蹺。
接著看：

復(fù)制代碼代碼如下:

function _showHurdle(nHurdle) 
{ 
if(vHurdles[nHurdle - 1]){ 
_loadHurdle(vHurdles[nHurdle - 1]); 
_showMap('ID_DIV_BATTLEFIELD'); 
}else{ 
alert("Error: 0001."); 
} 
}

這是在你要弄出地圖的調(diào)用函數(shù)，當(dāng)你在html代碼里寫上：幾可以把拼的圖一下子畫出來。nHurdle就是地圖在數(shù)組vHurdles里的對應(yīng)下標(biāo)，最低是1，而不是0，也就是說要用第一張地圖,那nHurdle就該賦值為1，調(diào)用是寫為：。

源代碼下載
三、演示效果

演示圖在下：

由于是靜態(tài)的，所以就不給demo了。這種方法雖然很麻煩，而且地圖塊多了就很慢，但是畢竟是種技術(shù)，如果大家有什么好的方法也可以來告訴我。

希望大家多支持。謝謝。

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Agnes Tachyon Build Guide | A Pretty Derby Musume

2 weeks ago By Jack chen

Oguri Cap Build Guide | A Pretty Derby Musume

2 weeks ago By Jack chen

Peak: How To Revive Players

4 weeks ago By DDD

Grass Wonder Build Guide | Uma Musume Pretty Derby

1 weeks ago By Jack chen

PEAK How to Emote

3 weeks ago By Jack chen

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

8645

Java Tutorial

1787

CakePHP Tutorial

1730

Laravel Tutorial

1582

PHP Tutorial

1451

Related knowledge

How to make Google Maps the default map in iPhone Apr 17, 2024 pm 07:34 PM

The default map on the iPhone is Maps, Apple's proprietary geolocation provider. Although the map is getting better, it doesn't work well outside the United States. It has nothing to offer compared to Google Maps. In this article, we discuss the feasible steps to use Google Maps to become the default map on your iPhone. How to Make Google Maps the Default Map in iPhone Setting Google Maps as the default map app on your phone is easier than you think. Follow the steps below – Prerequisite steps – You must have Gmail installed on your phone. Step 1 – Open the AppStore. Step 2 – Search for “Gmail”. Step 3 – Click next to Gmail app

How to use map and location functions in uniapp Oct 16, 2023 am 08:01 AM

How to use map and positioning functions in uniapp 1. Background introduction With the popularity of mobile applications and the rapid development of positioning technology, map and positioning functions have become an indispensable part of modern mobile applications. uniapp is a cross-platform application development framework developed based on Vue.js, which can facilitate developers to share code on multiple platforms. This article will introduce how to use maps and positioning functions in uniapp and provide specific code examples. 2. Use the uniapp-amap component to implement the map function

How to add store address to Xiaohongshu map? How to fill in the store address setting? Mar 29, 2024 am 09:41 AM

As Xiaohongshu becomes more and more popular among young people, more and more people choose to open stores on Xiaohongshu. Many novice sellers encounter difficulties when setting up their store address and do not know how to add the store address to the map. 1. How to add the store address to the map in Xiaohongshu? 1. First, make sure your store has a registered account on Xiaohongshu and has successfully opened a store. 2. Log in to your Xiaohongshu account, enter the store backend, and find the "Store Settings" option. 3. On the store settings page, find the "Store Address" column and click "Add Address". 4. In the address adding page that pops up, fill in the detailed address information of the store, including province, city, district, county, street, house number, etc. 5. After filling in, click the "Confirm Add" button. Xiaohongshu will provide you with the address

How to use at-a-glance directions on Google Maps Jun 13, 2024 pm 09:40 PM

A year after its launch, Google Maps has launched a new feature. Once you set a route to your destination on the map, it summarizes your travel route. Once your journey begins, you can "Browse" route guidance from your phone's lock screen. You can use Google Maps to see your estimated arrival time and route. Throughout your trip, you can view navigation information on your lock screen, and by unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps. By unlocking your phone, you can view navigation information without accessing Google Maps.

Master the art of using Apple Maps Guides on iPhone and iPad Aug 30, 2023 am 09:25 AM

In an ever-evolving technological world, the ability to navigate digital maps has become an essential skill. This article provides a comprehensive guide on how to use Apple Maps Guides on iPhone and iPad, a feature that revolutionizes the way users explore their surroundings and plan their journeys. Apple Maps is a built-in application on all Apple devices, and it is constantly updated and improved to provide a seamless navigation experience. One of its most notable features is the Guide feature, which provides a curated list of interesting places to visit in various cities around the world. This feature is not only beneficial for travelers, but also a boon for locals looking to discover new attractions in their city. How to use Apple Maps on iOS guide First, visit the Apple Maps

Better than all methods! HIMap: End-to-end vectorized HD map construction Mar 19, 2024 pm 03:00 PM

Vectorized high-definition (HD) map construction requires predicting the categories and point coordinates of map elements (e.g. road boundaries, lane dividers, crosswalks, etc.). State-of-the-art methods are mainly based on point-level representation learning for regressing precise point coordinates. However, this pipeline has limitations in obtaining element-level information and handling element-level faults, such as wrong element shapes or entanglements between elements. In order to solve the above problems, this paper proposes a simple and effective HybrId framework, named HIMap, to fully learn and interact with point-level and element-level information. Specifically, a hybrid representation called HIQuery is introduced to

How to create an interactive map using HTML, CSS and jQuery Oct 25, 2023 am 09:40 AM

How to Create an Interactive Map Using HTML, CSS, and jQuery Maps are a common visualization tool that help users understand and navigate geographic locations and related information more easily. By using HTML, CSS and jQuery, we can create an interactive map and add some fun and useful features. This article will guide you on how to use these techniques to create your own interactive map. Create the HTML structure First, we need to create the HTML structure to hold the map. The following is a basic

Cloud-based and car-based MapNeXt is all done! Construction of next-generation online high-precision maps Jan 31, 2024 pm 06:06 PM

Written above & the author’s personal understanding In collaborative, connected and automated mobility (CCAM), the stronger the ability of intelligent driving vehicles to perceive, model and analyze the surrounding environment, the more aware and able they are to understand and make decisions , as well as perform complex driving scenarios safely and efficiently. High-precision (HD) maps represent road environments with centimeter-level accuracy and lane-level semantic information, making them a core component of intelligent mobility systems and a key enabler of CCAM technology. These maps provide automated vehicles with a powerful advantage in understanding their surroundings. HD maps are also considered hidden or virtual sensors because they bring together knowledge from physical sensors (maps), namely lidar, cameras, GPS and IMU, to build a model of the road environment. HD map

See all articles

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Javascript game development: 'Three Kingdoms Cao Cao Biography' component development (4) using map blocks to create a large map_javascript skills

Hot AI Tools

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics