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

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 コードが非常に重要なので、

コードをコピー

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

SLG

< ;/div>

;/div>

现在大家可对照二段代码看，值得注意得是有点：在html代网中，我掴一张图片入了div，今回div は本来は画像を隠すものではありませんが、overflow: hidden; を追加すると画像を隠すことができます。４つのｄｉｖが画像の四辺に圧力をかけ、その辺が点にあるとき、点ｄｉｖに等しく、点ｄｉｖが対応する関数を制御する。もう 1 点注意してください: ポイントが関数の近くにあるとき、私たちはマウスマークを除いてまっすぐに移動する非常に特別な方法を使用しました。 ) また、循環しないサービスです。そのため、定期的に終了し、マウスが起動されているときに、clearInterval();setInterval() を使用して停止します。そのため、このサイクルは確定しています。
了解しました、写真を忘れずに家に持ってきてください。写真には大きな点があります。。。

源影片下載地址