´«ÆæÊÀ½çµ¥»ú°æ±à³ÌºËÐÄ·ÖΪH5°æºÍ´«Í³µ¥»ú°æ£¬Á½Õß±à³ÌÓïÑÔ¡¢¿ª·¢»·¾³¡¢ºËÐÄÂß¼²»Í¬£¬H5µ¥»ú°æ²àÖØÇ°¶ËչʾÓë¼òµ¥ºó¶Ë½»»¥£¬´«Í³µ¥»ú°æ²àÖØÒýÇæÅäÖÃÓë½Å±¾¿ª·¢£¬ÒÔÏÂÏêϸ½²½â±à³Ì»ù´¡¡¢ºËÐÄ´úÂëʾÀý¡¢ÍêÕû±à³Ì²½Ö裬ÐÂÊֿɰ´Á÷³ÌÉÏÊÖ£¬ËùÓдúÂë¿ÉÖ±½Ó¸´ÖƲâÊÔʹÓá£
ÏÈÃ÷È·ºËÐÄÇø±ð£º´«ÆæÊÀ½çH5µ¥»ú°æ»ùÓÚHTML5¼¼Êõ¿ª·¢£¬ÎÞÐè°²×°¿Í»§¶Ë£¬Í¨¹ýä¯ÀÀÆ÷¼´¿ÉÔËÐУ¬±à³ÌÒÀÀµHTML¡¢CSS¡¢JavaScript£¬´îÅäNode.js»òPHP×ö¼òµ¥ºó¶Ë½»»¥£¨µ¥»ú°æ¿ÉÊ¡ÂÔ¸´ÔÓºó¶Ë£¬½ö±£Áô±¾µØÊý¾Ý½»»¥£©£»´«Í³´«ÆæÊÀ½çµ¥»ú°æÒÀÀµÓÎÏ·ÒýÇæ£¨ÈçGOM¡¢GEE¡¢cocos2dx-Lua£©£¬±à³ÌÒÔÒýÇæ½Å±¾£¨QM¡¢QF½Å±¾£©¡¢Lua¡¢C++ΪÖ÷£¬ºËÐÄÊÇÅäÖÃÓÎÏ·Âß¼¡¢½ÇÉ«¡¢µØÍ¼µÈÊý¾Ý£¬ÎÞÐ踴ÔÓǰ¶Ë¿ª·¢¡£
ÎÞÂÛÊÇH5µ¥»ú°æ»¹ÊÇ´«Í³µ¥»ú°æ£¬±à³ÌǰÐè×¼±¸¶ÔÓ¦¿ª·¢»·¾³£¬»·¾³´î½¨ÊDZà³ÌµÄ»ù´¡£¬È±ÉÙ¶ÔÓ¦»·¾³»áµ¼Ö´úÂëÎÞ·¨ÔËÐС¢µ÷ÊÔʧ°Ü£¬ÒÔÏ·ֱð˵Ã÷Á½ÖÖ°æ±¾µÄ¿ª·¢»·¾³´î½¨²½Ö裬ֱ±¼Ö÷Ì⣬²»Ìí¼Ó¶àÓàÐÞÊΡ£
Ò»¡¢´«ÆæÊÀ½çH5µ¥»ú°æ¿ª·¢»·¾³´î½¨£¨±à³ÌǰÌᣩ
1.ºËÐŤ¾ß×¼±¸£ºÏÂÔØ°²×°VSCode£¨´úÂë±à¼¹¤¾ß£¬ÊÊÅäËùÓÐH5¿ª·¢ÓïÑÔ£©¡¢Node.js£¨ÓÃÓÚ¼òµ¥ºó¶Ë½»»¥£¬µ¥»ú°æ¿ÉÑ¡£¬Èô½ö×öǰ¶ËÑÝʾ¿ÉÊ¡ÂÔ£©¡¢ä¯ÀÀÆ÷£¨Chrome¡¢Edge¾ù¿É£¬ÓÃÓÚ²âÊÔ´úÂëÔËÐÐЧ¹û£©¡¢±¾µØ·þÎñÆ÷²å¼þ£¨VSCode×Ô´øµÄLiveServer²å¼þ£¬ÓÃÓÚʵʱԤÀÀH5Ò³Ãæ£©¡£
2.»·¾³ÅäÖò½Ö裺Ê×ÏȰ²×°VSCode£¬´ò¿ªºóÔÚÀ©Õ¹É̵êËÑË÷“LiveServer”£¬µã»÷°²×°²¢ÆôÓã»ÈôÐèÒªºó¶Ë½»»¥£¬°²×°Node.js£¬°²×°Íê³Éºó°´ÏÂWin+R£¬ÊäÈëcmd£¬ÊäÈë“node-v”£¬ÈôÏÔʾ°æ±¾ºÅ£¬ËµÃ÷°²×°³É¹¦£»ÎÞÐè¶îÍâÅäÖø´ÔÓ»·¾³£¬H5µ¥»ú°æºËÐÄÒÀÀµÇ°¶Ë¼¼Êõ£¬»·¾³´î½¨Íê³Éºó¼´¿É¿ªÊ¼±à³Ì¡£
¶þ¡¢´«ÆæÊÀ½çH5µ¥»ú°æºËÐÄ´úÂëʾÀý£¨¿ÉÖ±½Ó¸´ÖÆÊ¹Óã©
´«ÆæÊÀ½çH5µ¥»ú°æ±à³ÌºËÐÄ·ÖΪ3²¿·Ö£ºÒ³Ãæ½á¹¹£¨HTML£©¡¢Ò³ÃæÑùʽ£¨CSS£©¡¢ºËÐĽ»»¥£¨JavaScript£©£¬µ¥»ú°æÎÞÐè¶Ô½ÓÔ¶³Ì·þÎñÆ÷£¬ËùÓÐÊý¾Ý´æ´¢ÔÚ±¾µØ£¬ÒÔÏ´úÂ븲¸Ç½ÇÉ«´´½¨¡¢ÊôÐÔչʾ¡¢¼òµ¥Òƶ¯¡¢¹ÖÎïˢеȺËÐŦÄÜ£¬ÌùºÏ´«ÆæÊÀ½ç¾µäÍæ·¨¡£
1.HTML´úÂë£¨Ò³Ãæ½á¹¹£¬´î½¨ÓÎÏ·»ù´¡½çÃæ£©£ºÓÃÓÚչʾ½ÇÉ«¡¢µØÍ¼¡¢¹ÖÎï¡¢ÊôÐÔÃæ°åµÈºËÐÄÔªËØ£¬´úÂëÈçÏ£º
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-widthinitial-scale=1.0">
<title>´«ÆæÊÀ½çH5µ¥»ú°æ</title>
<linkrel="stylesheet"href="css/style.css"><!--¹ØÁªCSSÑùʽÎļþ-->
</head>
<body>
<!--ÓÎÏ·µØÍ¼ÈÝÆ÷-->
<divclass="game-map"id="gameMap">
<!--½ÇÉ«ÔªËØ-->
<divclass="player"id="player"></div>
<!--¹ÖÎïÔªËØ£¨µ¥»ú°æÄ¬ÈÏË¢ÐÂ1Ö»£©-->
<divclass="monster"id="monster"></div>
</div>
<!--½ÇÉ«ÊôÐÔÃæ°å-->
<divclass="player-info">
<p>½ÇÉ«Ãû³Æ£º<spanid="playerName">´«ÊÀÓÂÊ¿</span></p>
<p>µÈ¼¶£º<spanid="playerLevel">1</span></p>
<p>ѪÁ¿£º<spanid="playerHp">100</span>/100</p>
<p>¹¥»÷£º<spanid="playerAtk">10</span></p>
</div>
<!--²Ù×÷°´Å¥-->
<divclass="control-btn">
<buttonid="moveUp">ÉÏÒÆ</button>
<buttonid="moveDown">ÏÂÒÆ</button>
<buttonid="moveLeft">×óÒÆ</button>
<buttonid="moveRight">ÓÒÒÆ</button>
<buttonid="attackMonster">¹¥»÷¹ÖÎï</button>
</div>
<scriptsrc="js/main.js"></script><!--¹ØÁªJavaScript½»»¥Îļþ-->
</body>
</html>
2.CSS´úÂë£¨Ò³ÃæÑùʽ£¬»¹Ô´«ÆæÊÀ½ç¾µä·ç¸ñ£©£ºÓÃÓÚÉèÖõØÍ¼¡¢½ÇÉ«¡¢¹ÖÎïµÄÑùʽ£¬ÌùºÏ´«ÆæÊÀ½ç¸´¹Å·ç¸ñ£¬´úÂëÈçÏ£¨Ð½¨cssÎļþ¼Ð£¬´´½¨style.cssÎļþ£¬¸´ÖÆÒÔÏ´úÂ룩£º
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:#000;
color:#fff;
font-family:"MicrosoftYaHei"sans-serif;
}
/*ÓÎÏ·µØÍ¼Ñùʽ*/
.game-map{
width:800px;
height:600px;
margin:20pxauto;
background-image:url("../images/map.jpg");/*¿ÉÌæ»»Îª´«ÆæÊÀ½çµØÍ¼ËزÄ*/
background-size:cover;
position:relative;
border:2pxsolid#ffd700;
}
/*½ÇÉ«Ñùʽ*/
.player{
width:40px;
height:40px;
background-image:url("../images/player.png");/*¿ÉÌæ»»Îª´«ÆæÊÀ½ç½ÇÉ«ËØ²Ä*/
background-size:cover;
position:absolute;
top:300px;
left:400px;
z-index:10;
}
/*¹ÖÎïÑùʽ*/
.monster{
width:40px;
height:40px;
background-image:url("../images/monster.png");/*¿ÉÌæ»»Îª´«ÆæÊÀ½ç¹ÖÎïËØ²Ä*/
background-size:cover;
position:absolute;
top:200px;
left:300px;
z-index:5;
}
/*½ÇÉ«ÊôÐÔÃæ°åÑùʽ*/
.player-info{
width:200px;
height:150px;
position:absolute;
top:30px;
left:30px;
background-color:rgba(0000.7);
border:1pxsolid#ffd700;
padding:10px;
line-height:25px;
}
/*²Ù×÷°´Å¥Ñùʽ*/
.control-btn{
width:800px;
margin:0auto;
text-align:center;
margin-top:20px;
}
.control-btnbutton{
width:80px;
height:40px;
margin:05px;
background-color:#8b0000;
color:#fff;
border:1pxsolid#ffd700;
cursor:pointer;
}
.control-btnbutton:hover{
background-color:#a52a2a;
}
3.JavaScript´úÂ루ºËÐĽ»»¥£¬ÊµÏÖÓÎÏ·Âß¼£©£ºÓÃÓÚʵÏÖ½ÇÉ«ÒÆ¶¯¡¢¹¥»÷¹ÖÎï¡¢ÊôÐԱ仯µÈºËÐŦÄÜ£¬µ¥»ú°æËùÓÐÊý¾Ý´æ´¢ÔÚ±¾µØ£¬ÎÞÐèºó¶Ë¶Ô½Ó£¬´úÂëÈçÏ£¨Ð½¨jsÎļþ¼Ð£¬´´½¨main.jsÎļþ£¬¸´ÖÆÒÔÏ´úÂ룩£º
//½ÇÉ«Êý¾Ý£¨µ¥»ú°æ±¾µØ´æ´¢£©
letplayerData={
name:"´«ÊÀÓÂÊ¿"
level:1
hp:100
maxHp:100
atk:10
x:400
y:300
};
//¹ÖÎïÊý¾Ý
letmonsterData={
name:"µ¾²ÝÈË"
hp:50
maxHp:50
atk:5
x:300
y:200
};
//»ñÈ¡DOMÔªËØ
constplayer=document.getElementById("player");
constmonster=document.getElementById("monster");
constplayerName=document.getElementById("playerName");
constplayerLevel=document.getElementById("playerLevel");
constplayerHp=document.getElementById("playerHp");
constplayerAtk=document.getElementById("playerAtk");
constmoveUp=document.getElementById("moveUp");
constmoveDown=document.getElementById("moveDown");
constmoveLeft=document.getElementById("moveLeft");
constmoveRight=document.getElementById("moveRight");
constattackMonster=document.getElementById("attackMonster");
constgameMap=document.getElementById("gameMap");
//¸üнÇÉ«ÐÅÏ¢ÏÔʾ
functionupdatePlayerInfo(){
playerName.innerText=playerData.name;
playerLevel.innerText=playerData.level;
playerHp.innerText=playerData.hp;
playerAtk.innerText=playerData.atk;
//¸üнÇɫλÖÃ
player.style.left=playerData.x+"px";
player.style.top=playerData.y+"px";
}
//¸üйÖÎïλÖÃ
functionupdateMonsterInfo(){
monster.style.left=monsterData.x+"px";
monster.style.top=monsterData.y+"px";
}
//½ÇÉ«ÒÆ¶¯Âß¼
moveUp.addEventListener("click"()=>{
if(playerData.y>0){
playerData.y-=20;
updatePlayerInfo();
}
});
moveDown.addEventListener("click"()=>{
if(playerData.y<gameMap.clientHeight-40){
playerData.y+=20;
updatePlayerInfo();
}
});
moveLeft.addEventListener("click"()=>{
if(playerData.x>0){
playerData.x-=20;
updatePlayerInfo();
}
});
moveRight.addEventListener("click"()=>{
if(playerData.x<gameMap.clientWidth-40){
playerData.x+=20;
updatePlayerInfo();
}
});
//¹¥»÷¹ÖÎïÂß¼
attackMonster.addEventListener("click"()=>{
if(monsterData.hp>0){
//½ÇÉ«¹¥»÷¹ÖÎï
monsterData.hp-=playerData.atk;
if(monsterData.hp<0)monsterData.hp=0;
//¹ÖÎï·´»÷£¨ÑªÁ¿>0ʱ£©
if(monsterData.hp>0){
playerData.hp-=monsterData.atk;
if(playerData.hp<0)playerData.hp=0;
}else{
//¹ÖÎïËÀÍö£¬½ÇÉ«Éý¼¶
alert("»÷ɱ"+monsterData.name+"£¬»ñµÃ¾Ñ飬µÈ¼¶ÌáÉý£¡");
playerData.level+=1;
playerData.maxHp+=20;
playerData.hp=playerData.maxHp;
playerData.atk+=5;
//ˢйÖÎï
monsterData.hp=monsterData.maxHp;
monsterData.x=Math.floor(Math.random()*(gameMap.clientWidth-40));
monsterData.y=Math.floor(Math.random()*(gameMap.clientHeight-40));
}
updatePlayerInfo();
updateMonsterInfo();
}else{
alert("¹ÖÎïÒÑËÀÍö£¬ÇëµÈ´ýˢУ¡");
}
});
//³õʼ»¯ÓÎÏ·
window.onload=()=>{
updatePlayerInfo();
updateMonsterInfo();
};
²¹³ä˵Ã÷£ºÒÔÉÏ´úÂë¿ÉÖ±½Ó¸´ÖÆÊ¹Óã¬Ö»Ðèн¨¶ÔÓ¦Îļþ¼Ð£¨css¡¢js¡¢images£©£¬½«µØÍ¼¡¢½ÇÉ«¡¢¹ÖÎïËØ²Ä·ÅÈëimagesÎļþ¼Ð£¨¿É´Ó´«ÆæÊÀ½ç¹Ù·½ËزÄÖÐÌáÈ¡£¬»òʹÓÃͬÀิ¹ÅËØ²Ä£©£¬ÓÃVSCode´ò¿ªHTMLÎļþ£¬µã»÷ÓÒϽǓGoLive”£¬¼´¿ÉÔÚä¯ÀÀÆ÷ÖÐÔ¤ÀÀÔËÐУ¬ÊµÏÖ½ÇÉ«ÒÆ¶¯¡¢¹¥»÷¡¢Éý¼¶¡¢¹ÖÎïˢеȺËÐŦÄÜ£¬µ¥»ú°æÎÞÐè¶îÍâÅäÖúó¶Ë¡£
ÈôÐèÒª¼òµ¥ºó¶Ë½»»¥£¨Èç±£´æ½ÇÉ«Êý¾Ý£¬¹Ø±Õä¯ÀÀÆ÷ºóÖØÐ´ò¿ªÈÔ±£Áô½ø¶È£©£¬¿ÉʹÓÃNode.js´îÅäExpress¿ò¼Ü£¬ºËÐĺó¶Ë´úÂëʾÀýÈçÏ£¨Ð½¨server.jsÎļþ£¬°²×°expressºóÔËÐУ©£º
//°²×°ÒÀÀµ£ºcmdÖÐÊäÈënpminstallexpresscors
constexpress=require("express");
constcors=require("cors");
constapp=express();
app.use(cors());
app.use(express.json());
//±¾µØ´æ´¢½ÇÉ«Êý¾Ý£¨µ¥»ú°æÎÞÐèÊý¾Ý¿â£©
letsavePlayerData=null;
//±£´æ½ÇÉ«Êý¾Ý½Ó¿Ú
app.post("/savePlayer"(reqres)=>{
savePlayerData=req.body;
res.send({code:200msg:"½ÇÉ«Êý¾Ý±£´æ³É¹¦"});
});
//»ñÈ¡½ÇÉ«Êý¾Ý½Ó¿Ú
app.get("/getPlayer"(reqres)=>{
res.send({code:200data:savePlayerData||playerData});
});
//Æô¶¯·þÎñÆ÷
app.listen(3000()=>{
console.log("·þÎñÆ÷Æô¶¯³É¹¦£¬¶Ë¿Ú3000");
});
È»ºóÐÞ¸Ämain.jsÖеijõʼ»¯ºÍ±£´æÂß¼£¬Ìí¼Ó½Ó¿ÚÇëÇ󣬼´¿ÉʵÏÖ½ÇÉ«Êý¾Ý±¾µØ±£´æ£¬¾ßÌåÐ޸Ŀɸù¾ÝÐèÇóµ÷Õû£¬µ¥»ú°æ¿ÉÊ¡ÂԴ˲½Ö裬½ö±£Áôǰ¶ËºËÐÄ´úÂë¼´¿É¡£
Èý¡¢´«ÆæÊÀ½ç´«Í³µ¥»ú°æ±à³Ì£¨ÒýÇæ½Å±¾¿ª·¢£¬ÎÞÐèǰ¶Ë£©
´«ÆæÊÀ½ç´«Í³µ¥»ú°æ±à³ÌºËÐÄÊÇÒýÇæ½Å±¾¿ª·¢£¬ÒÀÀµÓÎÏ·ÒýÇæ£¨Èçcocos2dx-Lua¡¢GOMÒýÇæ£©£¬ÎÞÐè±àдǰ¶Ë´úÂë£¬ÖØµãÊÇͨ¹ý½Å±¾ÅäÖÃÓÎÏ·Âß¼¡¢½ÇÉ«¡¢µØÍ¼¡¢NPC¡¢¼¼Äܵȣ¬ÒÔϽ²½âºËÐıà³Ì²½ÖèºÍ½Å±¾´úÂëʾÀý£¬ÊÊÅäÖ÷Á÷µ¥»ú°æÒýÇæ¡£
1.¿ª·¢»·¾³´î½¨£ºÏÂÔØ°²×°¶ÔÓ¦ÓÎÏ·ÒýÇæ£¨ÒÔcocos2dx-LuaΪÀý£©¡¢½Å±¾±à¼Æ÷£¨VSCode¡¢Notepad++¾ù¿É£©¡¢ÒýÇæÅäÌ×¹¤¾ß£¨ÈçµØÍ¼±à¼Æ÷¡¢½ÇÉ«±à¼Æ÷£©£¬°²×°Íê³Éºó£¬´ò¿ªÒýÇæ£¬Ð½¨´«ÆæÊÀ½çµ¥»ú°æÏîÄ¿£¬Ñ¡Ôñ“µ¥»úģʽ”£¬ÎÞÐèÅäÖ÷þÎñÆ÷£¬Ö±½Ó½øÈë½Å±¾¿ª·¢»·½Ú¡£
2.ºËÐĽű¾´úÂëʾÀý£¨QM½Å±¾£¬½ÇÉ«´´½¨ÓëÊôÐÔÅäÖã©£º´«ÆæÊÀ½ç´«Í³µ¥»ú°æºËÐĽű¾ÎªQM½Å±¾£¬ÓÃÓÚÅäÖýÇÉ«³õʼ»¯¡¢NPC¶Ô»°¡¢ÈÎÎñ´¥·¢µÈÂß¼£¬´úÂë¿ÉÖ±½Ó¸´ÖƵ½ÒýÇæ½Å±¾Îļþ¼Ð£¨Envir\QuestDiary£©ÖУ¬ÃüÃûΪ“InitPlayer.qm”£¬ÖØÆôÒýÇæ¼´¿ÉÉúЧ£º
[@Login];Íæ¼ÒµÇ¼´¥·¢
#IF
CHECKLEVELEX=1;ÅжÏÍæ¼ÒµÈ¼¶Îª1£¨¸Õ´´½¨½ÇÉ«£©
#ACT
SETPLAYERLEVEL1;ÉèÖÃÍæ¼ÒµÈ¼¶Îª1
SETPLAYERHP100100;ÉèÖÃÍæ¼ÒѪÁ¿Îª100/100
SETPLAYERMP5050;ÉèÖÃÍæ¼Òħ·¨ÖµÎª50/50
SETPLAYERATK1015;ÉèÖÃÍæ¼Ò¹¥»÷Ϊ10-15
SETPLAYERDEF58;ÉèÖÃÍæ¼Ò·ÀÓùΪ5-8
GIVEľ½£1;¸øÍæ¼Ò·¢·Å³õʼÎäÆ÷£¨Ä¾½££©
GIVE²¼ÒÂ1;¸øÍæ¼Ò·¢·Å³õʼװ±¸£¨²¼Ò£©
MAPMOVE0300300;ÒÆ¶¯Íæ¼Òµ½ÐÂÊÖµØÍ¼£¨µØÍ¼ID0£¬×ø±ê300300£©
SENDMSG6»¶ÓÀ´µ½´«ÆæÊÀ½çµ¥»ú°æ£¬×£ÄúÓÎÏ·Óä¿ì£¡;·¢ËÍϵͳÌáʾ
3.¹ÖÎïˢнű¾´úÂëʾÀý£¨QF½Å±¾£¬¿ØÖƹÖÎïË¢ÐÂÆµÂʺÍÊýÁ¿£©£ºQF½Å±¾ÓÃÓÚÅäÖùÖÎïˢС¢µôÂäµÈºËÐÄÂß¼£¬Ð½¨“MonsterRefresh.qf”Îļþ£¬¸´ÖÆÒÔÏ´úÂ룬·ÅÈëÒýÇæ½Å±¾Îļþ¼Ð£¬ÊÊÅäËùÓÐÖ÷Á÷µ¥»ú°æÒýÇæ£º
[@MonsterDie];¹ÖÎïËÀÍö´¥·¢
#IF
CHECKMONSTERNAMEµ¾²ÝÈË;ÅжÏËÀÍö¹ÖÎïΪµ¾²ÝÈË
#ACT
RANDOM3;1/3¸ÅÂʵôÂäÎïÆ·
GIVE½ð±Ò100;µôÂä100½ð±Ò
RANDOM5
GIVEСҩˮ1;1/5¸ÅÂʵôÂäСҩˮ
[@RefreshMonster];¹ÖÎïˢд¥·¢£¨Ã¿60ÃëË¢ÐÂÒ»´Î£©
#IF
TRUE;ÎÞÌõ¼þ´¥·¢
#ACT
MAPMONSTER0µ¾²ÝÈË300200160;ÔÚµØÍ¼0£¬×ø±ê300200£¬Ã¿60ÃëË¢ÐÂ1Ö»µ¾²ÝÈË
MAPMONSTER0µ¾²ÝÈË400250160;ÔÚµØÍ¼0£¬×ø±ê400250£¬Ã¿60ÃëË¢ÐÂ1Ö»µ¾²ÝÈË
MAPMONSTER0÷¼÷Ã5003001120;ÔÚµØÍ¼0£¬×ø±ê500300£¬Ã¿120ÃëË¢ÐÂ1Ö»÷¼÷Ã
4.µØÍ¼ÅäÖñà³Ì£¨¼òµ¥Ò×¶®£¬ÐÂÊÖ¿ÉÉÏÊÖ£©£º´«ÆæÊÀ½ç´«Í³µ¥»ú°æµØÍ¼ÅäÖÃÎÞÐè±àд¸´ÔÓ´úÂ룬ͨ¹ýÒýÇæ×Ô´øµÄµØÍ¼±à¼Æ÷¼´¿ÉÍê³É£¬²½ÖèÈçÏ£º´ò¿ªÒýÇæµØÍ¼±à¼Æ÷£¬µ¼Èë´«ÆæÊÀ½çµØÍ¼Ëزģ¨.map¸ñʽ£©£¬ÉèÖõØÍ¼ID£¨ÈçÐÂÊÖµØÍ¼IDΪ0£©£¬Ìí¼ÓµØÍ¼ÕϰÎï¡¢³öÉúµã¡¢¹ÖÎïˢе㣬±£´æµØÍ¼Îļþ£¬·ÅÈëÒýÇæMapÎļþ¼Ð£¬È»ºóÔڽű¾ÖÐÅäÖõØÍ¼Òƶ¯Âß¼£¨ÈçÉÏÊö½ÇÉ«µÇ¼ºóÒÆ¶¯µ½ÐÂÊÖµØÍ¼£©£¬¼´¿ÉÍê³ÉµØÍ¼±à³Ì¡£
ËÄ¡¢´«ÆæÊÀ½çµ¥»ú°æ±à³ÌÍêÕû²½Ö裨ͨÓð棬ÊÊÅäH5ºÍ´«Í³°æ£©
ÎÞÂÛÑ¡ÔñH5µ¥»ú°æ»¹ÊÇ´«Í³µ¥»ú°æ£¬±à³ÌÁ÷³Ì¾ù¿É·ÖΪ4²½£¬²½ÖèÇåÎú£¬ÎÞÐèרҵ±à³Ì»ù´¡£¬ÐÂÊֿɰ´Ë³Ðò²Ù×÷£¬±ÜÃâ×ßÍä·£º
1.Ã÷È·ÐèÇó£ºÈ·¶¨±à³Ì·½Ïò£¨H5°æ»ò´«Í³°æ£©£¬Ã÷È·ºËÐŦÄÜ£¨Èç½ÇÉ«ÒÆ¶¯¡¢¹¥»÷¡¢¹ÖÎïˢС¢ÊôÐÔÉý¼¶µÈ£©£¬ÎÞÐèÌí¼Ó¸´ÔÓ¹¦ÄÜ£¬ÏÈÍê³É»ù´¡ºËÐÄÂß¼£¬ÔÙÖð²½À©Õ¹¡£
2.´î½¨»·¾³£º¸ù¾ÝÑ¡ÔñµÄ°æ±¾£¬´î½¨¶ÔÓ¦¿ª·¢»·¾³£¨H5°æ°²×°VSCode¡¢Node.js£»´«Í³°æ°²×°ÓÎÏ·ÒýÇæ¡¢½Å±¾±à¼Æ÷£©£¬»·¾³´î½¨Íê³Éºó£¬²âÊÔÊÇ·ñÄÜÕý³£ÔËÐУ¨H5°æÆô¶¯LiveServerÔ¤ÀÀ£¬´«Í³°æÆô¶¯ÒýÇæ²âÊÔ£©¡£
3.±àд´úÂ룺°´ºËÐŦÄܲð·Ö´úÂ룬Öð²½±àд£¨H5°æÏÈдHTMLÒ³Ãæ½á¹¹£¬ÔÙдCSSÑùʽ£¬×îºóдJavaScript½»»¥£»´«Í³°æÖ±½Ó±àдQM¡¢QF½Å±¾£¬ÅäÖýÇÉ«¡¢¹ÖÎï¡¢µØÍ¼£©£¬Ã¿±àдһ¶Î´úÂ룬¼°Ê±²âÊÔ£¬±ÜÃâºóÆÚ´óÃæ»ý±¨´í¡£
4.µ÷ÊÔÓÅ»¯£º²âÊÔ´úÂëÔËÐÐЧ¹û£¬ÅŲ鱨´í£¨ÈçH5°æ½ÇÉ«ÎÞ·¨Òƶ¯¡¢¹ÖÎﲻˢУ»´«Í³°æ½Å±¾²»ÉúЧ¡¢½ÇÉ«ÊôÐÔÒì³££©£¬µ÷ÊÔÍê³Éºó£¬¿É¸ù¾ÝÐèÇóÀ©Õ¹¹¦ÄÜ£¨ÈçH5°æÌí¼Ó¼¼ÄÜϵͳ£¬´«Í³°æÌí¼ÓNPCÈÎÎñ¡¢×°±¸µôÂ䣩¡£
Îå¡¢³£¼û±à³Ì±¨´í¼°½â¾ö·½·¨£¨ÐÂÊֱؿ´£©
1.H5µ¥»ú°æ±¨´í£ºÒ³ÃæÎÞ·¨Ô¤ÀÀ£¬Ìáʾ“ÕÒ²»µ½Îļþ”£¬½â¾ö·½·¨£º¼ì²éÎļþ¼Ð·¾¶ÊÇ·ñÕýÈ·£¬È·±£HTMLÎļþ¹ØÁªµÄCSS¡¢JavaScriptÎļþ·¾¶ÎÞÎó£¬imagesÎļþ¼ÐÖзÅÈë¶ÔÓ¦ËØ²Ä£¬ÖØÐÂÆô¶¯LiveServer¡£
2.H5µ¥»ú°æ±¨´í£º½ÇÉ«ÎÞ·¨Òƶ¯¡¢¹¥»÷ÎÞ·´Ó¦£¬½â¾ö·½·¨£º¼ì²éJavaScript´úÂ룬ȷÈÏDOMÔªËØ»ñÈ¡ÕýÈ·£¬Ê¼þ°ó¶¨ÎÞÎ󣬽ÇÉ«¡¢¹ÖÎïÊý¾ÝÅäÖÃÕýÈ·£¬¿ØÖÆÌ¨£¨F12£©²é¿´±¨´íÐÅÏ¢£¬Õë¶ÔÐÔÐ޸ĴúÂë¡£
3.´«Í³µ¥»ú°æ±¨´í£º½Å±¾²»ÉúЧ£¬ÖØÆôÒýÇæÎÞ·´Ó¦£¬½â¾ö·½·¨£º¼ì²é½Å±¾ÎļþÃûÊÇ·ñÕýÈ·£¨ÈçQM½Å±¾ºó׺Ϊ.qm£¬QF½Å±¾ºó׺Ϊ.qf£©£¬½Å±¾·ÅÈë¶ÔÓ¦Îļþ¼Ð£¨Envir\QuestDiary£©£¬½Å±¾Óï·¨ÎÞÎó£¨Èç#IF¡¢#ACT¶ÔÆë£¬ÃüÁîÆ´Ð´ÕýÈ·£©¡£
4.´«Í³µ¥»ú°æ±¨´í£º¹ÖÎﲻˢС¢µôÂäÒì³££¬½â¾ö·½·¨£º¼ì²éQF½Å±¾ÖеĹÖÎïË¢ÐÂÃüÁMAPMONSTER£©£¬È·ÈϵØÍ¼ID¡¢×ø±êÕýÈ·£¬Ë¢ÐÂʱ¼äÅäÖúÏÀí£¬µôÂäÂß¼ÖеÄRANDOM¸ÅÂÊÉèÖÃÎÞÎó¡£
5.ͨÓñ¨´í£º´úÂë¸´ÖÆºóÎÞ·¨ÔËÐУ¬½â¾ö·½·¨£º¼ì²é´úÂë¸ñʽ£¬É¾³ý¶àÓà¿Õ¸ñ¡¢»»ÐУ¬È·±£·ûºÅÕýÈ·£¨ÈçJavaScriptÖеÄÀ¨ºÅ¡¢·ÖºÅ£¬QM½Å±¾ÖеĿոñ¶ÔÆë£©£¬±ÜÃâ¸´ÖÆÊ±ÒÅ©´úÂëÆ¬¶Î¡£
Áù¡¢²¹³ä˵Ã÷
´«ÆæÊÀ½çµ¥»ú°æ±à³ÌÎÞÐ踴ÔÓ±à³Ì»ù´¡£¬H5°æÖصãÕÆÎÕHTML¡¢CSS¡¢JavaScript»ù´¡£¬´«Í³°æÖصãÕÆÎÕQM¡¢QF½Å±¾ÃüÁËùÓдúÂë¿ÉÖ±½Ó¸´ÖƲâÊÔ£¬ºóÆÚ¿É¸ù¾ÝÐèÇóÀ©Õ¹¹¦ÄÜ¡£±à³Ì¹ý³ÌÖУ¬¿É²Î¿¼´«ÆæÊÀ½ç¹Ù·½Íæ·¨Âß¼£¬»¹Ô¾µäÔªËØ£¨Èç½Çɫְҵ¡¢¼¼ÄÜ¡¢×°±¸¡¢µØÍ¼£©£¬ÌáÉýÓÎÏ·ÌåÑé¡£
ÁíÍ⣬H5µ¥»ú°æ¿Éͨ¹ýä¯ÀÀÆ÷Ö±½Ó´ò°ü£¬Éú³É¿É±¾µØÔËÐеÄHTMLÎļþ£¬ÎÞÐè°²×°ÈκÎÈí¼þ¼´¿ÉÆô¶¯£»´«Í³µ¥»ú°æ±à³ÌÍê³Éºó£¬´ò°üÒýÇæÎļþ£¬¼´¿ÉÉú³É¶ÀÁ¢µÄµ¥»ú°æ¿Í»§¶Ë£¬Ë«»÷¼´¿ÉÔËÐУ¬ÎÞÐèÅäÖöîÍâ»·¾³¡£
×ܽ᣺´«ÆæÊÀ½çH5µ¥»ú°æ±à³Ì²àÖØÇ°¶Ë½»»¥£¬ºËÐÄÊÇHTML¡¢CSS¡¢JavaScript´úÂ룻´«Í³µ¥»ú°æ±à³Ì²àÖØÒýÇæ½Å±¾£¬ºËÐÄÊÇQM¡¢QF½Å±¾ÅäÖᣰ´ÉÏÊö»·¾³´î½¨¡¢´úÂëʾÀý¡¢±à³Ì²½Öè²Ù×÷£¬ÐÂÊÖ¿É¿ìËÙÉÏÊÖ£¬ËùÓдúÂë¿ÉÖ±½Ó¸´ÖÆÊ¹Óã¬ÅŲ鱨´íʱ¶ÔÕÕ³£¼ûÎÊÌ⣬¼´¿É˳ÀûÍê³Éµ¥»ú°æ±à³Ì£¬ÊµÏÖºËÐÄÓÎÏ·Âß¼¡£
ÏÈÃ÷È·ºËÐÄÇø±ð£º´«ÆæÊÀ½çH5µ¥»ú°æ»ùÓÚHTML5¼¼Êõ¿ª·¢£¬ÎÞÐè°²×°¿Í»§¶Ë£¬Í¨¹ýä¯ÀÀÆ÷¼´¿ÉÔËÐУ¬±à³ÌÒÀÀµHTML¡¢CSS¡¢JavaScript£¬´îÅäNode.js»òPHP×ö¼òµ¥ºó¶Ë½»»¥£¨µ¥»ú°æ¿ÉÊ¡ÂÔ¸´ÔÓºó¶Ë£¬½ö±£Áô±¾µØÊý¾Ý½»»¥£©£»´«Í³´«ÆæÊÀ½çµ¥»ú°æÒÀÀµÓÎÏ·ÒýÇæ£¨ÈçGOM¡¢GEE¡¢cocos2dx-Lua£©£¬±à³ÌÒÔÒýÇæ½Å±¾£¨QM¡¢QF½Å±¾£©¡¢Lua¡¢C++ΪÖ÷£¬ºËÐÄÊÇÅäÖÃÓÎÏ·Âß¼¡¢½ÇÉ«¡¢µØÍ¼µÈÊý¾Ý£¬ÎÞÐ踴ÔÓǰ¶Ë¿ª·¢¡£
ÎÞÂÛÊÇH5µ¥»ú°æ»¹ÊÇ´«Í³µ¥»ú°æ£¬±à³ÌǰÐè×¼±¸¶ÔÓ¦¿ª·¢»·¾³£¬»·¾³´î½¨ÊDZà³ÌµÄ»ù´¡£¬È±ÉÙ¶ÔÓ¦»·¾³»áµ¼Ö´úÂëÎÞ·¨ÔËÐС¢µ÷ÊÔʧ°Ü£¬ÒÔÏ·ֱð˵Ã÷Á½ÖÖ°æ±¾µÄ¿ª·¢»·¾³´î½¨²½Ö裬ֱ±¼Ö÷Ì⣬²»Ìí¼Ó¶àÓàÐÞÊΡ£
Ò»¡¢´«ÆæÊÀ½çH5µ¥»ú°æ¿ª·¢»·¾³´î½¨£¨±à³ÌǰÌᣩ
1.ºËÐŤ¾ß×¼±¸£ºÏÂÔØ°²×°VSCode£¨´úÂë±à¼¹¤¾ß£¬ÊÊÅäËùÓÐH5¿ª·¢ÓïÑÔ£©¡¢Node.js£¨ÓÃÓÚ¼òµ¥ºó¶Ë½»»¥£¬µ¥»ú°æ¿ÉÑ¡£¬Èô½ö×öǰ¶ËÑÝʾ¿ÉÊ¡ÂÔ£©¡¢ä¯ÀÀÆ÷£¨Chrome¡¢Edge¾ù¿É£¬ÓÃÓÚ²âÊÔ´úÂëÔËÐÐЧ¹û£©¡¢±¾µØ·þÎñÆ÷²å¼þ£¨VSCode×Ô´øµÄLiveServer²å¼þ£¬ÓÃÓÚʵʱԤÀÀH5Ò³Ãæ£©¡£
2.»·¾³ÅäÖò½Ö裺Ê×ÏȰ²×°VSCode£¬´ò¿ªºóÔÚÀ©Õ¹É̵êËÑË÷“LiveServer”£¬µã»÷°²×°²¢ÆôÓã»ÈôÐèÒªºó¶Ë½»»¥£¬°²×°Node.js£¬°²×°Íê³Éºó°´ÏÂWin+R£¬ÊäÈëcmd£¬ÊäÈë“node-v”£¬ÈôÏÔʾ°æ±¾ºÅ£¬ËµÃ÷°²×°³É¹¦£»ÎÞÐè¶îÍâÅäÖø´ÔÓ»·¾³£¬H5µ¥»ú°æºËÐÄÒÀÀµÇ°¶Ë¼¼Êõ£¬»·¾³´î½¨Íê³Éºó¼´¿É¿ªÊ¼±à³Ì¡£
¶þ¡¢´«ÆæÊÀ½çH5µ¥»ú°æºËÐÄ´úÂëʾÀý£¨¿ÉÖ±½Ó¸´ÖÆÊ¹Óã©
´«ÆæÊÀ½çH5µ¥»ú°æ±à³ÌºËÐÄ·ÖΪ3²¿·Ö£ºÒ³Ãæ½á¹¹£¨HTML£©¡¢Ò³ÃæÑùʽ£¨CSS£©¡¢ºËÐĽ»»¥£¨JavaScript£©£¬µ¥»ú°æÎÞÐè¶Ô½ÓÔ¶³Ì·þÎñÆ÷£¬ËùÓÐÊý¾Ý´æ´¢ÔÚ±¾µØ£¬ÒÔÏ´úÂ븲¸Ç½ÇÉ«´´½¨¡¢ÊôÐÔչʾ¡¢¼òµ¥Òƶ¯¡¢¹ÖÎïˢеȺËÐŦÄÜ£¬ÌùºÏ´«ÆæÊÀ½ç¾µäÍæ·¨¡£
1.HTML´úÂë£¨Ò³Ãæ½á¹¹£¬´î½¨ÓÎÏ·»ù´¡½çÃæ£©£ºÓÃÓÚչʾ½ÇÉ«¡¢µØÍ¼¡¢¹ÖÎï¡¢ÊôÐÔÃæ°åµÈºËÐÄÔªËØ£¬´úÂëÈçÏ£º
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-widthinitial-scale=1.0">
<title>´«ÆæÊÀ½çH5µ¥»ú°æ</title>
<linkrel="stylesheet"href="css/style.css"><!--¹ØÁªCSSÑùʽÎļþ-->
</head>
<body>
<!--ÓÎÏ·µØÍ¼ÈÝÆ÷-->
<divclass="game-map"id="gameMap">
<!--½ÇÉ«ÔªËØ-->
<divclass="player"id="player"></div>
<!--¹ÖÎïÔªËØ£¨µ¥»ú°æÄ¬ÈÏË¢ÐÂ1Ö»£©-->
<divclass="monster"id="monster"></div>
</div>
<!--½ÇÉ«ÊôÐÔÃæ°å-->
<divclass="player-info">
<p>½ÇÉ«Ãû³Æ£º<spanid="playerName">´«ÊÀÓÂÊ¿</span></p>
<p>µÈ¼¶£º<spanid="playerLevel">1</span></p>
<p>ѪÁ¿£º<spanid="playerHp">100</span>/100</p>
<p>¹¥»÷£º<spanid="playerAtk">10</span></p>
</div>
<!--²Ù×÷°´Å¥-->
<divclass="control-btn">
<buttonid="moveUp">ÉÏÒÆ</button>
<buttonid="moveDown">ÏÂÒÆ</button>
<buttonid="moveLeft">×óÒÆ</button>
<buttonid="moveRight">ÓÒÒÆ</button>
<buttonid="attackMonster">¹¥»÷¹ÖÎï</button>
</div>
<scriptsrc="js/main.js"></script><!--¹ØÁªJavaScript½»»¥Îļþ-->
</body>
</html>
2.CSS´úÂë£¨Ò³ÃæÑùʽ£¬»¹Ô´«ÆæÊÀ½ç¾µä·ç¸ñ£©£ºÓÃÓÚÉèÖõØÍ¼¡¢½ÇÉ«¡¢¹ÖÎïµÄÑùʽ£¬ÌùºÏ´«ÆæÊÀ½ç¸´¹Å·ç¸ñ£¬´úÂëÈçÏ£¨Ð½¨cssÎļþ¼Ð£¬´´½¨style.cssÎļþ£¬¸´ÖÆÒÔÏ´úÂ룩£º
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color:#000;
color:#fff;
font-family:"MicrosoftYaHei"sans-serif;
}
/*ÓÎÏ·µØÍ¼Ñùʽ*/
.game-map{
width:800px;
height:600px;
margin:20pxauto;
background-image:url("../images/map.jpg");/*¿ÉÌæ»»Îª´«ÆæÊÀ½çµØÍ¼ËزÄ*/
background-size:cover;
position:relative;
border:2pxsolid#ffd700;
}
/*½ÇÉ«Ñùʽ*/
.player{
width:40px;
height:40px;
background-image:url("../images/player.png");/*¿ÉÌæ»»Îª´«ÆæÊÀ½ç½ÇÉ«ËØ²Ä*/
background-size:cover;
position:absolute;
top:300px;
left:400px;
z-index:10;
}
/*¹ÖÎïÑùʽ*/
.monster{
width:40px;
height:40px;
background-image:url("../images/monster.png");/*¿ÉÌæ»»Îª´«ÆæÊÀ½ç¹ÖÎïËØ²Ä*/
background-size:cover;
position:absolute;
top:200px;
left:300px;
z-index:5;
}
/*½ÇÉ«ÊôÐÔÃæ°åÑùʽ*/
.player-info{
width:200px;
height:150px;
position:absolute;
top:30px;
left:30px;
background-color:rgba(0000.7);
border:1pxsolid#ffd700;
padding:10px;
line-height:25px;
}
/*²Ù×÷°´Å¥Ñùʽ*/
.control-btn{
width:800px;
margin:0auto;
text-align:center;
margin-top:20px;
}
.control-btnbutton{
width:80px;
height:40px;
margin:05px;
background-color:#8b0000;
color:#fff;
border:1pxsolid#ffd700;
cursor:pointer;
}
.control-btnbutton:hover{
background-color:#a52a2a;
}
3.JavaScript´úÂ루ºËÐĽ»»¥£¬ÊµÏÖÓÎÏ·Âß¼£©£ºÓÃÓÚʵÏÖ½ÇÉ«ÒÆ¶¯¡¢¹¥»÷¹ÖÎï¡¢ÊôÐԱ仯µÈºËÐŦÄÜ£¬µ¥»ú°æËùÓÐÊý¾Ý´æ´¢ÔÚ±¾µØ£¬ÎÞÐèºó¶Ë¶Ô½Ó£¬´úÂëÈçÏ£¨Ð½¨jsÎļþ¼Ð£¬´´½¨main.jsÎļþ£¬¸´ÖÆÒÔÏ´úÂ룩£º
//½ÇÉ«Êý¾Ý£¨µ¥»ú°æ±¾µØ´æ´¢£©
letplayerData={
name:"´«ÊÀÓÂÊ¿"
level:1
hp:100
maxHp:100
atk:10
x:400
y:300
};
//¹ÖÎïÊý¾Ý
letmonsterData={
name:"µ¾²ÝÈË"
hp:50
maxHp:50
atk:5
x:300
y:200
};
//»ñÈ¡DOMÔªËØ
constplayer=document.getElementById("player");
constmonster=document.getElementById("monster");
constplayerName=document.getElementById("playerName");
constplayerLevel=document.getElementById("playerLevel");
constplayerHp=document.getElementById("playerHp");
constplayerAtk=document.getElementById("playerAtk");
constmoveUp=document.getElementById("moveUp");
constmoveDown=document.getElementById("moveDown");
constmoveLeft=document.getElementById("moveLeft");
constmoveRight=document.getElementById("moveRight");
constattackMonster=document.getElementById("attackMonster");
constgameMap=document.getElementById("gameMap");
//¸üнÇÉ«ÐÅÏ¢ÏÔʾ
functionupdatePlayerInfo(){
playerName.innerText=playerData.name;
playerLevel.innerText=playerData.level;
playerHp.innerText=playerData.hp;
playerAtk.innerText=playerData.atk;
//¸üнÇɫλÖÃ
player.style.left=playerData.x+"px";
player.style.top=playerData.y+"px";
}
//¸üйÖÎïλÖÃ
functionupdateMonsterInfo(){
monster.style.left=monsterData.x+"px";
monster.style.top=monsterData.y+"px";
}
//½ÇÉ«ÒÆ¶¯Âß¼
moveUp.addEventListener("click"()=>{
if(playerData.y>0){
playerData.y-=20;
updatePlayerInfo();
}
});
moveDown.addEventListener("click"()=>{
if(playerData.y<gameMap.clientHeight-40){
playerData.y+=20;
updatePlayerInfo();
}
});
moveLeft.addEventListener("click"()=>{
if(playerData.x>0){
playerData.x-=20;
updatePlayerInfo();
}
});
moveRight.addEventListener("click"()=>{
if(playerData.x<gameMap.clientWidth-40){
playerData.x+=20;
updatePlayerInfo();
}
});
//¹¥»÷¹ÖÎïÂß¼
attackMonster.addEventListener("click"()=>{
if(monsterData.hp>0){
//½ÇÉ«¹¥»÷¹ÖÎï
monsterData.hp-=playerData.atk;
if(monsterData.hp<0)monsterData.hp=0;
//¹ÖÎï·´»÷£¨ÑªÁ¿>0ʱ£©
if(monsterData.hp>0){
playerData.hp-=monsterData.atk;
if(playerData.hp<0)playerData.hp=0;
}else{
//¹ÖÎïËÀÍö£¬½ÇÉ«Éý¼¶
alert("»÷ɱ"+monsterData.name+"£¬»ñµÃ¾Ñ飬µÈ¼¶ÌáÉý£¡");
playerData.level+=1;
playerData.maxHp+=20;
playerData.hp=playerData.maxHp;
playerData.atk+=5;
//ˢйÖÎï
monsterData.hp=monsterData.maxHp;
monsterData.x=Math.floor(Math.random()*(gameMap.clientWidth-40));
monsterData.y=Math.floor(Math.random()*(gameMap.clientHeight-40));
}
updatePlayerInfo();
updateMonsterInfo();
}else{
alert("¹ÖÎïÒÑËÀÍö£¬ÇëµÈ´ýˢУ¡");
}
});
//³õʼ»¯ÓÎÏ·
window.onload=()=>{
updatePlayerInfo();
updateMonsterInfo();
};
²¹³ä˵Ã÷£ºÒÔÉÏ´úÂë¿ÉÖ±½Ó¸´ÖÆÊ¹Óã¬Ö»Ðèн¨¶ÔÓ¦Îļþ¼Ð£¨css¡¢js¡¢images£©£¬½«µØÍ¼¡¢½ÇÉ«¡¢¹ÖÎïËØ²Ä·ÅÈëimagesÎļþ¼Ð£¨¿É´Ó´«ÆæÊÀ½ç¹Ù·½ËزÄÖÐÌáÈ¡£¬»òʹÓÃͬÀิ¹ÅËØ²Ä£©£¬ÓÃVSCode´ò¿ªHTMLÎļþ£¬µã»÷ÓÒϽǓGoLive”£¬¼´¿ÉÔÚä¯ÀÀÆ÷ÖÐÔ¤ÀÀÔËÐУ¬ÊµÏÖ½ÇÉ«ÒÆ¶¯¡¢¹¥»÷¡¢Éý¼¶¡¢¹ÖÎïˢеȺËÐŦÄÜ£¬µ¥»ú°æÎÞÐè¶îÍâÅäÖúó¶Ë¡£
ÈôÐèÒª¼òµ¥ºó¶Ë½»»¥£¨Èç±£´æ½ÇÉ«Êý¾Ý£¬¹Ø±Õä¯ÀÀÆ÷ºóÖØÐ´ò¿ªÈÔ±£Áô½ø¶È£©£¬¿ÉʹÓÃNode.js´îÅäExpress¿ò¼Ü£¬ºËÐĺó¶Ë´úÂëʾÀýÈçÏ£¨Ð½¨server.jsÎļþ£¬°²×°expressºóÔËÐУ©£º
//°²×°ÒÀÀµ£ºcmdÖÐÊäÈënpminstallexpresscors
constexpress=require("express");
constcors=require("cors");
constapp=express();
app.use(cors());
app.use(express.json());
//±¾µØ´æ´¢½ÇÉ«Êý¾Ý£¨µ¥»ú°æÎÞÐèÊý¾Ý¿â£©
letsavePlayerData=null;
//±£´æ½ÇÉ«Êý¾Ý½Ó¿Ú
app.post("/savePlayer"(reqres)=>{
savePlayerData=req.body;
res.send({code:200msg:"½ÇÉ«Êý¾Ý±£´æ³É¹¦"});
});
//»ñÈ¡½ÇÉ«Êý¾Ý½Ó¿Ú
app.get("/getPlayer"(reqres)=>{
res.send({code:200data:savePlayerData||playerData});
});
//Æô¶¯·þÎñÆ÷
app.listen(3000()=>{
console.log("·þÎñÆ÷Æô¶¯³É¹¦£¬¶Ë¿Ú3000");
});
È»ºóÐÞ¸Ämain.jsÖеijõʼ»¯ºÍ±£´æÂß¼£¬Ìí¼Ó½Ó¿ÚÇëÇ󣬼´¿ÉʵÏÖ½ÇÉ«Êý¾Ý±¾µØ±£´æ£¬¾ßÌåÐ޸Ŀɸù¾ÝÐèÇóµ÷Õû£¬µ¥»ú°æ¿ÉÊ¡ÂԴ˲½Ö裬½ö±£Áôǰ¶ËºËÐÄ´úÂë¼´¿É¡£
Èý¡¢´«ÆæÊÀ½ç´«Í³µ¥»ú°æ±à³Ì£¨ÒýÇæ½Å±¾¿ª·¢£¬ÎÞÐèǰ¶Ë£©
´«ÆæÊÀ½ç´«Í³µ¥»ú°æ±à³ÌºËÐÄÊÇÒýÇæ½Å±¾¿ª·¢£¬ÒÀÀµÓÎÏ·ÒýÇæ£¨Èçcocos2dx-Lua¡¢GOMÒýÇæ£©£¬ÎÞÐè±àдǰ¶Ë´úÂë£¬ÖØµãÊÇͨ¹ý½Å±¾ÅäÖÃÓÎÏ·Âß¼¡¢½ÇÉ«¡¢µØÍ¼¡¢NPC¡¢¼¼Äܵȣ¬ÒÔϽ²½âºËÐıà³Ì²½ÖèºÍ½Å±¾´úÂëʾÀý£¬ÊÊÅäÖ÷Á÷µ¥»ú°æÒýÇæ¡£
1.¿ª·¢»·¾³´î½¨£ºÏÂÔØ°²×°¶ÔÓ¦ÓÎÏ·ÒýÇæ£¨ÒÔcocos2dx-LuaΪÀý£©¡¢½Å±¾±à¼Æ÷£¨VSCode¡¢Notepad++¾ù¿É£©¡¢ÒýÇæÅäÌ×¹¤¾ß£¨ÈçµØÍ¼±à¼Æ÷¡¢½ÇÉ«±à¼Æ÷£©£¬°²×°Íê³Éºó£¬´ò¿ªÒýÇæ£¬Ð½¨´«ÆæÊÀ½çµ¥»ú°æÏîÄ¿£¬Ñ¡Ôñ“µ¥»úģʽ”£¬ÎÞÐèÅäÖ÷þÎñÆ÷£¬Ö±½Ó½øÈë½Å±¾¿ª·¢»·½Ú¡£
2.ºËÐĽű¾´úÂëʾÀý£¨QM½Å±¾£¬½ÇÉ«´´½¨ÓëÊôÐÔÅäÖã©£º´«ÆæÊÀ½ç´«Í³µ¥»ú°æºËÐĽű¾ÎªQM½Å±¾£¬ÓÃÓÚÅäÖýÇÉ«³õʼ»¯¡¢NPC¶Ô»°¡¢ÈÎÎñ´¥·¢µÈÂß¼£¬´úÂë¿ÉÖ±½Ó¸´ÖƵ½ÒýÇæ½Å±¾Îļþ¼Ð£¨Envir\QuestDiary£©ÖУ¬ÃüÃûΪ“InitPlayer.qm”£¬ÖØÆôÒýÇæ¼´¿ÉÉúЧ£º
[@Login];Íæ¼ÒµÇ¼´¥·¢
#IF
CHECKLEVELEX=1;ÅжÏÍæ¼ÒµÈ¼¶Îª1£¨¸Õ´´½¨½ÇÉ«£©
#ACT
SETPLAYERLEVEL1;ÉèÖÃÍæ¼ÒµÈ¼¶Îª1
SETPLAYERHP100100;ÉèÖÃÍæ¼ÒѪÁ¿Îª100/100
SETPLAYERMP5050;ÉèÖÃÍæ¼Òħ·¨ÖµÎª50/50
SETPLAYERATK1015;ÉèÖÃÍæ¼Ò¹¥»÷Ϊ10-15
SETPLAYERDEF58;ÉèÖÃÍæ¼Ò·ÀÓùΪ5-8
GIVEľ½£1;¸øÍæ¼Ò·¢·Å³õʼÎäÆ÷£¨Ä¾½££©
GIVE²¼ÒÂ1;¸øÍæ¼Ò·¢·Å³õʼװ±¸£¨²¼Ò£©
MAPMOVE0300300;ÒÆ¶¯Íæ¼Òµ½ÐÂÊÖµØÍ¼£¨µØÍ¼ID0£¬×ø±ê300300£©
SENDMSG6»¶ÓÀ´µ½´«ÆæÊÀ½çµ¥»ú°æ£¬×£ÄúÓÎÏ·Óä¿ì£¡;·¢ËÍϵͳÌáʾ
3.¹ÖÎïˢнű¾´úÂëʾÀý£¨QF½Å±¾£¬¿ØÖƹÖÎïË¢ÐÂÆµÂʺÍÊýÁ¿£©£ºQF½Å±¾ÓÃÓÚÅäÖùÖÎïˢС¢µôÂäµÈºËÐÄÂß¼£¬Ð½¨“MonsterRefresh.qf”Îļþ£¬¸´ÖÆÒÔÏ´úÂ룬·ÅÈëÒýÇæ½Å±¾Îļþ¼Ð£¬ÊÊÅäËùÓÐÖ÷Á÷µ¥»ú°æÒýÇæ£º
[@MonsterDie];¹ÖÎïËÀÍö´¥·¢
#IF
CHECKMONSTERNAMEµ¾²ÝÈË;ÅжÏËÀÍö¹ÖÎïΪµ¾²ÝÈË
#ACT
RANDOM3;1/3¸ÅÂʵôÂäÎïÆ·
GIVE½ð±Ò100;µôÂä100½ð±Ò
RANDOM5
GIVEСҩˮ1;1/5¸ÅÂʵôÂäСҩˮ
[@RefreshMonster];¹ÖÎïˢд¥·¢£¨Ã¿60ÃëË¢ÐÂÒ»´Î£©
#IF
TRUE;ÎÞÌõ¼þ´¥·¢
#ACT
MAPMONSTER0µ¾²ÝÈË300200160;ÔÚµØÍ¼0£¬×ø±ê300200£¬Ã¿60ÃëË¢ÐÂ1Ö»µ¾²ÝÈË
MAPMONSTER0µ¾²ÝÈË400250160;ÔÚµØÍ¼0£¬×ø±ê400250£¬Ã¿60ÃëË¢ÐÂ1Ö»µ¾²ÝÈË
MAPMONSTER0÷¼÷Ã5003001120;ÔÚµØÍ¼0£¬×ø±ê500300£¬Ã¿120ÃëË¢ÐÂ1Ö»÷¼÷Ã
4.µØÍ¼ÅäÖñà³Ì£¨¼òµ¥Ò×¶®£¬ÐÂÊÖ¿ÉÉÏÊÖ£©£º´«ÆæÊÀ½ç´«Í³µ¥»ú°æµØÍ¼ÅäÖÃÎÞÐè±àд¸´ÔÓ´úÂ룬ͨ¹ýÒýÇæ×Ô´øµÄµØÍ¼±à¼Æ÷¼´¿ÉÍê³É£¬²½ÖèÈçÏ£º´ò¿ªÒýÇæµØÍ¼±à¼Æ÷£¬µ¼Èë´«ÆæÊÀ½çµØÍ¼Ëزģ¨.map¸ñʽ£©£¬ÉèÖõØÍ¼ID£¨ÈçÐÂÊÖµØÍ¼IDΪ0£©£¬Ìí¼ÓµØÍ¼ÕϰÎï¡¢³öÉúµã¡¢¹ÖÎïˢе㣬±£´æµØÍ¼Îļþ£¬·ÅÈëÒýÇæMapÎļþ¼Ð£¬È»ºóÔڽű¾ÖÐÅäÖõØÍ¼Òƶ¯Âß¼£¨ÈçÉÏÊö½ÇÉ«µÇ¼ºóÒÆ¶¯µ½ÐÂÊÖµØÍ¼£©£¬¼´¿ÉÍê³ÉµØÍ¼±à³Ì¡£
ËÄ¡¢´«ÆæÊÀ½çµ¥»ú°æ±à³ÌÍêÕû²½Ö裨ͨÓð棬ÊÊÅäH5ºÍ´«Í³°æ£©
ÎÞÂÛÑ¡ÔñH5µ¥»ú°æ»¹ÊÇ´«Í³µ¥»ú°æ£¬±à³ÌÁ÷³Ì¾ù¿É·ÖΪ4²½£¬²½ÖèÇåÎú£¬ÎÞÐèרҵ±à³Ì»ù´¡£¬ÐÂÊֿɰ´Ë³Ðò²Ù×÷£¬±ÜÃâ×ßÍä·£º
1.Ã÷È·ÐèÇó£ºÈ·¶¨±à³Ì·½Ïò£¨H5°æ»ò´«Í³°æ£©£¬Ã÷È·ºËÐŦÄÜ£¨Èç½ÇÉ«ÒÆ¶¯¡¢¹¥»÷¡¢¹ÖÎïˢС¢ÊôÐÔÉý¼¶µÈ£©£¬ÎÞÐèÌí¼Ó¸´ÔÓ¹¦ÄÜ£¬ÏÈÍê³É»ù´¡ºËÐÄÂß¼£¬ÔÙÖð²½À©Õ¹¡£
2.´î½¨»·¾³£º¸ù¾ÝÑ¡ÔñµÄ°æ±¾£¬´î½¨¶ÔÓ¦¿ª·¢»·¾³£¨H5°æ°²×°VSCode¡¢Node.js£»´«Í³°æ°²×°ÓÎÏ·ÒýÇæ¡¢½Å±¾±à¼Æ÷£©£¬»·¾³´î½¨Íê³Éºó£¬²âÊÔÊÇ·ñÄÜÕý³£ÔËÐУ¨H5°æÆô¶¯LiveServerÔ¤ÀÀ£¬´«Í³°æÆô¶¯ÒýÇæ²âÊÔ£©¡£
3.±àд´úÂ룺°´ºËÐŦÄܲð·Ö´úÂ룬Öð²½±àд£¨H5°æÏÈдHTMLÒ³Ãæ½á¹¹£¬ÔÙдCSSÑùʽ£¬×îºóдJavaScript½»»¥£»´«Í³°æÖ±½Ó±àдQM¡¢QF½Å±¾£¬ÅäÖýÇÉ«¡¢¹ÖÎï¡¢µØÍ¼£©£¬Ã¿±àдһ¶Î´úÂ룬¼°Ê±²âÊÔ£¬±ÜÃâºóÆÚ´óÃæ»ý±¨´í¡£
4.µ÷ÊÔÓÅ»¯£º²âÊÔ´úÂëÔËÐÐЧ¹û£¬ÅŲ鱨´í£¨ÈçH5°æ½ÇÉ«ÎÞ·¨Òƶ¯¡¢¹ÖÎﲻˢУ»´«Í³°æ½Å±¾²»ÉúЧ¡¢½ÇÉ«ÊôÐÔÒì³££©£¬µ÷ÊÔÍê³Éºó£¬¿É¸ù¾ÝÐèÇóÀ©Õ¹¹¦ÄÜ£¨ÈçH5°æÌí¼Ó¼¼ÄÜϵͳ£¬´«Í³°æÌí¼ÓNPCÈÎÎñ¡¢×°±¸µôÂ䣩¡£
Îå¡¢³£¼û±à³Ì±¨´í¼°½â¾ö·½·¨£¨ÐÂÊֱؿ´£©
1.H5µ¥»ú°æ±¨´í£ºÒ³ÃæÎÞ·¨Ô¤ÀÀ£¬Ìáʾ“ÕÒ²»µ½Îļþ”£¬½â¾ö·½·¨£º¼ì²éÎļþ¼Ð·¾¶ÊÇ·ñÕýÈ·£¬È·±£HTMLÎļþ¹ØÁªµÄCSS¡¢JavaScriptÎļþ·¾¶ÎÞÎó£¬imagesÎļþ¼ÐÖзÅÈë¶ÔÓ¦ËØ²Ä£¬ÖØÐÂÆô¶¯LiveServer¡£
2.H5µ¥»ú°æ±¨´í£º½ÇÉ«ÎÞ·¨Òƶ¯¡¢¹¥»÷ÎÞ·´Ó¦£¬½â¾ö·½·¨£º¼ì²éJavaScript´úÂ룬ȷÈÏDOMÔªËØ»ñÈ¡ÕýÈ·£¬Ê¼þ°ó¶¨ÎÞÎ󣬽ÇÉ«¡¢¹ÖÎïÊý¾ÝÅäÖÃÕýÈ·£¬¿ØÖÆÌ¨£¨F12£©²é¿´±¨´íÐÅÏ¢£¬Õë¶ÔÐÔÐ޸ĴúÂë¡£
3.´«Í³µ¥»ú°æ±¨´í£º½Å±¾²»ÉúЧ£¬ÖØÆôÒýÇæÎÞ·´Ó¦£¬½â¾ö·½·¨£º¼ì²é½Å±¾ÎļþÃûÊÇ·ñÕýÈ·£¨ÈçQM½Å±¾ºó׺Ϊ.qm£¬QF½Å±¾ºó׺Ϊ.qf£©£¬½Å±¾·ÅÈë¶ÔÓ¦Îļþ¼Ð£¨Envir\QuestDiary£©£¬½Å±¾Óï·¨ÎÞÎó£¨Èç#IF¡¢#ACT¶ÔÆë£¬ÃüÁîÆ´Ð´ÕýÈ·£©¡£
4.´«Í³µ¥»ú°æ±¨´í£º¹ÖÎﲻˢС¢µôÂäÒì³££¬½â¾ö·½·¨£º¼ì²éQF½Å±¾ÖеĹÖÎïË¢ÐÂÃüÁMAPMONSTER£©£¬È·ÈϵØÍ¼ID¡¢×ø±êÕýÈ·£¬Ë¢ÐÂʱ¼äÅäÖúÏÀí£¬µôÂäÂß¼ÖеÄRANDOM¸ÅÂÊÉèÖÃÎÞÎó¡£
5.ͨÓñ¨´í£º´úÂë¸´ÖÆºóÎÞ·¨ÔËÐУ¬½â¾ö·½·¨£º¼ì²é´úÂë¸ñʽ£¬É¾³ý¶àÓà¿Õ¸ñ¡¢»»ÐУ¬È·±£·ûºÅÕýÈ·£¨ÈçJavaScriptÖеÄÀ¨ºÅ¡¢·ÖºÅ£¬QM½Å±¾ÖеĿոñ¶ÔÆë£©£¬±ÜÃâ¸´ÖÆÊ±ÒÅ©´úÂëÆ¬¶Î¡£
Áù¡¢²¹³ä˵Ã÷
´«ÆæÊÀ½çµ¥»ú°æ±à³ÌÎÞÐ踴ÔÓ±à³Ì»ù´¡£¬H5°æÖصãÕÆÎÕHTML¡¢CSS¡¢JavaScript»ù´¡£¬´«Í³°æÖصãÕÆÎÕQM¡¢QF½Å±¾ÃüÁËùÓдúÂë¿ÉÖ±½Ó¸´ÖƲâÊÔ£¬ºóÆÚ¿É¸ù¾ÝÐèÇóÀ©Õ¹¹¦ÄÜ¡£±à³Ì¹ý³ÌÖУ¬¿É²Î¿¼´«ÆæÊÀ½ç¹Ù·½Íæ·¨Âß¼£¬»¹Ô¾µäÔªËØ£¨Èç½Çɫְҵ¡¢¼¼ÄÜ¡¢×°±¸¡¢µØÍ¼£©£¬ÌáÉýÓÎÏ·ÌåÑé¡£
ÁíÍ⣬H5µ¥»ú°æ¿Éͨ¹ýä¯ÀÀÆ÷Ö±½Ó´ò°ü£¬Éú³É¿É±¾µØÔËÐеÄHTMLÎļþ£¬ÎÞÐè°²×°ÈκÎÈí¼þ¼´¿ÉÆô¶¯£»´«Í³µ¥»ú°æ±à³ÌÍê³Éºó£¬´ò°üÒýÇæÎļþ£¬¼´¿ÉÉú³É¶ÀÁ¢µÄµ¥»ú°æ¿Í»§¶Ë£¬Ë«»÷¼´¿ÉÔËÐУ¬ÎÞÐèÅäÖöîÍâ»·¾³¡£
×ܽ᣺´«ÆæÊÀ½çH5µ¥»ú°æ±à³Ì²àÖØÇ°¶Ë½»»¥£¬ºËÐÄÊÇHTML¡¢CSS¡¢JavaScript´úÂ룻´«Í³µ¥»ú°æ±à³Ì²àÖØÒýÇæ½Å±¾£¬ºËÐÄÊÇQM¡¢QF½Å±¾ÅäÖᣰ´ÉÏÊö»·¾³´î½¨¡¢´úÂëʾÀý¡¢±à³Ì²½Öè²Ù×÷£¬ÐÂÊÖ¿É¿ìËÙÉÏÊÖ£¬ËùÓдúÂë¿ÉÖ±½Ó¸´ÖÆÊ¹Óã¬ÅŲ鱨´íʱ¶ÔÕÕ³£¼ûÎÊÌ⣬¼´¿É˳ÀûÍê³Éµ¥»ú°æ±à³Ì£¬ÊµÏÖºËÐÄÓÎÏ·Âß¼¡£

