taichip’s blog

ブログっぽいブログを書けるように勉強中です

electronを使ってデスクトップにキャラクターを走らせてみた 続

今回は続編です！

前回と同様にelectronを使っていきます。
taichip.hatenablog.com
f:id:taichip:20171128084739p:plain
electronの仕様は

・ウィンドウの背景を透過

・枠の無いウィンドウ

・ウィンドウのリサイズを禁止

・常に最前面

 ・ウィンドウをクリック出来なくする

です。

 

ではhtmlを作る前に素材紹介！

今回は一期一振ちゃんを使っていきます

gifがちょっとひどいのでいつか修正します
f:id:taichip:20171129084703g:plain
index.htmlを書く
 キャラを縦横無尽に走らせたいので、画面の端に来たら反転するようにします。

まずは画像を

<img src="一期一振(右).gif" width="160" height="150"name="moveimage"style="position:absolute;left:0px;top:0px;" >

このように配置します
・widthとheightで大きさを
・position:absoluteを０にして左上に配置します
・moveimageと名称をつけておきます←これがないと、どの画像を指しているかわかりません

コードのなかにjavascriptを書いていきます

<script language="javaScript">

x=0;
y=0;
movementX=2;
movementY=1.5;
windowWidth=window.innerWidth-160;
windowHeight=window.innerHeight-150;
var image=new Array(2);
image[0]="一期一振(左).gif";
image[1]="一期一振(右).gif";
var cnt=0;

・movemomentは画像を動かす値です。
・window.innerでウィンドウのサイズを取得しています。ー（マイナス）の値で引いてるのは画像のサイズです。
次にfunction 関数で処理を行います

x+=movementX;
y+=movementY;

x,y座標に値を入れて動かしていきます。

document.moveimage.style.left=x;
document.moveimage.style.top=y;

f:id:taichip:20171130120129p:plain
documentで反映させています。
これで画像は動きますが画面の端に来たときに反転してくれません。

if((x>windowWidth)||(x<0)){
  movementX = - movementX;
}

 if((y>windowHeight)||(y<0)){
  movementY = - movementY;
}

movemomentの値を反転させることで画像の動きを変えています。

最後にキャラの画像を変えていきます
画像は左向き、右向きだけしかないので

if(movementX<0){
cnt=0;
}else{
cnt=1;
}
document.moveimage.src=image[cnt];

movemomentの値で判断し
f:id:taichip:20171130123432p:plain
documentで反映させています。

ソースコード

<meta charset="UTF-8">
<body onLoad="setInterval('moveimage()',25)">
<!--setInterval("関数名",起動するミリ秒)-->
<img  src="一期一振(右).gif" width="160" height="150"name="moveimage"style="position:absolute;left:0px;top:0px;" >
<script language="javaScript">
x=0;
y=0;
movementX=2;
movementY=1.5;
windowWidth=window.innerWidth-160;
windowHeight=window.innerHeight-150;
var image=new Array(2);
image[0]="一期一振(左).gif";
image[1]="一期一振(右).gif";
var cnt=0;


function moveimage(){
x+=movementX;
y+=movementY;
// 端に来たときだけ処理をおこなう
if((x>windowWidth)||(x<0)){
  movementX = - movementX;
  // ここで値を反転させる


if(movementX<0){
cnt=0;
}else{
cnt=1;
}
  document.moveimage.src=image[cnt];
// 位置を反映させる
}
 if((y>windowHeight)||(y<0)){
  movementY = - movementY;
}
document.moveimage.style.left=x;
document.moveimage.style.top=y;
}
</script>
</body>