チュートリアル

カードゲームサンプル

2014-09-25T14:04:35+09:00

このゲームは画像をタップするとスペードまたはジョーカーを表示します。スペードが表示されたらスコアがカウントされてもう一度挑戦することができます。ジョーカーが表示されたらGAME OVERです。 |&image(CardGame1.png,width=100)|&image(CardGame2.png,width=100)|&image(CardGame3.png,width=100)|&image(CardGame4.png,width=100)|&image(CardGame5.png,width=100)| *１．enchant.jsを実行する。 ***１−１．jsフォルダ配下に「main.js」を作成し、以下のとおり編集してください。 #highlight(linenumber){{ /* ================================ * メイン処理系 ==================================*/ enchant(); // ゲーム画面の幅と高さ var DISPLAY_WIDTH = 640; var DISPLAY_HEIGHT = 960; window.onload = function(){ };}} ***１―２．index.htmlの〜に以下を追加してください。 #highlight(){ } 編集後のindex.htmlは以下のとおり #highlight(linenumber){ Card Game } *２．ゲームオブジェクトの作成、及び画像ファイルのプリロードを行う。 ***２−１．以下の画像ファイルを使用します。&br()&space(12)画像ファイルをダウンロードしてimagesフォルダに配置してください。背景画像 |&image(background.png,width=100)| カード |&image(card.png,width=100)| 各種ボタン |&image(btn_start.png,width=100)|&image(btn_retry.png,width=100)|&image(btn_title.png,width=100)| ***２―２．main.jsのwindow.onload時の処理に以下を追加してください。 #highlight(){{{ 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は以下のとおり #highlight(linenumber){{{ /* ================================ * メイン処理系 ==================================*/ enchant(); // ゲーム画面の幅と高さ var DISPLAY_WIDTH = 640; var DISPLAY_HEIGHT = 960; 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(); };}}} *３．ゲームシーンを準備する。 ***３−１．jsフォルダ配下に「scene_game.js」を作成し、以下のとおり編集してください。 #highlight(linenumber){{ /* ================================ * ゲーム ==================================*/ //========== // ゲームシーンの開始 function startSceneGame(){ console.log("Game"); };}} ***３−２．main.jsのcore.onload処理内に以下を追加してください。 #highlight(){ // Gameシーンへ startSceneGame();} 編集後のmain.jsは以下のとおり #highlight(linenumber){{{ /* ================================ * メイン処理系 ==================================*/ enchant(); // ゲーム画面の幅と高さ var DISPLAY_WIDTH = 640; var DISPLAY_HEIGHT = 960; 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!!"); // Gameシーンへ startSceneGame(); }; // ゲームスタート core.start(); };}}} ***３―３．index.htmlの〜に以下を追加してください。 #highlight(){ } 編集後のindex.htmlは以下のとおり #highlight(linenumber){ Card Game } *４．ゲームシーンに背景画像を配置する。 ***４−１．scene_game.jsのstartSceneGame関数内に以下を追加してください。 #highlight(){ 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は以下のとおり #highlight(linenumber){{ /* ================================ * ゲーム ==================================*/ //========== // ゲームシーンの開始 function startSceneGame(){ console.log("Game"); 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); };}} ***４−２．実行して背景画像が表示されることを確認してください。 |&image(CardGame6.png,width=100)| *５．画像を配置する。 ***５−１．scene_game.jsのstartSceneGame関数内に以下を追加してください。 #highlight(){ // カード 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は以下のとおり #highlight(linenumber){{ /* ================================ * ゲーム ==================================*/ //========== // ゲームシーンの開始 function startSceneGame(){ console.log("Game"); var scene = new Scene(); // 背景画像 var background = new Sprite(DISPLAY_WIDTH, DISPLAY_HEIGHT); background.image = core.assets["images/background.png"]; scene.addChild(background); // カード 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); core.replaceScene(scene); };}} ***５−２．実行して画像が表示されることを確認してください。 |&image(CardGame7.png,width=100)|

enchant.jsの準備

2014-09-24T17:25:17+09:00

*１．enchant.jsのソースファイルをダウンロードする。 ***・以下のサイトにアクセスする　http://enchantjs.com/ja/ ***・「Download」タブをクリックしてダウンロード画面にアクセスする。 |&image(enchant1.png,width=600)| ***・「Download latest version of enchant.js」をクリックしてソースファイルをダウンロードする。 |&image(enchant2.png,width=600)| *２．ダウンロードしたZIPファイルを解凍し、解凍したフォルダの中にある「build」フォルダをプロジェクトにコピーする。【コピー元の解凍したフォルダ】 |&image(enchant3.png,width=600)| 【コピー先のプロジェクトフォルダ】 |&image(enchant4.png,width=700)| 　※当サイトではbuildフォルダをjsフォルダ配下に配置し開発することにします。 *３．index.htmlの準備 index.htmlを以下のとおり編集してください。 Sample **以上で準備は完了です。

