after carnival: ウルティマオンラインとbloggerとJavaScriptその２

せっかくなのでガジェットに実装。
ヽ(=´▽`=)ﾉ

キャラと装備をパーツ化して乱数合体させたら、もっと楽に大量のキャラをワチャワチャできるな～。

ちなみに当方のjavascript開発環境は以下のとおり。
　エディタ：メモ帳
　動作検証：chrome

javascriptの開発環境、用意が０秒で完了するあたりも楽ちんでイイですね♪

実装したコードは以下のとおりです。
もっと、こう...キレイに書きたいですね。
(*´艸｀*)

■コード

<style>

#box {

width: 256px;

height: 240px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM46S4dWkER6Fbnbf-zaY-SC4Y2NEATwUO_wymld7wUzjYGE4piCT86lXVQZEvYQDcwtmgnIWFgwVLipxoTfP53Jn3j-eDurdUDbV20SPhp0Gv3XJqHf9tvt96O4IGrrS-d3rXjL2ovioX0LnV2gGA3rapqCpYFbccIgt-Ggutf2_1k566VYw2uZzQqw/s256/uo_sg_20230313a.png");

border: 2px solid black;

position: relative;

}

img {

position: absolute;

}

</style>

</div>

</center>

// Get the box and the images

let box = document.getElementById('box');

let imgs = document.getElementsByName('Sprite');

// Set the initial positions and velocities of the images

let positions = [];

let velocities = [];

for (let i = 0; i < imgs.length; i++) {

positions[i] = {

x: Math.random() * (box.offsetWidth - imgs[i].width),

y: Math.random() * (box.offsetHeight - imgs[i].height)

};

velocities[i] = {

x: Math.random() * 10 - 5,

y: Math.random() * 10 - 5

};

imgs[i].style.left = positions[i].x + 'px';

imgs[i].style.top = positions[i].y + 'px';

}

// Move the images

setInterval(function() {

for (let i = 0; i < imgs.length; i++) {

// Get the current position and velocity of the image

let pos = positions[i];

let vel = velocities[i];

// Update the position based on the velocity

pos.x += vel.x;

pos.y += vel.y;

// Check if the image has hit a wall and reverse the velocity if it has

if (pos.x < 0 || pos.x > box.offsetWidth - imgs[i].width) {

vel.x = -vel.x;

}

if (pos.y < 0 || pos.y > box.offsetHeight - imgs[i].height) {

vel.y = -vel.y;

}

// Update the position of the image

imgs[i].style.left = pos.x + 'px';

imgs[i].style.top = pos.y + 'px';

// Update the positions and velocities arrays

positions[i] = pos;

velocities[i] = vel;

}

}, 20);

</script>

■素材
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_wLh7yExqI6rqtEIbSfTYKwknUCAr662WUwXpjs4fl0MCjvC0MTnZPIySNFW8J1QxktmU8Xou6tVWBH2-i4AYh0qQzO9gMQBQm_ro6ZOLT4T-sSUX17jSN7j_fZcwzEnAMAlZVxk5UY71zq4SnYt4tyavYokyjWZskgNe5l2-B4YXUUmb6JoCz8qxg/s16/dot_001.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5VZFskVXMexkFOU-65D31m2Vr0vRdAXP6zdjnk8xtd76R0mdsDczHhVVMavV-ERHcegOuMCY-F8jyZG33J-IHPuozcRtwvTVA3eOe78UeN5q3aJh-U4I0THfMXcfB-eIyvApwV3iUgkXX_Q_lTgxHujInLGEn2nWpMkw27lc56nwlSJcBbRxx3Wd7w/s16/dot_002.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJsBjsB9fV6WC-qF5x0PCY2DptXlZ_lbrJyL7pVX7HdZMTXF3JHyBkmV0lQXQytcopDvzrOw9rPxnksSPQQS_Pktkkrr7i5pvDmlN5SyipRAe-Lp_3lDR1T3Yb0eoZvH99--elJU-HeZlF09T5xj-y8KB2z_USsKgi6Nqm-TJ2JwH48LvF66Fnf6jvA/s16/dot_003.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzhJCb3Q_VDoBtucKrQd57WzoVvtCOBhYYsKFSMwpSRu6aL2n196HMwerTE7hJPVp4t5bdFQGKS-aK8AEzSuyOEJWNiu2a0WFff-eNLtk2loBv1EdqoRyyBg4dxV-CqCDe1lSPCTospdOXIHj5l4tVlhvY9pBFxR50xlnh3L64wCfeYCueogAHV18uA/s16/dot_004.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXLKG3-QA36Di12KJPwAVRkNwYwZXyFfP6vNApPYvwsBjFDIUh9GQbtxOXT567L5aeIj1x9R2qBDcOExm3wLUGZ4-Nig1qBHmvjDh1Gqa8CNDd4CIMFXlCssRkSe0_-PKSZ9E6IlxrG2lSgA0kgVUVKxXN2neIoWUgHoN_wAETYOEJ7byMZKnrIufHzg/s16/dot_005.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIgDno4eHsTaApZ0JeEpkKiogZYFpepfffsWPtnY7Xzr9Ae6CGPl4twJaiihV7FebOvTrWumgerB6DwAE3jP822MgFXHarMOQ7f6s7UPtfsWD4fFXBU87sOI3k7G-k9WplLTu34W1xUV2uKrrl8ruM9_Yl8rq9Ishx6vf2A_UtwQa5B0Ulf9yD3qa2A/s16/dot_006.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZRDGNP-Bfeplm42uqnBTw3KZocNwPH7fsnufYxzDWOcFigrrWRgieU8dW70lnsbwBOdoOuh9UnWXufj_G-y_M1dVEvsH9rDv20Wcn3ZleqkowDpey0mmdJ3YlvZgBBxozopBZ8KmBfl48mRjzf74Uvt2FLSTkw7RAUPpcSkMOaYfQeADzjPboIdmJig/s16/dot_007.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWWj0zJ-61gwj4c2WpFbEi7fEK7xndc8emSniWRfwcLpi3shDCACirfD6HdF4w4IexQH9c2CzH8ZCEQhfF6n3NJCcIu-UtoAi82PPqS6H3PlYHcqhIjavI67S03S69HamRCehwQDkzsYfI_XKN8pMam93oUJIyFEsKAs90ta9ZNDs7V1gUrnCecmRjw/s16/dot_008.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oJ3809KMpakGR0p28c5-dG9jx92R0dvaBgxd26OShdVVkc3DWQCZQhcEsSz-d-xPYE4_VQsAYymKdhcqB4dveCtFOFdcuEHTXIFWCRGBe3kBY0Sw9YUsPBqyRsDjIMFRWTBKyLZfO5cnBSb7sAE0-x3ZD_QxlNqPSDnqXzYml1A4z2lWGSi0512ZXw/s16/dot_009.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_2z3F9U8YpA-aXj-fTbx2qU118imqVhPT6HMUVWXBpojZH_7MVkDXRXLhWpUxjKqOF5qSzsDW8nt107Lc8-0PXq6l_rMej5uZrNqCZZBwTZX6w9nb5v8PxMe08eRfksjLAjljedBhHr3YgJVfmH9Ch2If6wTsfHf1oD0AQ3IvPzKiZ8nFmCrnfFatAw/s16/dot_010.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieCYMPAAy9w36TM594xquM8i6wo1QxbeuTqWX0AMiHhYbtMPtbnJDQsQBf3j7p75Km7rhrIhnijHAPeXRo3L2hOZzBppbtnmDqdJ0UMYdqNE0-udD_2RPc6Lks-CJkVvcfT64eOp1CLoC3hfCbrYJ-Urtn8bfXeXVYcTzsIFjEED1buQt8R7dg5WymTQ/s16/dot_011.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibet6xrerfqMgzHj5LpYWS9GS77ExW3IRRBaKPdAxzutN-dYm_tB3yyx-0C2V-0ujmjx_ZRQRSsGYQTjpvKIESUwq0QmLtAF9C2EU1As6Is14sA2urvfVG53JwDmag0Zl13rkkHmWu2-crhV3Ss7PGx57R-KJHur5gVIDvypaGOtl6vUi72ET6ao8jtg/s16/dot_012.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_80RuiEc2baEQG16h3Af3ggt2oKH10TSI2v1uwIqGVa2F8o0tuMuamoJlvW5346PLz8y5RwQfOnLZji_BKNfGfjW4ag5bePs00Cj421eccWgRPcMBuJR2y_0bDU-3SwmSffpb9-Znz_gW4_O_rfjZIRznHd1ya2YPkYaYDmEaHTgHJRD49h-NPI8uw/s16/dot_013.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBazL7pTTrZFs6q5stp2PabEDBGol7yEhQ_5AEyHd-37XSuXlRcBfuz59xvakISLHBPenaPX9fNj-3zUBTy7cvpFQ6lWD9c6q_jQdxD3wxQLj_TMGNgOnP8NvUUjjgxo5qT46ve55B53numDGQCFD74Wce6beDDdlocEv7XHBdANoVwXP9gtEMyymIg/s16/dot_014.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsh8wqYqzioNBCwo8iXI1XYIUbbujfQwOi6cBzFmxLGAsX798soqU1V8hHr11rUmUUJao7ZVOTg7YvGMnVnYeaaHxZ9iubylXRmvUqyqzd3iLpoV70V_Q579xN03y1DKoumhKsESE1Wk5VQVOP_nKpTZqkI3wlCsr1y719MxG94YOxQWg-N90xUuFYg/s16/dot_015.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfOcp7lPhbcapNoPw_r7P3gmuIeu5JwDaiJfla0D4u1bKVfkHu_3ABSDXa7FmM3y_sEKJuCG-u0HSs10z0dPMwUA9Y9dF-BYvaO1ylluVMLip__A2QvTZTwyyCgoQP-EhiMxSFnyxCbcvjGaor9xNB5p5pjG-FZnX-oUiqiy3VEsuuQi_Qq97S4pfJQ/s14/dot_cameo.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4AiQCsJBG3EFrmLwedxg6PEkI71YYqM1achSHA8mmyEl05P6cMw70215CTHL1MT0poWOfacR4Sqf0dUSKo7E4WoQx18a8GeazjgCYXOpv5mm4IBFJugQMK0Vksi9estKQ_I581-VqqPHecLnAv7Cgh8pSWDIYDI8PigPovRDdudqNEn7Z72_s-37j-Q/s16/dot_016.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM46S4dWkER6Fbnbf-zaY-SC4Y2NEATwUO_wymld7wUzjYGE4piCT86lXVQZEvYQDcwtmgnIWFgwVLipxoTfP53Jn3j-eDurdUDbV20SPhp0Gv3XJqHf9tvt96O4IGrrS-d3rXjL2ovioX0LnV2gGA3rapqCpYFbccIgt-Ggutf2_1k566VYw2uZzQqw/s256/uo_sg_20230313a.png

2023/03/29

ウルティマオンラインとbloggerとJavaScriptその２