タッチでウサギがシュートするJavascript。

 ウサギが人参を打ち出すPIXIJSがあったので、それを参考に、Electronでウサギが小さなウサギを発射するアプリを書いてみます。 参考元はココ「Rotate towards mouse and shoot in that direction

セットアップ

 コマンド打ってelectronのプロジェクトを生成します。

npm install -g electron-forge
electron-forge init bunnyShoot
cd bunnyShoot
npm install --save pixi.js

ファイル構成

 今回実装するのは、3ファイル index.html, index.js, app.js あとは、バニーの画像をassetsフォルダの下に置いています。

実装

index.js

 これは、electron-forgeで自動生成されるソース。

import { app, BrowserWindow } from 'electron';

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

index.html

 自動生成されるソースですが、app.jsを読み込むように1行追加

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    bunny!!!
  <script src="app.js"></script>
  </body>
</html>

app.js

ウサギのPIXIJS

import * as PIXI from 'pixi.js'

var renderer = PIXI.autoDetectRenderer(200, 200,{backgroundColor : 0x1099bb});  
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

var texture = PIXI.Texture.fromImage('assets/bunny.png');  
var bulletTex = PIXI.Texture.fromImage('assets/bunny.png');
bulletTex.rotation = Math.PI * 0.5;

var bunny = new PIXI.Sprite(texture);

bunny.anchor.x = 0.5;  
bunny.anchor.y = 0.5;

bunny.position.x = 50;  
bunny.position.y = 50;

var background = new PIXI.Graphics();  
background.beginFill(0x123456);  
background.drawRect(0,0,800,600);  
background.endFill();  
stage.addChild(background);

stage.addChild(bunny);

stage.interactive = true;

stage.on("mousedown", function(e){  
  shoot(bunny.rotation, {
    x: bunny.position.x+Math.cos(bunny.rotation)*20,
    y: bunny.position.y+Math.sin(bunny.rotation)*20
  });
})

var bullets = [];  
var bulletSpeed = 5;

function shoot(rotation, startPosition){  
  var bullet = new PIXI.Sprite(bulletTex);
  bullet.position.x = startPosition.x;
  bullet.position.y = startPosition.y;
  bullet.rotation = rotation;
  bullet.scale.x = 0.5;
  bullet.scale.y = 0.5;
  stage.addChild(bullet);
  bullets.push(bullet);
}

function rotateToPoint(mx, my, px, py){  
  var self = this;
  var dist_Y = my - py;
  var dist_X = mx - px;
  var angle = Math.atan2(dist_Y,dist_X);
  return angle;
}

animate();  
function animate() {  
  requestAnimationFrame(animate);

  bunny.rotation = rotateToPoint(renderer.plugins.interaction.mouse.global.x, renderer.plugins.interaction.mouse.global.y, bunny.position.x, bunny.position.y);

  for(var b=bullets.length-1;b>=0;b--){
    bullets[b].position.x += Math.cos(bullets[b].rotation)*bulletSpeed;
    bullets[b].position.y += Math.sin(bullets[b].rotation)*bulletSpeed;
  }
  renderer.render(stage);
}

動作確認

 これで、このコマンドをうてば、electronが起動します。

electron-forge start