メニュー

2014-09-24T02:24:17+09:00

メニュー

　Offline Cashe

Offline Web Cache サンプル

　Canvas

　enchant.js

リンク

他のサービス

wikiの編集方法についてはこちら

左メニューの編集方法についてはこちら

ここを編集

Touch Paint サンプル

2013-07-30T01:03:51+09:00

*０．環境確認　このサンプルは「色の入力欄」、「レンジ入力欄」を使用しています。　ご利用の環境では動作しない場合がありますので以下のページより確認してください。　[[http://html5test.com>http://html5test.com]] 　以下のとおり「input type=range」、「input type=color」ともに「Yes」であればOK。 #image(TouchPaint0.png) *１．index.htmlを準備する。 **１−１．canvasとlog出力領域を実装する。 TouchPaint

*２．canvasにイベントを登録し動作を確認する。 **２−１．定義 var canvas = document.getElementById("canvas"); var log = document.getElementById ("log"); **２−２．canvasのサイズを指定する canvas.width = document.width; canvas.height = document.height - 200; **２−３．イベントを登録する。 canvas.addEventListener("touchstart", touchStartHandler, false); canvas.addEventListener("touchmove", touchMoveHandler, false); canvas.addEventListener("touchend", touchEndHandler, false); function touchStartHandler(e) { log.innerHTML += "

Touch Event: touchstart

"; } function touchMoveHandler(e) { log.innerHTML += "

Touch Event: touchmove

"; } function touchEndHandler(e) { log.innerHTML += "

Touch Event: touchend

"; } **２−３．実行結果 #image(TouchPaint1.png,height=300) *３．canvasにマークしてみる **３−１．定義 var context = canvas.getContext("2d"); var touches; **３−２．touchMoveHandlerを書き換える function touchMoveHandler(e) { touches = e.touches.item(0); context.fillRect(touches.pageX - this.offsetLeft, touches.pageY - this.offsetTop, 5, 5); } **３−３．実行結果 #image(TouchPaint2.png,height=300) *４．点を線で結んでみる **４−１．定義 var drawPath = new Array; var isMoved = false; **４−２．touchStartHandlerを書き換える function touchStartHandler(e) { touches = e.changedTouches; drawPath.push(touches[0]); } **４−３．touchMoveHandlerを書き換える function touchMoveHandler(e) { touches = e.changedTouches; context.beginPath(); context.moveTo(drawPath[0].pageX - this.offsetLeft, drawPath[0].pageY - this.offsetTop); context.lineTo(touches[0].pageX - this.offsetLeft, touches[0].pageY - this.offsetTop); context.closePath(); context.stroke(); drawPath.splice(0, 1, touches[0]); e.preventDefault(); } **４−４．touchEndHandlerを書き換える function touchEndHandler(e) { if (!isMoved) { context.beginPath(); context.closePath(); context.fill(); } isMoved=false; drawPath.length = 0; } **４−５．実行結果 #image(TouchPaint3.png,height=300) *５．線の色や太さを変えてみる **５−１．タグを追加

Color: Line width:

**５−２．定義 var strokeColor; var strokeWidth = 5; var strokeColorSel = document.getElementById("strokeColor"); var strokeWidthSel = document.getElementById("strokeWidth"); var clearBtn = document.getElementById("clearBtn"); **５−３．イベント登録 strokeColorSel.addEventListener("change", changeStrokeColor, false); strokeWidthSel.addEventListener("change", changeStrokeWidth, false); clearBtn.addEventListener("click", clearCanvas, false); function changeStrokeColor() { strokeColor = this.value; } function changeStrokeWidth() { strokeWidth = this.value; } function clearCanvas() { context.clearRect (0, 0, canvas.width, canvas.height); } **５−４．functionを追加 function drawPathSetting(idx) { for (var i = 0; i < drawPath.length; i++) { var _idx = drawPath[i].identifier; if (_idx === idx) { return i; } } return -1; } **５−５．touchMoveHandlerを書き換える function touchMoveHandler(e) { touches = e.changedTouches; context.lineWidth = strokeWidth; context.strokeStyle = strokeColor; context.lineJoin = "round"; for (var i = 0; i < touches.length; i++) { var idx = drawPathSetting(touches[i].identifier); context.beginPath(); context.moveTo(drawPath[idx].pageX - this.offsetLeft, drawPath[idx].pageY - this.offsetTop); context.lineTo(touches[i].pageX - this.offsetLeft, touches[i].pageY - this.offsetTop); context.closePath(); context.stroke(); drawPath.splice(idx, 1, touches[i]) } e.preventDefault(); } **５−６．touchEndHandlerを書き換える function touchEndHandler(e) { if (!isMoved) { var startPoint = (Math.PI/180)*0; var endPoint = (Math.PI/180)*360; context.fillStyle = strokeColor; context.beginPath(); context.arc(touches[0].pageX - this.offsetLeft, touches[0].pageY - this.offsetTop, strokeWidth/2, startPoint, endPoint, true); context.closePath(); context.fill(); } isMoved=false; drawPath.length = 0; } **５−７．実行結果 #image(TouchPaint4.png,height=300) *６．スタイルシートで見栄えを整えてみる。６−１．スタイルシートを準備する。 ***style.css * { margin:0;padding:0; } html, body { width:100%;height:100%;background:#ddd; } h2 { padding:10px 15px;color:#6587ac; } .canvas { width:100%;background:#fff;} .desc { display:table;width:100%;padding:5px 10px;text-align:right; } .desc label { display:table-cell;width:50%;white-space:nowrap; } .desc label:first-child { text-align:left; } .strokeWidth { width:85px; } button { float:right;margin-right:15px; } input, button { vertical-align:middle; } @media screen and (max-device-height : 800px) { .addHeight {height:360px;} } @media screen and (min-device-height : 801px) { .addHeight {height:480px;} } **６−２．htmlのヘッダー部に追加する ***index.html **６−３．実行結果 #image(TouchPaint5.png,height=300) *７．完成 ***index.html TouchPaint

Color: Line width:

***style.css * { margin:0;padding:0; } html, body { width:100%;height:100%;background:#ddd; } h2 { padding:10px 15px;color:#6587ac; } .canvas { width:100%;background:#fff;} .desc { display:table;width:100%;padding:5px 10px;text-align:right; } .desc label { display:table-cell;width:50%;white-space:nowrap; } .desc label:first-child { text-align:left; } .strokeWidth { width:85px; } button { float:right;margin-right:15px; } input, button { vertical-align:middle; } @media screen and (max-device-height : 800px) { .addHeight {height:360px;} } @media screen and (min-device-height : 801px) { .addHeight {height:480px;} }

Offline Web Cache サンプル

2013-07-29T01:20:45+09:00

*１．cacheを用いないページ **１−１．index.htmlを準備する。 Offline Web Cache

Offline Web Cache

**１−２．style.cssを準備する。 * { margin:0;padding:0 } h1 { font-size:1.4em;margin:10px 0 20px 10px;color:#6587ac; } **１−３．main.jsを準備する。 setInterval(function () { document.getElementById('clock').value = new Date(); }, 1000); **１−４．オンラインの状態で確認する。 #image(offline1.png,height=300) **１−５．オフラインの状態で確認する。オフラインの為、エラーとなります。 #image(offline2.png,height=300) *２．cacheを実装してみる。 **２−１．index.htmlのhtmlタグを書き換える **２−２．tizen.manifestを準備する。 CACHE MANIFEST CACHE: js/main.js css/style.css **２−３．オンラインで確認してみる。セキュリティ確認のメッセージが表示されます #image(offline3.png,height=300) 許可するとキャッシュされます。 #image(offline4.png,height=300) **２−４．オフラインで確認してみる。オフラインでもキャッシュされているため、表示されます。 #image(offline5.png,height=300)

Analog Watch サンプル

2013-07-28T03:44:23+09:00

*１．index.htmlを準備する。 **１−１．canvasを実装する。 AnalogWatch

*２．canvasに時計の盤面を描画する。 **２−１．定義 var canvas = document.getElementById("canvas"), context = canvas.getContext('2d'); var clockRadius = canvas.width / 2; **２−２．描画処理 watch(); function watch() { context.font = '30px Tahoma'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillStyle = '#555'; context.translate(canvas.width / 2, canvas.height / 2); context.beginPath(); for (var i = 1; i <= 12; i++) { var angle = (i - 3) * (Math.PI * 2) / 12, dx = clockRadius * 0.7 * Math.cos(angle), dy = clockRadius * 0.7 * Math.sin(angle); context.fillText(i, dx, dy); } } **２−３．実行結果 #image(AnalogWatch1.png,height=300) *３．短針、長針、秒針を描画してみる **３−１．function watch()に追記 //短針 context.save(); context.rotate(0*Math.PI/180); context.beginPath(); context.moveTo(-15, -5); context.lineTo(-15, 5); context.lineTo(clockRadius * 0.5, 2); context.lineTo(clockRadius * 0.5, -2); context.fill(); context.restore(); //長針 context.save(); context.rotate(120*Math.PI/180); context.beginPath(); context.moveTo(-15, -4); context.lineTo(-15, 4); context.lineTo(clockRadius * 0.7, 1); context.lineTo(clockRadius * 0.7, -1); context.fill(); context.restore(); //秒針 context.save(); context.rotate(240*Math.PI/180); context.beginPath(); context.moveTo(-15, -2); context.lineTo(-15, 2); context.lineTo(clockRadius * 0.7, 0); context.fillStyle = '#f00'; context.fill(); context.restore(); **３−２．実行結果 #image(AnalogWatch2.png,height=300) *４．１秒毎に現在の時間を表示させてみる **４−１．以下のとおり書き換える watch(); ↓ setInterval(watch, 1000); **４−２．function watch()の最初にクリア処理と時間取得処理を挿入する context.clearRect(0, 0, context.canvas.width, context.canvas.height); context.save(); var date = new Date(), hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(), hour = hours + minutes / 60, minute = minutes + seconds / 60; **４−３．短針、長針、秒針を取得した時間を示すように書き換える //短針 context.rotate(0*Math.PI/180); ↓ angle = 2 * (hours - 3) * Math.PI / 12; context.rotate(angle); //長針 context.rotate(120*Math.PI/180); ↓ angle = 2 * (minutes - 15) * Math.PI / 60; context.rotate(angle); //秒針 context.rotate(240*Math.PI/180); ↓ angle = 2 * (seconds - 15) * Math.PI / 60; context.rotate(angle); **４−４．実行結果 #image(AnalogWatch3.png,height=300) *５．完成 AnalogWatch

トップページ

2013-07-22T16:05:56+09:00

このウィキの使い方　～4つのステップ～

■ログインしてみよう！

デザインを変えたり、サイト名を変えたりするためには、ログインしないといけないよ。

ログインの方法は、下の手順でログインしてみよう！

わからない場合はこちらのページも参考にしてね。

画面の右上にある「ログイン」をクリック！
ユーザ名に「yoshitoimai」、パスワードには、登録の時に設定したものを入力しよう。
画面の右上に「yoshitoimai」と表示されればログイン完了！

■サイト名を変更しよう！

サイト名はどこから変えれるの？下の手順にそえばサイト名を変えれるよ！

わからない場合はこちらのページも参考にしてね。

ログインしたら、右上にある「設定」をクリック！
表示されたページの左メニューにある、「基本設定」をクリックしよう！
そうすると、一番上の「サイト名」と書かれた右側に、今のサイト名が書かれています。
ここを好きな名前に書き換えよう！
書き換え終わったら、一番下にある「設定変更」ボタンをクリック！
右上の「（設定したサイト名）」へ戻る　をクリックすると、サイト名が変わったことが確認できるよ！

■新しいページを作成しよう！

新しくページを作成するにはどうすればいいのか、下の手順にそってやってみよう！

わからない場合はこちらのページも参考にしてね。

画面の左上にある「＠メニュー」にマウスを持って行くと、さらにメニューが表示されます。
表示されたメニューから「新規ページ作成」をクリック！
表示されたページで、作りたいページの名前を入力して、
編集モードは　【初心者向け】ワープロモード　を選択しよう。
真ん中の枠の中に、自由に書き込めるよ！　
作り終わったら、「ページを保存」をクリックすれば、新しいページの作成は完了！

■このページを編集しよう！

最後に、このトップページを編集しよう！

ページ編集の方法がわからない場合はこちらのページも参考にしてね。

左上にある「編集」にマウスを持って行くと、さらにメニューが表示されます。
表示されたメニューから「ページ編集」をクリック！
編集画面が表示されるので、自由に書き換えてみよう。
書き換え終わったら、「ページを保存」をクリックすれば、トップページの編集は完了！

もし、wikiで議論する場や掲示板が欲しい場合は？

@wikiの姉妹サービスである@chsをご利用ください。

登録はこちらから　←　ここをクリックしてください。

分からないことは？

等をご活用ください

その他お勧めサービスについて

バグ・不具合を見つけたら？要望がある場合は？

お手数ですが、お問い合わせフォームからご連絡ください。

右メニュー

2013-07-22T16:05:56+09:00

**カウンター |今日|&counter(today)人| |昨日|&counter(yesterday)人| |&bold(){合計}|&bold(){&counter()人}| 現在&online()人が閲覧中。 **更新履歴 #recent(30)

チュートリアル

カードゲーム サンプル

enchant.jsの準備

メニュー

メニュー

Offline Cashe

Canvas

enchant.js

リンク

他のサービス

Touch Paint サンプル

Offline Web Cache サンプル

Offline Web Cache

Analog Watch サンプル

トップページ

このウィキの使い方 ～4つのステップ～

■ログインしてみよう！

■サイト名を変更しよう！

■新しいページを作成しよう！

■このページを編集しよう！

もし、wikiで議論する場や掲示板が欲しい場合は？

分からないことは？

その他お勧めサービスについて

バグ・不具合を見つけたら？ 要望がある場合は？

右メニュー

カードゲームサンプル

　Offline Cashe

　Canvas

　enchant.js

このウィキの使い方　～4つのステップ～

バグ・不具合を見つけたら？要望がある場合は？