アットウィキロゴ
チュートリアル
アットウィキロゴ
チュートリアル
ページ一覧

カードゲーム サンプル

このゲームは画像をタップするとスペードまたはジョーカーを表示します。
スペードが表示されたらスコアがカウントされてもう一度挑戦することができます。
ジョーカーが表示されたらGAME OVERです。


１．enchant.jsを実行する。

１−１．jsフォルダ配下に「main.js」を作成し、以下のとおり編集してください。

  1. /* ================================
  2.  * メイン処理系
  3.  ==================================*/
  4.  
  5. enchant();
  6.  
  7. // ゲーム画面の幅と高さ
  8. var DISPLAY_WIDTH  = 640;
  9. var DISPLAY_HEIGHT = 960;
  10.  
  11. window.onload = function(){
  12. };

１―２．index.htmlの<head>〜</head>に以下を追加してください。

<script src="./js/main.js"></script>

編集後のindex.htmlは以下のとおり 
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>Card Game</title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. 		<script src="./js/build/enchant.js"></script>
  8. 		<script src="./js/main.js"></script>
  9. 	</head>
  10. </html>


２．ゲームオブジェクトの作成、及び画像ファイルのプリロードを行う。

２−１．以下の画像ファイルを使用します。
            画像ファイルをダウンロードしてimagesフォルダに配置してください。

背景画像
カード
各種ボタン

２―２．main.jsのwindow.onload時の処理に以下を追加してください。

window.onload = function(){
	// ゲームオブジェクトを作成
	core = new Core(DISPLAY_WIDTH, DISPLAY_HEIGHT);
 
	// ゲームで使用する画像ファイルを読み込む
	core.preload(
		"images/background.png",
		"images/card.png",
		"images/btn_start.png",
		"images/btn_retry.png",
		"images/btn_title.png"
	);
 
	// ファイルのプリロードが完了したときに実行される関数
	core.onload = function(){
 
		// コンソールに文字を書き出す
		console.log("Hello world!!");
 
	};
 
	// ゲームスタート
	core.start();
};


編集後のmain.jsは以下のとおり 
  1. /* ================================
  2.  * メイン処理系
  3.  ==================================*/
  4.  
  5. enchant();
  6.  
  7. // ゲーム画面の幅と高さ
  8. var DISPLAY_WIDTH  = 640;
  9. var DISPLAY_HEIGHT = 960;
  10.  
  11. window.onload = function(){
  12.  
  13. 	// ゲームオブジェクトを作成
  14. 	core = new Core(DISPLAY_WIDTH, DISPLAY_HEIGHT);
  15.  
  16. 	// ゲームで使用する画像ファイルを読み込む
  17. 	core.preload(
  18. 		"images/background.png",
  19. 		"images/card.png",
  20. 		"images/btn_start.png",
  21. 		"images/btn_retry.png",
  22. 		"images/btn_title.png"
  23. 	);
  24.  
  25. 	// ファイルのプリロードが完了したときに実行される関数
  26. 	core.onload = function(){
  27.  
  28. 		// コンソールに文字を書き出す
  29. 		console.log("Hello world!!");
  30.  
  31. 	};
  32.  
  33. 	// ゲームスタート
  34. 	core.start();
  35.  
  36. };

３．ゲームシーンを準備する。

３−１．jsフォルダ配下に「scene_game.js」を作成し、以下のとおり編集してください。

  1. /* ================================
  2.  * ゲーム
  3.  ==================================*/
  4.  
  5. //==========
  6. // ゲームシーンの開始
  7. function startSceneGame(){
  8. 	console.log("Game");
  9. };

３−２．main.jsのcore.onload処理内に以下を追加してください。

// Gameシーンへ
startSceneGame();

