【Monaca】EaselJSを使用してスクラッチアプリを作成する

EaselJSを使用してスクラッチアプリを作成してみました。

www.createjs.com

CreateJS | A suite of JavaScript libraries and tools designed for working wit...

https://www.createjs.com/easeljs

もとになったネタはStackOverflowのCreate Eraser in EaselJs – what nextで、eraseの機能を使えばスクラッチぽい動きになるかと思いました。

Stack Overflow

Create Eraser in EaselJs - what next

https://stackoverflow.com/questions/31853911/create-eraser-in-easeljs-what-next/31924384

I want to write Bitmap eraser on easelJS. I think, i'm on half of my road to do this.... Here is demo:http://jsfiddle.net/bordeux/g2Lwvsuv/2/and my code:var example = function() { this.

MonacaでOnsen UI V2 Angular 1 Minimumプロジェクトを作成し、[lib]フォルダにeaseljs.min.jsをアップロードしてください。
スクラッチ部分を削り終えたか判定する処理を組み込めば、通常のアプリに導入できるかもしれませんね・・・
なお、AndroidおよびiOSのMonacaデバッガーで動作確認済みです。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <script src="lib/easeljs.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
  <style>
    .div-canvas {
      width: 100%;
      height: 140px;
      background-color: #99eeff;
    }
    .div-next {
      margin: 20px;
    }
  </style>
  <script>
    "use strict";
    var app = ons.bootstrap("myApp", [
      "onsen"     // onsen ui v2
    ]);
    app.controller("scratchController", ["$scope", function ($scope) {
      $scope.result = 0;  // くじの結果 1:アタリ 0:ハズレ
      $scope.lottery = {
        stage: new createjs.Stage("canvas-scratch"),  // stage生成
        result: null,
        scratch: null,
        width: window.innerWidth,
        height: 140,
        x: 0,
        y: 0,
        listener: null,
        color: createjs.Graphics.getRGB(255, 255, 255, 1)
      };
      // スマホ対応
      createjs.Touch.enable($scope.lottery.stage);
      // くじ結果テキスト
      $scope.lottery.result = $scope.lottery.stage.addChild(new createjs.Text("", "bold 60px serif"));
      $scope.lottery.result.textAlign = "center";
      $scope.lottery.result.textBaseline  = "middle";
      $scope.lottery.result.x = $scope.lottery.width / 2;
      $scope.lottery.result.y = $scope.lottery.height / 2;
      // スクラッチ部分
      $scope.lottery.scratch = $scope.lottery.stage.addChild(new createjs.Shape());
      $scope.lottery.scratch.cache(20, 20, $scope.lottery.width - 40, 100);
      // stage更新
      $scope.lottery.stage.update();

      //******************************
      // スクラッチ設定
      //******************************
      $scope.setResult = function () {
        // くじ結果を決定
        $scope.result = Math.round(Math.random());
        // スクラッチ部分の生成
        $scope.lottery.scratch.graphics.setStrokeStyle($scope.lottery.height, 0)
          .beginStroke(createjs.Graphics.getRGB(192, 192, 192, 1))
          .moveTo(0, $scope.lottery.height / 2)
          .lineTo($scope.lottery.width - 20, $scope.lottery.height / 2);
        $scope.lottery.scratch.updateCache("source-over");
        $scope.lottery.scratch.graphics.clear();
        // くじ結果のテキスト・色を設定する
        $scope.lottery.result.text = ($scope.result == 1) ? "アタリ" : "ハズレ";
        $scope.lottery.result.color = ($scope.result == 1) ? createjs.Graphics.getRGB(255, 0, 0, 1) : createjs.Graphics.getRGB(0, 0, 0, 1);
      // stage更新
        $scope.lottery.stage.update();
      };

      //******************************
      // スクラッチ中
      //******************************
      $scope.erasing = function (e) {
        // スクラッチ部分を削ったように見せる
        $scope.lottery.scratch.graphics.setStrokeStyle(32, 1)
          .beginStroke($scope.lottery.color)
          .moveTo($scope.lottery.x, $scope.lottery.y)
          .lineTo(e.stageX, e.stageY);
        $scope.lottery.scratch.updateCache("destination-out");
        $scope.lottery.scratch.graphics.clear();
        $scope.lottery.x = e.stageX;
        $scope.lottery.y = e.stageY;
        // stage更新
        $scope.lottery.stage.update();
      };

      //******************************
      // スクラッチ終了
      //******************************
      $scope.endErase = function (e) {
        $scope.lottery.stage.off("stagemousemove", $scope.lottery.listener, this);
        e.remove();
      };

      //******************************
      // スクラッチ開始
      //******************************
      $scope.startErase = function (e) {
        $scope.lottery.listener = $scope.lottery.stage.on("stagemousemove", $scope.erasing, this);
        $scope.lottery.stage.on("stagemouseup", $scope.endErase, this);
        $scope.lottery.x = e.stageX - 0.001;
        $scope.lottery.y = e.stageY - 0.001;
        $scope.erasing(e);
      };

      $scope.$on("$destroy", function () {
        createjs.Touch.disable($scope.lottery.stage);
      });

      ons.ready(function () {
        $scope.setResult();
        $scope.lottery.stage.on("stagemousedown", $scope.startErase, this);
      });
    }]);
  </script>
