# テンプレートを書こう

この左画面を左クリックすれば以下の赤字のスクリプト全部がクリップボードにコピーされるので、右の画面の赤い矢印の右側に貼り付けてください。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>サイコビジョン・スリーディー</title>
    <script type="text/javascript" src="../lib/Vector3D.js"></script>
    <script type="text/javascript" src="../lib/Matrix3D.js"></script>
    <script type="text/javascript" src="../lib/PsychoVision3D.js"></script>
    <script type="text/javascript" src="../lib/Model3D.js"></script>
    <script type="text/javascript" src="../lib/BoneModel3D.js"></script>
    <script type="text/javascript" src="../lib/Sprite2D.js"></script>
    <script type="text/javascript" src="../lib/Material.js"></script>
    <script type="text/javascript" src="models/Jersey.js"></script>
    <script type="text/javascript" src="models/Wood.js"></script>
    <script type="text/javascript">
    var _jersey;
    var _bg = [];
    var _gameState = 0;
    var _count = 0;
    var _jump = false;
    var _sprite;
    var _alphabet = 0;
    var _audio;

    function beginWebGL()
    {
    	_gl.clearColor(0, 0.5, 0, 1.0);
    	_jersey = new Jersey();
    	_jersey._rotate.y = 180;
    	var i;
    	for ( i = 0; i < 17; i++ )
    	{
    		_bg.push(new Wood());
    		_bg[i]._pos.z = 100*i-1500;
    	}
    	_sprite = new Sprite2D(150,150,0,0,64/2048,64/64,"Alphabet.png");
    	_sprite._pos = new Vector3D(10,10,0);
    	_audio = document.getElementById("audioUwa");
    	_audio.load();
    }

    function drawWebGL()
    {
    	var i;
    	for ( i = 0; i < _bg.length; i++ )
    	{
    		if ( _gameState < 2 )
    		{
    			_bg[i]._pos.z += 100 * _elapsed;
    			if ( _bg[i]._pos.z >= 100 )
    			{
    				_bg[i]._pos.y -= 80 * _elapsed;
    			}
    			if ( _bg[i]._pos.z >= 400 )
    			{
    				_bg[i]._pos.y = 0;
    				_bg[i]._pos.z -= _bg.length*100;
    			}
    		}
    		else
    		{
    			_bg[i]._pos.z += (100 + _count/2) * _elapsed;
    			if ( _bg[i]._pos.z >= 100 )
    			{
    				_bg[i]._pos.y -= (80 + _count/4) * _elapsed;
    			}
    			if ( _bg[i]._pos.z >= 400 )
    			{
    				_bg[i]._pos.y = 0;
    				_bg[i]._pos.z -= _bg.length*100;
    				_bg[i]._visible = (Math.random()>(0.1+_count/3000))?true:false;
    			}
    		}
    	}
    	switch ( _gameState )
    	{
    	case 0:
    		_eye = new Vector3D(500,500,-400);
    		break;
    	case 1:
    		_count += 600 * _elapsed;
    		_eye = new Vector3D(500,500,_count-400);
    		if ( _count >= 800 )
    		{
    			_gameState = 2;
    			_count = 0;
    		}
    		break;
    	case 2:
    		_count += 5 * _elapsed;
    		if ( _jump )
    		{
    			_jersey._pos.y += 300 * _elapsed;
    			if ( _jersey._pos.y > 300 )
    			{
    				_jump = false;
    			}
    		}
    		else
    		{
    			_jersey._pos.y -= 300 * _elapsed;
    			if ( _jersey._pos.y <= 0 )
    			{
    				_jersey._pos.y = 0;
    			}
    		}
    		for ( i = 0; i < _bg.length; i++ )
    		{
    			if ( _jersey._pos.y <= 0 && Math.abs(_bg[i]._pos.z-_jersey._pos.z) < 40 && !_bg[i]._visible )
    			{
    				_gameState = 3;
    				_audio.play();
    				break;
    			}
    		}
    		break;
    	case 3:
    		_jersey._pos.y -= 200 * _elapsed;
    		_jersey._pos.z += (100 + _count/2) * _elapsed;
    		if ( _jersey._pos.y < -400 )
    		{
    			_gameState = 4;
    		}
    		break;
    	}
    	_lookAt.y = 160;
    	_mvMatrix.lookAtCamera(_eye,_lookAt,new Vector3D(0,1,0));
    	_jersey.draw();
    	for ( i = 0; i < _bg.length; i++ )
    	{
    		_bg[i].draw();
    	}
    	_sprite.draw();
    }

    function onMouseDown(event)
    {
    	switch ( _gameState )
    	{
    	case 0:
    		_gameState = 1;
    		_count = 0;
    		break;
    	case 4:
    		_gameState = 0;
    		_count = 0;
    		_jersey._pos = new Vector3D(0,0,0);
    		for ( i = 0; i < _bg.length; i++ )
    		{
    			_bg[i]._visible = true;
    		}
    		break;
    	}
    }

    function onMouseUp(event)
    {
    }

    function onMouseMove(event)
    {
    }

    function onKeyDown(event)
    {
    	if ( getKeyCode(event)-65 == _alphabet )
    	{
    		if ( _jersey._pos.y == 0 )
    		{
    			_jump = true;
    		}
    		_alphabet++;
    		if (_alphabet >= 26 )
    		{
    			_alphabet = 0;
    		}
    		_sprite.initUVs(_alphabet*64/2048,0,64/2048,64/64);
    	}
    }

    function onKeyUp(event)
    {
    	_jump = false;
    }
    </script>
    </head>
    <body onload="initWebGL();">

    <canvas id="PsychoVision3D-Canvas" width="728" height="500"></canvas>
    <audio id="audioSample" preload="auto">
    	<source src="sounds/Uwa.ogg" />
    	<source src="sounds/Uwa.mp3" />
    </audio>

    </body>
    </html>

では「制御」→「実行」メニューを実行してください。
タイピングゲーム「Leap」が動作しました！
これは「Leap」で完成したものと同じなので、詳しくは「Leap」で学習して下さい。

### 次へ