---
# System prepended metadata

title: 'チュートリアル[箱押しゲームを作りましょう]'

---


# チュートリアル[箱押しゲームを作りましょう]
##   目次

> #### Step0　ゲームを作る準備をしよう
> #### Step1　クマと箱の大きさを変更しよう
> #### Step2　箱を止める場所になる白熊を作ろう
> #### Step3　クリックで箱を動かそう
> #### Step4　クリックを終えたとき箱が止まるようにしよう
> #### Step5　箱が停止した場所が白熊の時ゲームクリアを表示しよう
> #### Step6　箱が停止した位置が白熊からどれくらい離れているか測ろう
> #### Step7　箱の移動を邪魔する敵キャラクターを作ろう
> #### Step8　白熊が左右に動くようにしよう


今日作るのは下のようなゲームです。
![](https://i.imgur.com/qCrn8jk.gif)


箱がぴったりと止まるようなゲームを作ってみましょう。

## Step0　ゲームを作る準備をしよう
それではまずは準備されたコードを確認してみてください。以下のようなコードになっていると思います。

```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = 1;
        this.scaleY = 1;
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = 1;
		this.scaleY = 1;
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
            
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                
            });
            
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```

今回もゲームの下にいくつかの関数が用意されています。
これは原点を左下にするためのものです。
コードにはすでにたくさんの変数が定義されています。どのような変数なのか確認してみましょう

画面には1体のクマと箱,長さがランダムに決まる床の3つが表示されています。
![](https://i.imgur.com/dDcC61f.png)


まずは完成品のように箱とクマの大きさを変更できるようにしてみましょう。

## Step1　クマと箱の大きさを変更しよう
最初に箱とクマの大きさを他の変数の値をもとに変わるようにします。
![](https://i.imgur.com/7DMXhQj.png)

まずはクマの大きさを変更します。
サイズを変更するにはscaleX,scaleYを使います。
これに1より大きい値を入れるとクマは大きくなります。
今回は力の大きさfを使って変更していきます
40行目を変えてみましょう。
変更前
```javascript=
        this.scaleX = 1;
        this.scaleY = 1;
```

変更後
```javascript=
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
```
Math.sqrtは√を使うための関数です。
上の画面の場合変数fの力が8650であるためクマが大きくなっています。

次に箱の大きさも変更します。
箱は動摩擦係数myuと質量mを使います。
61行目を変更していきます

変更前
```javascript=
        this.scaleX = 1;
        this.scaleY = 1;
```

変更後
```javascript=
        this.scaleX = Math.sqrt(myu);
        this.scaleY = Math.sqrt(m/10);
```
これで動摩擦係数が大きいほど横幅が、質量が大きいほど縦幅が大きくなっていきます。

これでクマと箱の大きさを変更できました。
```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));//ここに追加
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));//ここに追加
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);//ここに追加
		this.scaleY = Math.sqrt(m/10);//ここに追加
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
            
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                
            });
            
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```

## Step2　箱を止める場所になる白熊を作ろう
次に箱を止める目印になる白熊を作りましょう
![](https://i.imgur.com/LW7k3EJ.png)

白熊のクラスWhiteBearを作ります。
コードでは関数fromFricToEncX,Yを使ってクマの座標を画面左下が原点になるように合わせています。

```javascript=
// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //WhiteBearのx座標
        this.x0 = this.fricx;
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //WhiteBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 5; //WhiteBearの画像
        this.speed = Math.random() * 4 + 3;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	
    }
});
```

それでは白熊を床の上においてみましょう

141行目
```javascript=
    //シロクマ作成
    taro_x = floor_end_x - 200;
    taro_y = floor_end_y + 32;
    taro = new WhiteBear(taro_x, taro_y);
```
floor_end_xにはランダムに決められた床の長さが入っています。

これで白熊が表示されます。

```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});

// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承//ここに追加
{//ここに追加
    initialize: function(x, y) { //newされたタイミングですることを書く//ここに追加
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化//ここに追加
        this.image = game.assets['images/chara1.gif'];//ここに追加
        this.fricx = x; //WhiteBearのx座標//ここに追加
        this.x0 = this.fricx;//ここに追加
        this.x = fromFricToEncX(this.fricx);//ここに追加
        this.fricy = y; //WhiteBearのy座標//ここに追加
        this.y = fromFricToEncY(this.fricy);//ここに追加
        this.frame = 5; //WhiteBearの画像//ここに追加
        this.speed = Math.random() * 4 + 3;//ここに追加
        game.rootScene.addChild(this);//ここに追加
    },//ここに追加
    //フレームが更新されるごとにすることを書く//ここに追加
    onenterframe: function() {//ここに追加
    	
    }//ここに追加
});//ここに追加


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);
		this.scaleY = Math.sqrt(m/10);
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //シロクマ作成
        taro_x = floor_end_x - 200;//ここに追加
        taro_y = floor_end_y + 32;//ここに追加
        taro = new WhiteBear(taro_x, taro_y);//ここに追加
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
            
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                
            });
            
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```

## Step3　クリックで箱を動かそう
それでは画面をクリックしたときに箱が動くようにしましょう。
![](https://i.imgur.com/iI0ARfo.gif)

箱を動かすときの速度を計測するために摩擦運動を使います。
<details>
<summary>摩擦運動についてはこちらを押してください</summary>

## 摩擦運動とは
動き出してからの摩擦力を動摩擦力といいます。
物体が動摩擦力を受けながら運動しているときの運動方程式や加速度について考えてみます
今、水平なあらい面の上に物体が置かれています。
![](https://i.imgur.com/yoc0V2O.png)
右向きに力を加えて物体を動かします。物体が動くということはこの力は動摩擦力より大きいということです。この力は一瞬だけ加えるのではなく、物体が動いている最中も一定の力で加え続けます。物理の問題を解く上で注意しなければならないのは、力を一瞬だけ加えるのか、ずっと加え続けるのかということです。今はずっと加え続けます。
![](https://i.imgur.com/s8MwbNI.png)
物体の質量を m 、動摩擦係数を μ' 、加える力を F 、垂直抗力を N 、物体の加速度を a とします。
![](https://i.imgur.com/viRPBVh.png)
垂直抗力というのは押し付ける力のことですから、
N = mg
垂直抗力というのは押し付ける力のことですから、

　　　　N = mg

よって、動摩擦力は、

　　　　μ' × N = μ'mg

この力は物体の動きを妨害する方向にはたらきます。よって、物体に作用する合力は、（右向きを正として）

　　　　F - μ'mg

運動方程式を立てると、

　　　　ma = F - μ'mg

よって、加速度は、

　　　　a = Fm - μ'g

もし F = μ'mg であれば、a = 0 になります。加速度が 0 、つまり、物体は等速で運動します。

</details>

まずはタッチしているときの処理を行いましょう

178行目のコードを以下のように変更します

変更前
```javascript=
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
            
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                
            });
            
        };
```

変更後
```javascript=
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
                if(throwflg == 0) {
                	box.t = 0;
                    box.m = m0;
                    box.g = g;
                    box.myu = myu0;
                    touchflg = 1;
                }
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                
            });
            if (touchflg == 1) {
                box.ef = f0;
            }
        };
```
これでゲームを開始するときにランダムに決めていた値を箱の変数に与えてあげます。


それでは箱のクラスに運動の処理を追加しましょう。
107行目に追加しましょう。

変更前
```javascript=
//フレームが更新されるごとにすることを書く
    onenterframe: function() {
    
    }
```

変更後
```javascript=
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
	this.t = this.t + 1 / 10;
        this.friction = this.m * g * this.myu;
        this.f = this.ef - this.friction;
        this.a = this.f / this.m;
        
        this.vx = this.v0x + this.a * this.t;  //v = v0 + at;
        
        if(this.vx < 0) {
            this.vx = 0;
        }
        
        this.fricx = this.s0x + (this.v0x * this.t + 1 / 2 * this.a * this.t * this.t);
        this.x = fromFricToEncX(this.fricx);
    }
```

ここではまず動摩擦力this.frictionを求めて
そこから箱を押している力を求めて加速度を求めています。
式はよく見ると単純なので少しづつ見ていきましょう。

```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});

// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //WhiteBearのx座標
        this.x0 = this.fricx;
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //WhiteBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 5; //WhiteBearの画像
        this.speed = Math.random() * 4 + 3;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	
    }
});


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);
		this.scaleY = Math.sqrt(m/10);
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
        this.friction = this.m * g * this.myu;//ここに追加
        this.f = this.ef - this.friction;//ここに追加
        this.a = this.f / this.m;//ここに追加
        
        this.vx = this.v0x + this.a * this.t;  //v = v0 + at;//ここに追加
        
        if(this.vx < 0) {//ここに追加
            this.vx = 0;//ここに追加
        }//ここに追加
        
        this.fricx = this.s0x + (this.v0x * this.t + 1 / 2 * this.a * this.t * this.t);//ここに追加
        this.x = fromFricToEncX(this.fricx);//ここに追加
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //シロクマ作成
        taro_x = floor_end_x - 200;
        taro_y = floor_end_y + 32;
        taro = new WhiteBear(taro_x, taro_y);
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
                if(throwflg == 0) {//ここに追加
                	box.t = 0;//ここに追加
                    box.m = m0;//ここに追加
                    box.g = g;//ここに追加
                    box.myu = myu0;//ここに追加
                    touchflg = 1;//ここに追加
                }//ここに追加
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                
            });
            if (touchflg == 1) {//ここに追加
                box.ef = f0;//ここに追加
            }//ここに追加
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```

これで箱の動きができました。

"力:"の値が大きく、"動摩擦係数:"、"質量:"の大きさが小さいほど箱がよく滑るのを確認してみましょう。

## Step4　クリックを終えたとき箱が止まるようにしよう

次にマウスのボタンを離したら箱が止まっていくようにします。

![](https://i.imgur.com/7FLNkix.gif)

ボール投げの時のようにtouchendの部分を変更していきます

変更前
```javascript=
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                
            });
```

変更後
```javascript=
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                if(throwflg == 0) {
                    box.s0x = box.fricx;
                    box.v0x = box.vx;
                    box.t = 0;
                    box.ef = 0//ここに注目
                    touchflg = 0;
                    throwflg = 1;
                }
            });
```

これでくまがBoxに与える力はゼロになり動摩擦力がかかるようになります。
ゲームではそのまま左に移動してしまいますが、現実で左に移動せず速度が0になったときにそのまま箱は止まります。
動摩擦係数と質量が大きいほど箱は止まりやすいのを確認してみましょう。

```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});

// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //WhiteBearのx座標
        this.x0 = this.fricx;
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //WhiteBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 5; //WhiteBearの画像
        this.speed = Math.random() * 4 + 3;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	
    }
});


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);
		this.scaleY = Math.sqrt(m/10);
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
        this.friction = this.m * g * this.myu;
        this.f = this.ef - this.friction;
        this.a = this.f / this.m;
        
        this.vx = this.v0x + this.a * this.t;  //v = v0 + at;
        
        if(this.vx < 0) {
            this.vx = 0;
        }
        
        this.fricx = this.s0x + (this.v0x * this.t + 1 / 2 * this.a * this.t * this.t);
        this.x = fromFricToEncX(this.fricx);
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //シロクマ作成
        taro_x = floor_end_x - 200;
        taro_y = floor_end_y + 32;
        taro = new WhiteBear(taro_x, taro_y);
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
                if(throwflg == 0) {
                	box.t = 0;
                    box.m = m0;
                    box.g = g;
                    box.myu = myu0;
                    touchflg = 1;
                }
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                if(throwflg == 0) {//ここに追加
                    box.s0x = box.fricx;//ここに追加
                    box.v0x = box.vx;//ここに追加
                    box.t = 0;//ここに追加
                    box.ef = 0;//ここに追加
                    touchflg = 0;//ここに追加
                    throwflg = 1;//ここに追加
                }//ここに追加
            });//ここに追加
            if (touchflg == 1) {//ここに追加
                box.ef = f0;//ここに追加
            }//ここに追加
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```
箱の動きはできましたが、茶ぐまは移動しません。ぜひ箱の動きにあわせて茶ぐまも動くようにしてみましょう。
## Step5　箱が停止した場所が白熊の時ゲームクリアを表示しよう
次に白熊の位置で箱が止まったときゲームクリアになるようにします。

![](https://i.imgur.com/7Jr5itH.gif)

箱に速度vxが0より小さいときに白熊との位置を比較する処理を追加しましょう。
今回は30以下の時にします。
下のように書くことができます。
```
if(Math.abs(比較するものA.x - 比較するものB.x) <= 30) {
                    // 行いたい処理
                } 
```
Math.abs()は絶対値を求めるときに使うものです。これを使えば負の数を正の数に変更できます。

114行目です。
変更前
```javascript=
        if(this.vx < 0) {
            this.vx = 0;
        }
```

変更後
```javascript=
        if(this.vx < 0) {
            this.vx = 0;
            if(throwflg == 1) {
                
                if(Math.abs(this.x - taro.x) <= 30) {
                    
                    // クリア画面を出したいときは以下の記述
                    game.endScene = new SplashScene();
                    game.endScene.image = game.assets['images/clear.png'];
                    game.end();
                    game.stop();
                } else {
                    
                    // ゲームオーバー画面を出したいときは以下の記述
					jiro.frame = 3;
                    game.end();
                    game.stop();
                }
            }
        }
```

箱の距離と白熊の距離から
2つの物体の間の距離を求めて、絶対値にして30より小さいかを判定します。

```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});

// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //WhiteBearのx座標
        this.x0 = this.fricx;
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //WhiteBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 5; //WhiteBearの画像
        this.speed = Math.random() * 4 + 3;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	
    }
});


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);
		this.scaleY = Math.sqrt(m/10);
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
        this.friction = this.m * g * this.myu;
        this.f = this.ef - this.friction;
        this.a = this.f / this.m;
        
        this.vx = this.v0x + this.a * this.t;  //v = v0 + at;
        
        if(this.vx < 0) {
            this.vx = 0;
            if(throwflg == 1) {
                
                if(Math.abs(this.x - taro.x) <= 30) {//ここに追加
                    
                    // クリア画面を出したいときは以下の記述
                    game.endScene = new SplashScene();//ここに追加
                    game.endScene.image = game.assets['images/clear.png'];//ここに追加
                    game.end();//ここに追加
                    game.stop();//ここに追加
                } else {//ここに追加
                    
                    // ゲームオーバー画面を出したいときは以下の記述//ここに追加
					jiro.frame = 3;//ここに追加
                    game.end();//ここに追加
                    game.stop();//ここに追加
                }//ここに追加
            }//ここに追加
        }
        
        this.fricx = this.s0x + (this.v0x * this.t + 1 / 2 * this.a * this.t * this.t);
        this.x = fromFricToEncX(this.fricx);
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //シロクマ作成
        taro_x = floor_end_x - 200;
        taro_y = floor_end_y + 32;
        taro = new WhiteBear(taro_x, taro_y);
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
                if(throwflg == 0) {
                	box.t = 0;
                    box.m = m0;
                    box.g = g;
                    box.myu = myu0;
                    touchflg = 1;
                }
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                if(throwflg == 0) {
                	box.s0x = box.fricx;
                	box.v0x = box.vx;
                	box.t = 0;
                    box.ef = 0;
                    touchflg = 0;
                    throwflg = 1;
                }
            });
            if (touchflg == 1) {
                box.ef = f0;
            }
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```

## Step6　箱が停止した位置が白熊からどれくらい離れているか測ろう
箱と白熊の位置がどのくらい離れているのか表示させましょう。
![](https://i.imgur.com/Rt2lZeQ.png)

やり方は簡単で箱のxと白熊のxを引き算するだけです。
118行目

変更前
```javascript=
if(Math.abs(this.x - taro.x) <= 30) {
                    
                    // クリア画面を出したいときは以下の記述
                    game.endScene = new SplashScene();
                    game.endScene.image = game.assets['images/clear.png'];
                    game.end();
                    game.stop();
                } else {
                    
                    // ゲームオーバー画面を出したいときは以下の記述
					jiro.frame = 3;
                    game.end();
                    game.stop();
                }
```

変更後
```javascript=
                if(Math.abs(this.x - taro.x) <= 30) {
                    
                    // クリア画面を出したいときは以下の記述
                    game.endScene = new SplashScene();
                    game.endScene.image = game.assets['images/clear.png'];
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");
                    game.stop();
                } else {
                    
                    // ゲームオーバー画面を出したいときは以下の記述
					jiro.frame = 3;
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");
                    game.stop();
                }
```
これで画面にどのくらい離れているのかが表示されました。
これでゲームの基礎は完成です。

```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});

// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //WhiteBearのx座標
        this.x0 = this.fricx;
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //WhiteBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 5; //WhiteBearの画像
        this.speed = Math.random() * 4 + 3;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	
    }
});


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);
		this.scaleY = Math.sqrt(m/10);
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
        this.friction = this.m * g * this.myu;
        this.f = this.ef - this.friction;
        this.a = this.f / this.m;
        
        this.vx = this.v0x + this.a * this.t;  //v = v0 + at;
        
        if(this.vx < 0) {
            this.vx = 0;
            if(throwflg == 1) {
                
                if(Math.abs(this.x - taro.x) <= 30) {
                    
                    // クリア画面を出したいときは以下の記述
                    game.endScene = new SplashScene();
                    game.endScene.image = game.assets['images/clear.png'];
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");//ここに追加
                    game.stop();
                } else {
                    
                    // ゲームオーバー画面を出したいときは以下の記述
					jiro.frame = 3;
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");//ここに追加
                    game.stop();
                }
            }
        }
        
        this.fricx = this.s0x + (this.v0x * this.t + 1 / 2 * this.a * this.t * this.t);
        this.x = fromFricToEncX(this.fricx);
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //シロクマ作成
        taro_x = floor_end_x - 200;
        taro_y = floor_end_y + 32;
        taro = new WhiteBear(taro_x, taro_y);
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
                if(throwflg == 0) {
                    box.t = 0;
                    box.m = m0;
                    box.g = g;
                    box.myu = myu0;
                    touchflg = 1;
                }
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                if(throwflg == 0) {
                    box.s0x = box.fricx;
                    box.v0x = box.vx;
                    box.t = 0;
                    box.ef = 0;
                    touchflg = 0;
                    throwflg = 1;
                }
            });
            if (touchflg == 1) {
                box.ef = f0;
            }
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```

## Step7　箱の移動を邪魔する敵キャラクターを作ろう
それでは次に画面を上下に動くお邪魔キャラを作りましょう。
![](https://i.imgur.com/A59tlsw.png)


まずは女の子ぐまを出すクラスを作成します。

77行目あたりに書きましょう
```javascript=
// ここで自作クラスGirlBearを作る
GirlBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //GirlBearのx座標
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //GirlBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 10; //GirlBearの画像
        this.speed = Math.random() * 10 + 3;
        this.scaleX = -1;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	this.fricy = this.fricy + this.speed;
    	if(this.fricy > 310 || this.fricy < 32) {
    		this.speed = this.speed * -1;
    	}
    	this.y = fromFricToEncY(this.fricy);
    	if(this.within(box)) {
    		this.frame = 13;
    		jiro.frame = 3;
    		game.end();
    		alert("女の子クマにあたりました!");
            game.stop();
    	}
    }
});
```
上下の動き型は昨日のボール投げの時と同じです。箱に当たったときにゲームオーバーになる処理も追加します。

後はこのクラスを呼び出します。
209行目に書きましょう。

```javascript=
        //女の子クマ作成
        hanako_x = taro_x - 100;
        hanako_y = Math.random() * 250 + 32;
        hanako = new GirlBear(hanako_x, hanako_y);
```
これで女の子ぐまを作ることができました。

```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});

// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //WhiteBearのx座標
        this.x0 = this.fricx;
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //WhiteBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 5; //WhiteBearの画像
        this.speed = Math.random() * 4 + 3;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	
    }
});


// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4;
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

//↓ここに追加
// ここで自作クラスGirlBearを作る
GirlBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //GirlBearのx座標
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //GirlBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 10; //GirlBearの画像
        this.speed = Math.random() * 10 + 3;
        this.scaleX = -1;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	this.fricy = this.fricy + this.speed;
    	if(this.fricy > 310 || this.fricy < 32) {
    		this.speed = this.speed * -1;
    	}
    	this.y = fromFricToEncY(this.fricy);
    	if(this.within(box)) {
    		this.frame = 13;
    		jiro.frame = 3;
    		game.end();
    		alert("女の子クマにあたりました!");
            game.stop();
    	}
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);
		this.scaleY = Math.sqrt(m/10);
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
        this.friction = this.m * g * this.myu;
        this.f = this.ef - this.friction;
        this.a = this.f / this.m;
        
        this.vx = this.v0x + this.a * this.t;  //v = v0 + at;
        
        if(this.vx < 0) {
            this.vx = 0;
            if(throwflg == 1) {
                
                if(Math.abs(this.x - taro.x) <= 30) {
                    
                    // クリア画面を出したいときは以下の記述
                    game.endScene = new SplashScene();
                    game.endScene.image = game.assets['images/clear.png'];
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");
                    game.stop();
                } else {
                    
                    // ゲームオーバー画面を出したいときは以下の記述
					jiro.frame = 3;
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");
                    game.stop();
                }
            }
        }
        
        this.fricx = this.s0x + (this.v0x * this.t + 1 / 2 * this.a * this.t * this.t);
        this.x = fromFricToEncX(this.fricx);
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //シロクマ作成
        taro_x = floor_end_x - 200;
        taro_y = floor_end_y + 32;
        taro = new WhiteBear(taro_x, taro_y);
        
        //女の子クマ作成
        hanako_x = taro_x - 100;//ここに追加
        hanako_y = Math.random() * 250 + 32;//ここに追加
        hanako = new GirlBear(hanako_x, hanako_y);//ここに追加
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
                if(throwflg == 0) {
                	box.t = 0;
                    box.m = m0;
                    box.g = g;
                    box.myu = myu0;
                    touchflg = 1;
                }
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                if(throwflg == 0) {
                	box.s0x = box.fricx;
                	box.v0x = box.vx;
                	box.t = 0;
                    box.ef = 0;
                    touchflg = 0;
                    throwflg = 1;
                }
            });
            if (touchflg == 1) {
                box.ef = f0;
            }
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```

## Step8　白熊が左右に動くようにしよう
最後に白熊を左右に動かしてみましょう。
![](https://i.imgur.com/iP0sT9H.gif)

白熊のクラスで動かす処理を追加します。

49行目を変更します。

変更前

```javascript=
        //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    
    }
```
変更後

```javascript=
//フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	this.fricx = this.fricx + this.speed;
    	if(this.fricx < this.x0 || this.fricx > this.x0 + 100) {
    		this.speed = this.speed * -1;
    	}
    	this.x = fromFricToEncX(this.fricx);
    }
```

これでゲームの完成です。
後は敵の動きを自由にしてみたり力の大きさを大きくしてみたりしましょう。
```javascript=
enchant();

var GameWidth = 640;
var GameHeight = 320;
var floor_end_x;
var throwflg;  //ボールが投げられたかどうかを確認する変数
var BearWidth;

var g;
var m0;
var f0;
var myu0;


// ここで自作クラスBackGroundをつくる
BackGround = Class.create(Sprite,
{
   	initialize: function(end_x, end_y) { //newされたタイミングですることを書く
		Sprite.call(this, 640, 320); //Spriteオブジェクトを初期化
        
		var surface = new Surface(640, 320);
		surface.context.moveTo(0, 310);
		surface.context.lineTo(end_x, 310);
		surface.context.stroke();
		
		this.image = surface;
		this.moveTo(0, 0);
		game.rootScene.addChild(this);
	
	},
});


// ここで自作クラスWhiteBearをつくる
WhiteBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //WhiteBearのx座標
        this.x0 = this.fricx;
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //WhiteBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 5; //WhiteBearの画像
        this.speed = Math.random() * 4 + 3;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	this.fricx = this.fricx + this.speed;//ここに追加
    	if(this.fricx < this.x0 || this.fricx > this.x0 + 100) {//ここに追加
    		this.speed = this.speed * -1;//ここに追加
    	}//ここに追加
    	this.x = fromFricToEncX(this.fricx);//ここに追加
    }
});

// ここで自作クラスBearをつくる
Bear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(f) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.scaleX = Math.sqrt(Math.sqrt(f / 98));
        this.scaleY = Math.sqrt(Math.sqrt(f / 98));
        this.fricx = -18 + 10 * this.scaleX; //Bearのx座標
        this.x = fromFricToEncX(this.fricx);
        BearWidth = 32 * this.scaleX - 17;
        this.fricy = 20 + 15 * this.scaleY;
        this.y = fromFricToEncY(this.fricy);
        this.frame = 4; //WhiteBearの画像
        game.rootScene.addChild(this);
    },
    
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    }
});

// ここで自作クラスGirlBearを作る
GirlBear = Class.create(Sprite, // Spriteクラスを継承
{
    initialize: function(x, y) { //newされたタイミングですることを書く
        Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化
        this.image = game.assets['images/chara1.gif'];
        this.fricx = x; //GirlBearのx座標
        this.x = fromFricToEncX(this.fricx);
        this.fricy = y; //GirlBearのy座標
        this.y = fromFricToEncY(this.fricy);
        this.frame = 10; //GirlBearの画像
        this.speed = Math.random() * 10 + 3;
        this.scaleX = -1;
        game.rootScene.addChild(this);
    },
    //フレームが更新されるごとにすることを書く
    onenterframe: function() {
    	this.fricy = this.fricy + this.speed;
    	if(this.fricy > 310 || this.fricy < 32) {
    		this.speed = this.speed * -1;
    	}
    	this.y = fromFricToEncY(this.fricy);
    	if(this.within(box)) {
    		this.frame = 13;
    		jiro.frame = 3;
    		game.end();
    		alert("女の子クマにあたりました!");
            game.stop();
    	}
    }
});

// ここで自作クラスBoxをつくる
Box = Class.create(Sprite,
{
	initialize: function(myu, m) {
		Sprite.call(this, 32, 32);
		this.scaleX = Math.sqrt(myu);
		this.scaleY = Math.sqrt(m/10);
		/* Boxスプライトに連結*/
		this.image = game.assets['images/block.png'];
		this.fricx = BearWidth + 16 * (this.scaleX - 1);
		this.s0x = this.fricx;
		this.x = fromFricToEncX(this.fricx);
		this.fricy = 15 * this.scaleY + 20;
		this.s0y = this.fricy;
		this.y = fromFricToEncY(this.fricy);
		this.g = 0; //Boxの重力
		this.v0x = 0; //Boxのx座標の速度
		this.v0y = 0; //Boxのy座標の速度
		this.vx = 0; //Boxのx座標の速度
		this.vy = 0; //Boxのy座標の速度
		this.m = m; //Boxの質量
		this.myu = 0; //Boxの動摩擦係数
		this.friction = 0; //Boxの動摩擦力
		this.ef = 0; //くまがBoxに与える力
		this.f = 0; //Boxにかかる合力
		this.t = 0;
		game.rootScene.addChild(this);
	},
	//フレームが更新されるごとにすることを書く
	onenterframe: function() {
		this.t = this.t + 1 / 10;
        this.friction = this.m * g * this.myu;
        this.f = this.ef - this.friction;
        this.a = this.f / this.m;
        
        this.vx = this.v0x + this.a * this.t;  //v = v0 + at;
        
        if(this.vx < 0) {
            
            this.vx = 0;
            if(throwflg == 1) {
                
                if(Math.abs(this.x - taro.x) <= 30) {
                    
                    // クリア画面を出したいときは以下の記述
                    game.endScene = new SplashScene();
                    game.endScene.image = game.assets['images/clear.png'];
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");
                    game.stop();
                } else {
                    
                    // ゲームオーバー画面を出したいときは以下の記述
					jiro.frame = 3;
                    game.end();
                    alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");
                    game.stop();
                }
            }
        }
        
        this.fricx = this.s0x + (this.v0x * this.t + 1 / 2 * this.a * this.t * this.t);
        this.x = fromFricToEncX(this.fricx);
        
        if(this.x >= floor_end_x) {
            
            // ゲームオーバー画面を出したいときは以下の記述
            jiro.frame = 3;
            alert("シロクマとの距離は" + Math.abs(this.x - taro.x) + "でした!");
            game.end();
            game.stop();
            
        }
    }
});

window.onload = function() {
    
    //window.onloadの最初に書くおまじない．　GameWidthは320(ゲームの幅)，GameHeightは640(ゲームの高さ)になる．
    game = new Game(GameWidth, GameHeight);
    
    //ゲーム内で使われる画像を最初に設定する．
	game.preload('images/chara1.gif','images/clear.png', 'images/block.png');
	game.onload = function() {
        
        //いろいろな変数定義
        
        floor_end_x = Math.floor(Math.random() * 240) + 550; //床の終点のx座標
        floor_end_y = 0; //床の終点のy座標
        m0 = Math.floor(Math.random() * 19) * 5 + 10; //箱の質量
        g = 9.8; //設定される重力加速度
        myu0 = Math.floor(Math.random() * 10 + 1); //設定される動摩擦係数
        f0 = Math.floor(myu0 * m0 * g * (Math.random() + 1));  //設定される力
        var touchflg = 0; //touchflgにはマウスがクリックされているかどうかが入っている．0ならクリックされていない．1ならクリックされている．
        throwflg = 0; //throwflgにはボールが投げられた後かどうかが入っている．0なら投げられていない．1なら投げられている．
        var touchFrame = 0; //画面をタッチし始めてからのフレーム数を0にする．
        
        //床作成
        floor = new BackGround(floor_end_x, floor_end_y);
        
        //クマ作成
        jiro = new Bear(f0);
        
        //箱作成
        box = new Box(myu0, m0);
        
        //シロクマ作成
        taro_x = floor_end_x - 200;
        taro_y = floor_end_y + 32;
        taro = new WhiteBear(taro_x, taro_y);
        
        //女の子クマ作成
        hanako_x = taro_x - 100;
        hanako_y = Math.random() * 250 + 32;
        hanako = new GirlBear(hanako_x, hanako_y);
        
        //m0Label作成
        m0Label = new Label("質量:" + m0);
        m0Label.x = 5;
        m0Label.y = 5;
        game.rootScene.addChild(m0Label);
        
        //g0Label作成
        g0Label = new Label("重力加速度:" + g);
        g0Label.x = 5;
        g0Label.y = 20;
        game.rootScene.addChild(g0Label);
        
        //myu0Label作成
        myu0Label = new Label("動摩擦係数:" + myu0);
        myu0Label.x = 5;
        myu0Label.y = 35;
        game.rootScene.addChild(myu0Label);
        
        //f0Label作成
        f0Label = new Label("力:" + f0);
        f0Label.x = 5;
        f0Label.y = 50;
        game.rootScene.addChild(f0Label);
        
        //s0Label作成
        s0Label = new Label("目標位置:" + (floor_end_x - 200));
        s0Label.x = 5;
        s0Label.y = 65;
        game.rootScene.addChild(f0Label);
        
        game.onenterframe = function() {
            
            game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(e) {
                if(throwflg == 0) {
                	box.t = 0;
                    box.m = m0;
                    box.g = g;
                    box.myu = myu0;
                    touchflg = 1;
                }
            });
            //ドラッグ終了時
            game.rootScene.addEventListener(enchant.Event.TOUCH_END, function(e) {
                if(throwflg == 0) {
                	box.s0x = box.fricx;
                	box.v0x = box.vx;
                	box.t = 0;
                    box.ef = 0;
                    touchflg = 0;
                    throwflg = 1;
                }
            });
            if (touchflg == 1) {
                box.ef = f0;
            }
        };
    }
    game.start();
    //game.debug();

}

fromFricToEncX = function(fromX) {
	toX = fromX;
	return toX;
}

fromFricToEncY = function(fromY) {
	toY = GameHeight - fromY - 10;
	return toY;
}

```