* সম্পাদনা করুন: জাভাস্ক্রিপ্টে স্থির ত্রুটি যা ফায়ারফক্সে ত্রুটি ঘটায় *
সম্পাদনা করুন: পিএইচপি উত্স কোডটিতে কেবলমাত্র হেক্সেসকে স্কেল করার ক্ষমতা যুক্ত করা হয়েছে। ক্ষুদ্র 1/2 আকারের আকার বা 2x জাম্বো, এটি আপনার উপর নির্ভর করে :)
এই সমস্ত লেখার ক্ষেত্রে কীভাবে রাখবেন আমি পুরোপুরি নিশ্চিত ছিলাম না তবে খুঁজে পেলাম একটি সম্পূর্ণ লাইভ উদাহরণের জন্য কোডটি লেখা সহজ easier পৃষ্ঠাটি (নীচের লিঙ্ক এবং উত্স) গতিশীলভাবে পিএইচপি সহ একটি হেক্সম্যাপ তৈরি করে এবং মানচিত্রের ক্লিকগুলি পরিচালনা করতে জাভাস্ক্রিপ্ট ব্যবহার করে। একটি হেক্সে ক্লিক করা হেক্সকে হাইলাইট করে।
মানচিত্রটি এলোমেলোভাবে উত্পাদিত হয়েছে তবে মানচিত্রটি জনপ্রিয় করার পরিবর্তে আপনার নিজের কোড ব্যবহার করতে সক্ষম হওয়া উচিত। এটি একটি সাধারণ 2 ডি অ্যারে দ্বারা প্রতিনিধিত্ব করা হয়, প্রতিটি অ্যারে উপাদান সেই হেক্সে ভূখণ্ডের প্রকার ধারণ করে।
হেক্স মানচিত্রের উদাহরণটি দেখতে আমাকে ক্লিক করুন
ব্যবহার করতে, এটি হাইলাইট করতে যে কোনও হেক্সে ক্লিক করুন।
এই মুহুর্তে এটি একটি 10x10 মানচিত্র উত্পন্ন করছে, তবে আপনি পিএইচপি-তে মানচিত্রের আকারটি আপনার পছন্দ অনুযায়ী কোনও আকারে পরিবর্তন করতে পারবেন। উদাহরণস্বরূপ আমি ওয়েসনথ গেমটি থেকে টাইলসের একটি সেটও ব্যবহার করছি। এগুলির উচ্চতা 72x72 পিক্সেল, তবে উত্সটি আপনাকে আপনার হেক্স টাইলসের আকার নির্ধারণ করতে দেয়।
হেক্সগুলি "হেক্সের বাইরে" অঞ্চলগুলি স্বচ্ছ হিসাবে সেট করে পিএনজি চিত্রগুলি দ্বারা প্রতিনিধিত্ব করে। প্রতিটি হেক্সের অবস্থান নির্ধারণের জন্য, আমি প্রতিটি টাইলের পরম অবস্থান সেট করতে সিএসএস ব্যবহার করছি, যা হেক্স গ্রিড স্থানাঙ্ক দ্বারা গণনা করা হয়। মানচিত্রটি একটি একক ডিআইভিতে আবদ্ধ রয়েছে, যা উদাহরণটি পরিবর্তন করতে আপনার পক্ষে সহজ হবে।
এখানে পুরো পৃষ্ঠা কোডটি দেওয়া আছে। আপনি ডেমো উত্সটি (সমস্ত হেক্স চিত্র সহ) ডাউনলোড করতে পারেন ।
<?php
// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// :: HEX.PHP
// ::
// :: Author:
// :: Tim Holt, tim.m.holt@gmail.com
// :: Description:
// :: Generates a random hex map from a set of terrain types, then
// :: outputs HTML to display the map. Also outputs Javascript
// :: to handle mouse clicks on the map. When a mouse click is
// :: detected, the hex cell clicked is determined, and then the
// :: cell is highlighted.
// :: Usage Restrictions:
// :: Available for any use.
// :: Notes:
// :: Some content (where noted) copied and/or derived from other
// :: sources.
// :: Images used in this example are from the game Wesnoth.
// ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
// --- Turn up error reporting in PHP
error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE);
// --- Define some constants
$MAP_WIDTH = 10;
$MAP_HEIGHT = 10;
$HEX_HEIGHT = 72;
// --- Use this to scale the hexes smaller or larger than the actual graphics
$HEX_SCALED_HEIGHT = $HEX_HEIGHT * 1.0;
$HEX_SIDE = $HEX_SCALED_HEIGHT / 2;
?>
<html>
<head>
<title>Hex Map Demo</title>
<!-- Stylesheet to define map boundary area and hex style -->
<style type="text/css">
body {
/*
margin: 0;
padding: 0;
*/
}
.hexmap {
width: <?php echo $MAP_WIDTH * $HEX_SIDE * 1.5 + $HEX_SIDE/2; ?>px;
height: <?php echo $MAP_HEIGHT * $HEX_SCALED_HEIGHT + $HEX_SIDE; ?>px;
position: relative;
background: #000;
}
.hex-key-element {
width: <?php echo $HEX_HEIGHT * 1.5; ?>px;
height: <?php echo $HEX_HEIGHT * 1.5; ?>px;
border: 1px solid #fff;
float: left;
text-align: center;
}
.hex {
position: absolute;
width: <?php echo $HEX_SCALED_HEIGHT ?>;
height: <?php echo $HEX_SCALED_HEIGHT ?>;
}
</style>
</head>
<body>
<script>
function handle_map_click(event) {
// ----------------------------------------------------------------------
// --- This function gets a mouse click on the map, converts the click to
// --- hex map coordinates, then moves the highlight image to be over the
// --- clicked on hex.
// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
// --- Determine coordinate of map div as we want the click coordinate as
// --- we want the mouse click relative to this div.
// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
// --- Code based on http://www.quirksmode.org/js/events_properties.html
// ----------------------------------------------------------------------
var posx = 0;
var posy = 0;
if (event.pageX || event.pageY) {
posx = event.pageX;
posy = event.pageY;
} else if (event.clientX || e.clientY) {
posx = event.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = event.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// --- Apply offset for the map div
var map = document.getElementById('hexmap');
posx = posx - map.offsetLeft;
posy = posy - map.offsetTop;
//console.log ("posx = " + posx + ", posy = " + posy);
// ----------------------------------------------------------------------
// --- Convert mouse click to hex grid coordinate
// --- Code is from http://www-cs-students.stanford.edu/~amitp/Articles/GridToHex.html
// ----------------------------------------------------------------------
var hex_height = <?php echo $HEX_SCALED_HEIGHT; ?>;
x = (posx - (hex_height/2)) / (hex_height * 0.75);
y = (posy - (hex_height/2)) / hex_height;
z = -0.5 * x - y;
y = -0.5 * x + y;
ix = Math.floor(x+0.5);
iy = Math.floor(y+0.5);
iz = Math.floor(z+0.5);
s = ix + iy + iz;
if (s) {
abs_dx = Math.abs(ix-x);
abs_dy = Math.abs(iy-y);
abs_dz = Math.abs(iz-z);
if (abs_dx >= abs_dy && abs_dx >= abs_dz) {
ix -= s;
} else if (abs_dy >= abs_dx && abs_dy >= abs_dz) {
iy -= s;
} else {
iz -= s;
}
}
// ----------------------------------------------------------------------
// --- map_x and map_y are the map coordinates of the click
// ----------------------------------------------------------------------
map_x = ix;
map_y = (iy - iz + (1 - ix %2 ) ) / 2 - 0.5;
// ----------------------------------------------------------------------
// --- Calculate coordinates of this hex. We will use this
// --- to place the highlight image.
// ----------------------------------------------------------------------
tx = map_x * <?php echo $HEX_SIDE ?> * 1.5;
ty = map_y * <?php echo $HEX_SCALED_HEIGHT ?> + (map_x % 2) * (<?php echo $HEX_SCALED_HEIGHT ?> / 2);
// ----------------------------------------------------------------------
// --- Get the highlight image by ID
// ----------------------------------------------------------------------
var highlight = document.getElementById('highlight');
// ----------------------------------------------------------------------
// --- Set position to be over the clicked on hex
// ----------------------------------------------------------------------
highlight.style.left = tx + 'px';
highlight.style.top = ty + 'px';
}
</script>
<?php
// ----------------------------------------------------------------------
// --- This is a list of possible terrain types and the
// --- image to use to render the hex.
// ----------------------------------------------------------------------
$terrain_images = array("grass" => "grass-r1.png",
"dirt" => "dirt.png",
"water" => "coast.png",
"path" => "stone-path.png",
"swamp" => "water-tile.png",
"desert" => "desert.png",
"oasis" => "desert-oasis-tile.png",
"forest" => "forested-mixed-summer-hills-tile.png",
"hills" => "hills-variation3.png",
"mountain" => "mountain-tile.png");
// ==================================================================
function generate_map_data() {
// -------------------------------------------------------------
// --- Fill the $map array with values identifying the terrain
// --- type in each hex. This example simply randomizes the
// --- contents of each hex. Your code could actually load the
// --- values from a file or from a database.
// -------------------------------------------------------------
global $MAP_WIDTH, $MAP_HEIGHT;
global $map, $terrain_images;
for ($x=0; $x<$MAP_WIDTH; $x++) {
for ($y=0; $y<$MAP_HEIGHT; $y++) {
// --- Randomly choose a terrain type from the terrain
// --- images array and assign to this coordinate.
$map[$x][$y] = array_rand($terrain_images);
}
}
}
// ==================================================================
function render_map_to_html() {
// -------------------------------------------------------------
// --- This function renders the map to HTML. It uses the $map
// --- array to determine what is in each hex, and the
// --- $terrain_images array to determine what type of image to
// --- draw in each cell.
// -------------------------------------------------------------
global $MAP_WIDTH, $MAP_HEIGHT;
global $HEX_HEIGHT, $HEX_SCALED_HEIGHT, $HEX_SIDE;
global $map, $terrain_images;
// -------------------------------------------------------------
// --- Draw each hex in the map
// -------------------------------------------------------------
for ($x=0; $x<$MAP_WIDTH; $x++) {
for ($y=0; $y<$MAP_HEIGHT; $y++) {
// --- Terrain type in this hex
$terrain = $map[$x][$y];
// --- Image to draw
$img = $terrain_images[$terrain];
// --- Coordinates to place hex on the screen
$tx = $x * $HEX_SIDE * 1.5;
$ty = $y * $HEX_SCALED_HEIGHT + ($x % 2) * $HEX_SCALED_HEIGHT / 2;
// --- Style values to position hex image in the right location
$style = sprintf("left:%dpx;top:%dpx", $tx, $ty);
// --- Output the image tag for this hex
print "<img src='$img' alt='$terrain' class='hex' style='zindex:99;$style'>\n";
}
}
}
// -----------------------------------------------------------------
// --- Generate the map data
// -----------------------------------------------------------------
generate_map_data();
?>
<h1>Hex Map Example</h1>
<a href='index.phps'>View page source</a><br/>
<a href='hexmap.zip'>Download source and all images</a>
<!-- Render the hex map inside of a div block -->
<div id='hexmap' class='hexmap' onclick='handle_map_click(event);'>
<?php render_map_to_html(); ?>
<img id='highlight' class='hex' src='hex-highlight.png' style='zindex:100;'>
</div>
<!--- output a list of all terrain types -->
<br/>
<?php
reset ($terrain_images);
while (list($type, $img) = each($terrain_images)) {
print "<div class='hex-key-element'><img src='$img' alt='$type'><br/>$type</div>";
}
?>
</body>
</html>
এখানে উদাহরণের একটি স্ক্রিনশট ...
অবশ্যই কিছু উন্নতি ব্যবহার করতে পারে। আমি পূর্ববর্তী মন্তব্যে লক্ষ্য করেছি আপনি বলেছেন যে আপনি jQuery এর সাথে পরিচিত ছিলেন, যা ভাল। জিনিসগুলি সহজ রাখতে আমি এখানে এটি ব্যবহার করি নি তবে এটি ব্যবহার করা বেশ কার্যকর হবে।