![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Tt4Vju--qD5gdqLu4MWtOy_l3yuQ_VkS-I6uTId0vmBGErLQkr-Tvmpk1s7RFaFtb1oAchrAWByqhMhawMQUriLzXarXagL231GpESIbcXhkMD5Nek5UK44suz0gxDKs8duPsraRs5k8kbwC8Fx-OyUPWTqY4R7hW43fVU1mDbUJ6alUzetxma5b/s1600-rw/mountain-landscape-2031539_1280.jpg)
素材の用意
木素材 wood.png
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14VQocPH0ZL3ebeMRSX-0TrftzruyaOQtgamH0ELa71JvuxUmpLFoXfZHst6gzD93AnIyPNq8lwAIb5xh3PiprCEeOA2DMvkz2CaGnR5ZBEvb9hBoGbwYZA4UVBKBgT_gnS-W4ta5frUEfV4yx12MUC0SpS2uU4-WsB1pFeUHdZcQo__t-479QKMcLcU/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%289%29.png)
岩素材 rock.png
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCXu_ioHehJNRRuYs01wDQfYhCeQFeH5Uk_QmPneGhhTFdDTr_ysWM-F1e781BIFoDetRdtGtHc1z1CF5XtbGVKuEDsRgBtbAWQQZ3hVkMZl1bZMLjGNjU_BAzdsIzeLtNm5x8sS3sMRaqc8dwqM7AXTcQLCX-DRSNOI2HKYbq4HSylGlLse_fw7DQxcQ/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2810%29.png)
配置
用意した素材を適当な位置においてみると次のような感じになります。![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfPQJDGd_e_ShU7aV1a7FpA5NJCGsY9Tl2Bwigj80UqCruMdPyRnVEF0G0Z8BBJxrPt1SFwOUbTSE0QXuHsCVR6WpLltM9CNzGUuqSUlVTGUNGsio6U9e14p228KZcl_tcdUprHZ6QCXPasWquUfmAJ3bO2oTy7qGyaPa5TSlcc6U_HMwkJW7F2faNW4/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%286%29.jpeg)
構築ポイント
今回追加した、javascriptプログラムは、以下の通りです。MAIN.prototype.put_object = function(map){
let img;
img = this.put_object_image("wood.png" , 64 , 16);
map.appendChild(img);
img = this.put_object_image("rock.png" , 96 , 32);
map.appendChild(img);
};
MAIN.prototype.put_object_image = function(path , x , y){
let img = new Image();
img.src = path;
img.className = "obj";
img.style.setProperty("left",x + "px","");
img.style.setProperty("top" ,y + "px","");
return img;
};
前回プログラムに加えると画面に配置されるようになるのですが、
今回は座標をそのまま手打ちしてます。
フィールドマップをベタに数値入力していくのではなく、マップデータというのを作って、それに該当する表示をするといった
修正なども含めた効率のいい構成にしなければいけないので、
次回は、そうした構成について考えてみたいと思います。
0 件のコメント:
コメントを投稿