ヽ(=´▽`=)ノ
キャラと装備をパーツ化して乱数合体させたら、もっと楽に大量のキャラをワチャワチャできるな~。
ちなみに当方のjavascript開発環境は以下のとおり。
エディタ:メモ帳
動作検証:chrome
javascriptの開発環境、用意が0秒で完了するあたりも楽ちんでイイですね♪
実装したコードは以下のとおりです。
もっと、こう...キレイに書きたいですね。
(*´艸`*)
■コード
<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>
<center>
<div id="box">
<img name="Sprite" id="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_wLh7yExqI6rqtEIbSfTYKwknUCAr662WUwXpjs4fl0MCjvC0MTnZPIySNFW8J1QxktmU8Xou6tVWBH2-i4AYh0qQzO9gMQBQm_ro6ZOLT4T-sSUX17jSN7j_fZcwzEnAMAlZVxk5UY71zq4SnYt4tyavYokyjWZskgNe5l2-B4YXUUmb6JoCz8qxg/s16/dot_001.png" />
<img name="Sprite"id="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ5VZFskVXMexkFOU-65D31m2Vr0vRdAXP6zdjnk8xtd76R0mdsDczHhVVMavV-ERHcegOuMCY-F8jyZG33J-IHPuozcRtwvTVA3eOe78UeN5q3aJh-U4I0THfMXcfB-eIyvApwV3iUgkXX_Q_lTgxHujInLGEn2nWpMkw27lc56nwlSJcBbRxx3Wd7w/s16/dot_002.png" />
<img name="Sprite"id="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJsBjsB9fV6WC-qF5x0PCY2DptXlZ_lbrJyL7pVX7HdZMTXF3JHyBkmV0lQXQytcopDvzrOw9rPxnksSPQQS_Pktkkrr7i5pvDmlN5SyipRAe-Lp_3lDR1T3Yb0eoZvH99--elJU-HeZlF09T5xj-y8KB2z_USsKgi6Nqm-TJ2JwH48LvF66Fnf6jvA/s16/dot_003.png" />
<img name="Sprite"id="img4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzhJCb3Q_VDoBtucKrQd57WzoVvtCOBhYYsKFSMwpSRu6aL2n196HMwerTE7hJPVp4t5bdFQGKS-aK8AEzSuyOEJWNiu2a0WFff-eNLtk2loBv1EdqoRyyBg4dxV-CqCDe1lSPCTospdOXIHj5l4tVlhvY9pBFxR50xlnh3L64wCfeYCueogAHV18uA/s16/dot_004.png" />
<img name="Sprite"id="img5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXLKG3-QA36Di12KJPwAVRkNwYwZXyFfP6vNApPYvwsBjFDIUh9GQbtxOXT567L5aeIj1x9R2qBDcOExm3wLUGZ4-Nig1qBHmvjDh1Gqa8CNDd4CIMFXlCssRkSe0_-PKSZ9E6IlxrG2lSgA0kgVUVKxXN2neIoWUgHoN_wAETYOEJ7byMZKnrIufHzg/s16/dot_005.png" />
<img name="Sprite"id="img6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuIgDno4eHsTaApZ0JeEpkKiogZYFpepfffsWPtnY7Xzr9Ae6CGPl4twJaiihV7FebOvTrWumgerB6DwAE3jP822MgFXHarMOQ7f6s7UPtfsWD4fFXBU87sOI3k7G-k9WplLTu34W1xUV2uKrrl8ruM9_Yl8rq9Ishx6vf2A_UtwQa5B0Ulf9yD3qa2A/s16/dot_006.png" />
<img name="Sprite"id="img7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZRDGNP-Bfeplm42uqnBTw3KZocNwPH7fsnufYxzDWOcFigrrWRgieU8dW70lnsbwBOdoOuh9UnWXufj_G-y_M1dVEvsH9rDv20Wcn3ZleqkowDpey0mmdJ3YlvZgBBxozopBZ8KmBfl48mRjzf74Uvt2FLSTkw7RAUPpcSkMOaYfQeADzjPboIdmJig/s16/dot_007.png" />
<img name="Sprite"id="img8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWWj0zJ-61gwj4c2WpFbEi7fEK7xndc8emSniWRfwcLpi3shDCACirfD6HdF4w4IexQH9c2CzH8ZCEQhfF6n3NJCcIu-UtoAi82PPqS6H3PlYHcqhIjavI67S03S69HamRCehwQDkzsYfI_XKN8pMam93oUJIyFEsKAs90ta9ZNDs7V1gUrnCecmRjw/s16/dot_008.png" />
<img name="Sprite"id="img9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oJ3809KMpakGR0p28c5-dG9jx92R0dvaBgxd26OShdVVkc3DWQCZQhcEsSz-d-xPYE4_VQsAYymKdhcqB4dveCtFOFdcuEHTXIFWCRGBe3kBY0Sw9YUsPBqyRsDjIMFRWTBKyLZfO5cnBSb7sAE0-x3ZD_QxlNqPSDnqXzYml1A4z2lWGSi0512ZXw/s16/dot_009.png" />
<img name="Sprite"id="img10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_2z3F9U8YpA-aXj-fTbx2qU118imqVhPT6HMUVWXBpojZH_7MVkDXRXLhWpUxjKqOF5qSzsDW8nt107Lc8-0PXq6l_rMej5uZrNqCZZBwTZX6w9nb5v8PxMe08eRfksjLAjljedBhHr3YgJVfmH9Ch2If6wTsfHf1oD0AQ3IvPzKiZ8nFmCrnfFatAw/s16/dot_010.png" />
<img name="Sprite"id="img11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieCYMPAAy9w36TM594xquM8i6wo1QxbeuTqWX0AMiHhYbtMPtbnJDQsQBf3j7p75Km7rhrIhnijHAPeXRo3L2hOZzBppbtnmDqdJ0UMYdqNE0-udD_2RPc6Lks-CJkVvcfT64eOp1CLoC3hfCbrYJ-Urtn8bfXeXVYcTzsIFjEED1buQt8R7dg5WymTQ/s16/dot_011.png" />
<img name="Sprite"id="img12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibet6xrerfqMgzHj5LpYWS9GS77ExW3IRRBaKPdAxzutN-dYm_tB3yyx-0C2V-0ujmjx_ZRQRSsGYQTjpvKIESUwq0QmLtAF9C2EU1As6Is14sA2urvfVG53JwDmag0Zl13rkkHmWu2-crhV3Ss7PGx57R-KJHur5gVIDvypaGOtl6vUi72ET6ao8jtg/s16/dot_012.png" />
<img name="Sprite"id="img13" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_80RuiEc2baEQG16h3Af3ggt2oKH10TSI2v1uwIqGVa2F8o0tuMuamoJlvW5346PLz8y5RwQfOnLZji_BKNfGfjW4ag5bePs00Cj421eccWgRPcMBuJR2y_0bDU-3SwmSffpb9-Znz_gW4_O_rfjZIRznHd1ya2YPkYaYDmEaHTgHJRD49h-NPI8uw/s16/dot_013.png" />
<img name="Sprite"id="img14" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBazL7pTTrZFs6q5stp2PabEDBGol7yEhQ_5AEyHd-37XSuXlRcBfuz59xvakISLHBPenaPX9fNj-3zUBTy7cvpFQ6lWD9c6q_jQdxD3wxQLj_TMGNgOnP8NvUUjjgxo5qT46ve55B53numDGQCFD74Wce6beDDdlocEv7XHBdANoVwXP9gtEMyymIg/s16/dot_014.png" />
<img name="Sprite"id="img15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLsh8wqYqzioNBCwo8iXI1XYIUbbujfQwOi6cBzFmxLGAsX798soqU1V8hHr11rUmUUJao7ZVOTg7YvGMnVnYeaaHxZ9iubylXRmvUqyqzd3iLpoV70V_Q579xN03y1DKoumhKsESE1Wk5VQVOP_nKpTZqkI3wlCsr1y719MxG94YOxQWg-N90xUuFYg/s16/dot_015.png" />
<img name="Sprite"id="img16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfOcp7lPhbcapNoPw_r7P3gmuIeu5JwDaiJfla0D4u1bKVfkHu_3ABSDXa7FmM3y_sEKJuCG-u0HSs10z0dPMwUA9Y9dF-BYvaO1ylluVMLip__A2QvTZTwyyCgoQP-EhiMxSFnyxCbcvjGaor9xNB5p5pjG-FZnX-oUiqiy3VEsuuQi_Qq97S4pfJQ/s14/dot_cameo.png" />
<img name="Sprite"id="img17" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfOcp7lPhbcapNoPw_r7P3gmuIeu5JwDaiJfla0D4u1bKVfkHu_3ABSDXa7FmM3y_sEKJuCG-u0HSs10z0dPMwUA9Y9dF-BYvaO1ylluVMLip__A2QvTZTwyyCgoQP-EhiMxSFnyxCbcvjGaor9xNB5p5pjG-FZnX-oUiqiy3VEsuuQi_Qq97S4pfJQ/s14/dot_cameo.png" />
<img name="Sprite"id="img18" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfOcp7lPhbcapNoPw_r7P3gmuIeu5JwDaiJfla0D4u1bKVfkHu_3ABSDXa7FmM3y_sEKJuCG-u0HSs10z0dPMwUA9Y9dF-BYvaO1ylluVMLip__A2QvTZTwyyCgoQP-EhiMxSFnyxCbcvjGaor9xNB5p5pjG-FZnX-oUiqiy3VEsuuQi_Qq97S4pfJQ/s14/dot_cameo.png" />
</div>
</center>
<script>
// 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