編集後のmain.jsは以下のとおり 
  1. /* ================================
  2.  * メイン処理系
  3.  ==================================*/
  4.  
  5. enchant();
  6.  
  7. // ゲーム画面の幅と高さ
  8. var DISPLAY_WIDTH  = 640;
  9. var DISPLAY_HEIGHT = 960;
  10.  
  11. window.onload = function(){
  12.  
  13. 	// ゲームオブジェクトを作成
  14. 	core = new Core(DISPLAY_WIDTH, DISPLAY_HEIGHT);
  15.  
  16. 	// ゲームで使用する画像ファイルを読み込む
  17. 	core.preload(
  18. 		"images/background.png",
  19. 		"images/card.png",
  20. 		"images/btn_start.png",
  21. 		"images/btn_retry.png",
  22. 		"images/btn_title.png"
  23. 	);
  24.  
  25. 	// ファイルのプリロードが完了したときに実行される関数
  26. 	core.onload = function(){
  27.  
  28. 		// コンソールに文字を書き出す
  29. 		console.log("Hello world!!");
  30.  
  31. 		// Gameシーンへ
  32. 		startSceneGame();
  33.  
  34. 	};
  35.  
  36. 	// ゲームスタート
  37. 	core.start();
  38.  
  39. };

３―３．index.htmlの<head>〜</head>に以下を追加してください。

<script src="./js/scene_game.js"></script>

編集後のindex.htmlは以下のとおり 
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title>Card Game</title>
  6. 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. 		<script src="./js/build/enchant.js"></script>
  8. 		<script src="./js/main.js"></script>
  9. 		<script src="./js/scene_game.js"></script>
  10. 	</head>
  11. </html>

４．ゲームシーンに背景画像を配置する。

４−１．scene_game.jsのstartSceneGame関数内に以下を追加してください。

var scene = new Scene();
 
// 背景画像
var background = new Sprite(DISPLAY_WIDTH, DISPLAY_HEIGHT);
background.image = core.assets["images/background.png"];
scene.addChild(background);
 
core.replaceScene(scene);

編集後のscene_game.jsは以下のとおり 
  1. /* ================================
  2.  * ゲーム
  3.  ==================================*/
  4.  
  5. //==========
  6. // ゲームシーンの開始
  7. function startSceneGame(){
  8. 	console.log("Game");
  9.  
  10. 	var scene = new Scene();
  11.  
  12. 	// 背景画像
  13. 	var background = new Sprite(DISPLAY_WIDTH, DISPLAY_HEIGHT);
  14. 	background.image = core.assets["images/background.png"];
  15. 	scene.addChild(background);
  16.  
  17. 	core.replaceScene(scene);
  18. };

４−２．実行して背景画像が表示されることを確認してください。



５．画像を配置する。

５−１．scene_game.jsのstartSceneGame関数内に以下を追加してください。

// カード
myCard = new Sprite(200, 300);
myCard.image = core.assets["images/card.png"];
myCard.x = DISPLAY_WIDTH * 0.5 - myCard.width * 0.5;
myCard.y = DISPLAY_HEIGHT * 0.5 - myCard.height * 0.5;
scene.addChild(myCard);

編集後のscene_game.jsは以下のとおり 
  1. /* ================================
  2.  * ゲーム
  3.  ==================================*/
  4.  
  5. //==========
  6. // ゲームシーンの開始
  7. function startSceneGame(){
  8. 	console.log("Game");
  9.  
  10. 	var scene = new Scene();
  11.  
  12. 	// 背景画像
  13. 	var background = new Sprite(DISPLAY_WIDTH, DISPLAY_HEIGHT);
  14. 	background.image = core.assets["images/background.png"];
  15. 	scene.addChild(background);
  16.  
  17. 	// カード
  18. 	myCard = new Sprite(200, 300);
  19. 	myCard.image = core.assets["images/card.png"];
  20. 	myCard.x = DISPLAY_WIDTH * 0.5 - myCard.width * 0.5;
  21. 	myCard.y = DISPLAY_HEIGHT * 0.5 - myCard.height * 0.5;
  22. 	scene.addChild(myCard);
  23.  
  24. 	core.replaceScene(scene);
  25. };

５−２．実行して画像が表示されることを確認してください。

「カードゲーム サンプル」をウィキ内検索
最終更新：2014年09月25日 14:04