</head>
<body>
  <ons-page ng-controller="scratchController">
    <ons-toolbar>
      <div class="center">スクラッチアプリ</div>
    </ons-toolbar>
    <div class="div-canvas">
      <canvas id="canvas-scratch"></canvas>
    </div>
    <div class="div-next">
      <ons-button modifier="large" ng-click="setResult()">もう一度</ons-button>
    </div>
  </ons-page>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

<!DOCTYPE HTML>

<html>

<head>

<style>

.div-canvas {

width: 100%;

height: 140px;

background-color: #99eeff;

}

.div-next {

margin: 20px;

}

</style>

"use strict";

var app = ons.bootstrap("myApp", [

"onsen" // onsen ui v2

]);

app.controller("scratchController", ["$scope", function ($scope) {

$scope.result = 0; // くじの結果 1:アタリ 0:ハズレ

$scope.lottery = {

stage: new createjs.Stage("canvas-scratch"), // stage生成

result: null,

scratch: null,

width: window.innerWidth,

height: 140,

x: 0,

y: 0,

listener: null,

color: createjs.Graphics.getRGB(255, 255, 255, 1)

};

// スマホ対応

createjs.Touch.enable($scope.lottery.stage);

// くじ結果テキスト

$scope.lottery.result = $scope.lottery.stage.addChild(new createjs.Text("", "bold 60px serif"));

$scope.lottery.result.textAlign = "center";

$scope.lottery.result.textBaseline = "middle";

$scope.lottery.result.x = $scope.lottery.width / 2;

$scope.lottery.result.y = $scope.lottery.height / 2;

// スクラッチ部分

$scope.lottery.scratch = $scope.lottery.stage.addChild(new createjs.Shape());

$scope.lottery.scratch.cache(20, 20, $scope.lottery.width - 40, 100);

// stage更新

$scope.lottery.stage.update();

//******************************

// スクラッチ設定

//******************************

$scope.setResult = function () {

// くじ結果を決定

$scope.result = Math.round(Math.random());

// スクラッチ部分の生成

$scope.lottery.scratch.graphics.setStrokeStyle($scope.lottery.height, 0)

.beginStroke(createjs.Graphics.getRGB(192, 192, 192, 1))

.moveTo(0, $scope.lottery.height / 2)

.lineTo($scope.lottery.width - 20, $scope.lottery.height / 2);

$scope.lottery.scratch.updateCache("source-over");

$scope.lottery.scratch.graphics.clear();

// くじ結果のテキスト・色を設定する

$scope.lottery.result.text = ($scope.result == 1) ? "アタリ" : "ハズレ";

$scope.lottery.result.color = ($scope.result == 1) ? createjs.Graphics.getRGB(255, 0, 0, 1) : createjs.Graphics.getRGB(0, 0, 0, 1);

// stage更新

$scope.lottery.stage.update();

};

//******************************

// スクラッチ中

//******************************

$scope.erasing = function (e) {

// スクラッチ部分を削ったように見せる

$scope.lottery.scratch.graphics.setStrokeStyle(32, 1)

.beginStroke($scope.lottery.color)

.moveTo($scope.lottery.x, $scope.lottery.y)

.lineTo(e.stageX, e.stageY);

$scope.lottery.scratch.updateCache("destination-out");

$scope.lottery.scratch.graphics.clear();

$scope.lottery.x = e.stageX;

$scope.lottery.y = e.stageY;

// stage更新

$scope.lottery.stage.update();

};

//******************************

// スクラッチ終了

//******************************

$scope.endErase = function (e) {

$scope.lottery.stage.off("stagemousemove", $scope.lottery.listener, this);

e.remove();

};

//******************************

// スクラッチ開始

//******************************

$scope.startErase = function (e) {

$scope.lottery.listener = $scope.lottery.stage.on("stagemousemove", $scope.erasing, this);

$scope.lottery.stage.on("stagemouseup", $scope.endErase, this);

$scope.lottery.x = e.stageX - 0.001;

$scope.lottery.y = e.stageY - 0.001;

$scope.erasing(e);

};

$scope.$on("$destroy", function () {

createjs.Touch.disable($scope.lottery.stage);

});

ons.ready(function () {

$scope.setResult();

$scope.lottery.stage.on("stagemousedown", $scope.startErase, this);

});

}]);

</script>

</head>

<body>

<ons-page ng-controller="scratchController">

<ons-toolbar>

<div class="center">スクラッチアプリ</div>

</ons-toolbar>

</div>

<ons-button modifier="large" ng-click="setResult()">もう一度</ons-button>

</div>

</ons-page>

</body>

</html>

Scratchで学ぶプログラミングとアルゴリズムの基本改訂第2版

新品価格
￥2,484から
(2019/4/12 21:00時点)

【Monaca】EaselJSを使用してスクラッチアプリを作成する

【Monaca】Onsen UI V2 ダイアログ内のメッセージをスクロール可能にする

ノジマオンラインで中古のスマホとガラケーを購入した結果・・・

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

【Monaca】EaselJSを使用してスクラッチアプリを作成する

Recommended Posts

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法

【Cordova】ビルド時にgradleの「journal-1.lock」ファイルロックが発生した場合の対処方法

【Cordova】Onsen UIのons-tabを中央に寄せる方法 その２

【Cordova】Onsen UIのons-tabを中央に寄せる方法その２