Javascriptゲーム開発：『三國志 曹操伝』コンポーネント開発(5)可動マップの実装_JavaScriptスキル

1. はじめに

この講義の内容は非常に簡単なので、誰でもすぐに理解できます。したがって、私は重要なポイントのみを分析します。残りはあなたが考える番です。まず第一に、私にはゲーム開発の経験があまりありません。なぜなら、今日のプログラマーはキャンバスを使用するのが大好きだからですが、私はいくつかの div しか作成できません。しかし、結果はまだゲームなので、それは問題ではありません。はー！最近よく話してしまいましたが、お許しいただければ幸いです。次に、コード分析を見てください。

2. コードの説明

今日は、最初にコードを見て、次に写真を見てください。

これは slg.js の内容です:

コードをコピーします コードは次のとおりです:

varsubtractedMarginL = 0;

var toleft; >
window.onmouseup ){
マウスダウン = 0;

クリアインターバル(左);
クリアインターバル (上); >
関数 mapMove(方向)
{
switch(方向){
case "down":
subtractedMargin -= 15;

$("#ID_IMG_MAP") .animate({marginTop:subtractedMargin "px"}, 120);

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(右);
clearInterval(左);
if(subtractedMarginL > -20){
clearInterval(右);
}

if(subtractedMargin clearInterval(todown);
}
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 mapMove(" left");
toleft = setInterval (function(){mapMove("left");}, 120);

$("#ID_DIV_TODOWN") .mousedown(function(){
マウスダウン = 1;

if(subtractedMargin > -640 && マウスダウン == 1){
mapMove("down");
todown = setInterval (function(){mapMove("down") );}, 120);
}
});

$("#ID_DIV_TOUP").mousedown(function(){
マウスダウン = 1;

if(subtractedMargin mapMove("up")
toup = setInterval(function(){mapMove("up" );},
}
});
});


この記事のタイトルを見ても抽象的すぎて絶対に意味が分かりません。ここで説明します。移動可能とは、全方向に移動できることを意味します。これは、世界地図、中国地図、またはゲーム マップです。 。 。とにかく絵でなければなりません。ここでもう少し一言言わなければなりませんが、廬山の本当の顔を知らないよりは状況を理解する方がはるかに良いので、問題はありません。
次に、HTML コードをもう一度公開します。今回は HTML コードが非常に重要なので、




コードをコピー


コードは次のとおりです:

;/div>

;/div>

;/div>