Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【作りかけ】タイルパターン生成

 どうも!LSSです!!

 

を、自動生成するようなものを作ろうと…していたのですが、途中でだいぶ手間取ってしまいました^^;

作りかけですが、今こんな感じ、という中間報告です。

 

 

作りかけ

線の色 背景色 

 


こんな模様になります^^


 

 

スクリプトコード

 

 <p>線の色<input id="icr" type="color" value="#888888" /> 背景色<input id="bcr" type="color" value="#ffffff" /> <input id="btn" type="button" value="模様変更" /></p>
<div id="gamen"> </div>
<script>// <![CDATA[
ichi=[5,15,5,15];
tg=[];
zhmj=a=>(a>3?ichi[a%4]+','+( (Math.floor(a/2)%2)*20):( (Math.floor(a/2)%2)*20)+','+ichi[a%4]);
icr.addEventListener('input',gw,false);
bcr.addEventListener('input',gw,false);
btn.addEventListener('click',sfl,false);
sfl();
function sfl(){
tg=[0,1,2,3,4,5,6,7];
i=0;
do{
tg.unshift(tg.splice(i+Math.random()*(tg.length-i),1));
i++;
tg.unshift(tg.splice(i+Math.random()*(tg.length-i),1));
i++;
if(Math.floor(tg[0]/2)==Math.floor(tg[1]/2) || (Math.abs(tg[0]-tg[1])==2 && Math.floor(tg[0]/4)==Math.floor(tg[1]/4))){i=0;}
}while(i<tg.length);
gw();
}
function gw(){
txt='<style><!--';
txt+='.ptn3{';
txt+='padding:0.6em;';
txt+='background-image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" stroke="'+icr.value.replace(/#/,'%23')+'" stroke-width="0.2" fill="none">';
for(i=0;i<4;i++){txt+='<path d="M '+zhmj(tg[i*2])+' L '+zhmj(tg[i*2+1])+'"></path>';}
txt+='</svg>\');';
txt+='background-size:20px;';
txt+='background-color:'+bcr.value+';';
txt+='}';
txt+='--></style>';
txt+='<br/>コード<p style="background-color:#dddddd;border-radius:10px;padding:0.6em;">'+txt.replace(/</g,'&lt;')+'<br/>&lt;div class="ptn3"&gt;ここに文章を書きます&lt;/div&gt;</p>';
gamen.innerHTML=txt;
}
// ]]></script>
<div class="ptn3"><br /><br />こんな模様になります^^<br /><br /><br /></div>

 

  

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^