Forked from: phi's enchant.js - Surface に画像を描画しょう View Diff (16) enchant.js - Surface から1ピクセルを取得しよう phi Follow 2012-03-20 15:56:50 License: MIT License Fork2 Fav0 View4659 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 49 lines HTML 1 lines CSS 1 lines // [About] Surface の getPixel(x, y) で指定した位置のピクセル値を取得することができます. サンプルではクリック or タッチした位置の色を alert 表示するようになっています. // [enchant.js] Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en) Blog = http://wise9.jp/ Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en) // [phi] ハンドルネーム, 気軽に質問やアドバイス下さいな♪ Blog = http://tmlife.net/ Twitter = https://twitter.com/#!/phi_jp // [Entry] 全 tips へのリンクは『enchant.js 怒涛の 100 tips』にまとめてあります. http://tmlife.net/?p=5396 enchant.js - Surface から1ピクセルを取得しよう enchant.js v0.4.0 // forked from phi's "enchant.js - Surface に画像を描画しょう" http://jsdo.it/phi/7fXy // forked from phi's "enchant.js - Surface を使ってCanvas描画してみよう" http://jsdo.it/phi/rYXM // forked from phi's "enchant.js - Sprite を表示しよう" http://jsdo.it/phi/kAKa // forked from phi's "enchant.js - Entity を生成してSceneに追加しよう" http://jsdo.it/phi/tlgU // forked from phi's "enchant.js のテンプレートを用意しよう" http://jsdo.it/phi/isoa // おまじない(using namespace enchant) enchant(); var SPRITE_WIDTH = 100; var SPRITE_HEIGHT = 100; var IMAGE_NAME = "http://jsrun.it/assets/n/J/a/n/nJanG.jpg"; window.onload = function() { var game = new Game(); game.preload(IMAGE_NAME); game.onload = function() { var scene = game.rootScene; scene.backgroundColor = "black"; // スプライト生成 var sprite = new Sprite(SPRITE_WIDTH, SPRITE_HEIGHT); // スプライト生成 var surface = new Surface(SPRITE_WIDTH, SPRITE_HEIGHT); // サーフェス生成 // canvas 描画 surface.draw(game.assets[IMAGE_NAME], 0, 0, 100, 100); sprite.image = surface; // サーフェスを画像としてセット scene.addChild(sprite); // シーンに追加 // クリックした位置のピクセル値を表示する sprite.addEventListener("touchstart", function(e) { var x = Math.floor(e.localX); var y = Math.floor(e.localY); var pixel = surface.getPixel(x, y); alert( "rgba(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + "," + pixel[3] + ")" ); }); }; game.start(); }; <canvas id='world'></canvas> enchant.js - Surface から1ピクセルを取得しよう body { background-color: #DDDDDD; font: 30px sans-serif; margin:0px; } // [About] Surface の getPixel(x, y) で指定した位置のピクセル値を取得することができます. サンプルではクリック or タッチした位置の色を alert 表示するようになっています. // [enchant.js] Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en) Blog = http://wise9.jp/ Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en) // [phi] ハンドルネーム, 気軽に質問やアドバイス下さいな♪ Blog = http://tmlife.net/ Twitter = https://twitter.com/#!/phi_jp // [Entry] 全 tips へのリンクは『enchant.js 怒涛の 100 tips』にまとめてあります. http://tmlife.net/?p=5396 // forked from phi's "enchant.js - Surface に画像を描画しょう" http://jsdo.it/phi/7fXy // forked from phi's "enchant.js - Surface を使ってCanvas描画してみよう" http://jsdo.it/phi/rYXM // forked from phi's "enchant.js - Sprite を表示しよう" http://jsdo.it/phi/kAKa // forked from phi's "enchant.js - Entity を生成してSceneに追加しよう" http://jsdo.it/phi/tlgU // forked from phi's "enchant.js のテンプレートを用意しよう" http://jsdo.it/phi/isoa // おまじない(using namespace enchant) enchant(); var SPRITE_WIDTH = 100; var SPRITE_HEIGHT = 100; var IMAGE_NAME = "http://jsrun.it/assets/n/J/a/n/nJanG.jpg"; window.onload = function() { var game = new Game(); game.preload(IMAGE_NAME); game.onload = function() { var scene = game.rootScene; scene.backgroundColor = "black"; // スプライト生成 var sprite = new Sprite(SPRITE_WIDTH, SPRITE_HEIGHT); // スプライト生成 var surface = new Surface(SPRITE_WIDTH, SPRITE_HEIGHT); // サーフェス生成 // canvas 描画 surface.draw(game.assets[IMAGE_NAME], 0, 0, 100, 100); sprite.image = surface; // サーフェスを画像としてセット scene.addChild(sprite); // シーンに追加 // クリックした位置のピクセル値を表示する sprite.addEventListener("touchstart", function(e) { var x = Math.floor(e.localX); var y = Math.floor(e.localY); var pixel = surface.getPixel(x, y); alert( "rgba(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + "," + pixel[3] + ")" ); }); }; game.start(); }; <canvas id='world'></canvas> body { background-color: #DDDDDD; font: 30px sans-serif; margin:0px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? // [About] Surface の getPixel(x, y) で指定した位置のピクセル値を取得することができます. サンプルではクリック or タッチした位置の色を alert 表示するようになっています. // [enchant.js] Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en) Blog = http://wise9.jp/ Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en) // [phi] ハンドルネーム, 気軽に質問やアドバイス下さいな♪ Blog = http://tmlife.net/ Twitter = https://twitter.com/#!/phi_jp // [Entry] 全 tips へのリンクは『enchant.js 怒涛の 100 tips』にまとめてあります. http://tmlife.net/?p=5396 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author phi ゲームプログラマやりながら執筆してる27歳. phina.js(tmlib.js) というライブラリ作ってます. 著書「enchant.js スマートフォンゲーム開発講座」 『日本国民全員プログラマ化計画』進行中 Math/JavaScript/HTML5/CSS3/Python/C/C++/C#/Java Blog http://phiary.me Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/kl5w/js"></script> enchant.js game javascript library&test smartphones&tablets 怒濤 Discussion Questions on this code? Tags enchant.js game javascript library&test smartphones&tablets 怒濤 Forked sort by latest page views favorite forked forked: enchant.js - Surface か KIRA0113A 00 956 50/1/1 enchant.js game javascript library&test smartphones&tablets 怒濤 enchant.js - Surface に1ピクセルを設定 phi 00 2783 54/1/1 enchant.js game javascript library&test smartphones&tablets 怒濤