{"id":4395,"date":"2013-02-28T22:52:37","date_gmt":"2013-02-28T13:52:37","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=4395"},"modified":"2013-02-28T23:08:25","modified_gmt":"2013-02-28T14:08:25","slug":"enchant-js-html5javascript-%e9%87%8d%e5%8a%9b%e3%81%ae%e3%81%82%e3%82%8b%e3%83%9c%e3%83%bc%e3%83%ab%e6%8c%99%e5%8b%95","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=4395","title":{"rendered":"enchant.js  HTML5+JavaScript \u91cd\u529b\u306e\u3042\u308b\u30dc\u30fc\u30eb\u6319\u52d5"},"content":{"rendered":"<p>\u3044\u3084\u30fc\u3002\u697d\u3057\u3044\u3067\u3059\u306d\u3002enchant.js\u306f\u3002<\/p>\n<p>\u91cd\u529b\u306e\u3042\u308b\u30dc\u30fc\u30eb\u6319\u52d5\u306escript\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u305f\u3002\u30dc\u30fc\u30eb\u3092\u30c9\u30e9\u30c3\u30b0\u51fa\u6765\u3066\u3001\u653e\u308a\u6295\u3052\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/8326193087f287745730687dc64b26bd.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/8326193087f287745730687dc64b26bd.png\" alt=\"\" title=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2013-02-28 22.45.59\" width=\"201\" height=\"202\" class=\"alignnone size-full wp-image-4396\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/8326193087f287745730687dc64b26bd.png 201w, https:\/\/www.webcyou.com\/wp-content\/uploads\/8326193087f287745730687dc64b26bd-150x150.png 150w\" sizes=\"auto, (max-width: 201px) 100vw, 201px\" \/><\/a><\/p>\n<p>\u4f55\u3088\u308a\u4fbf\u5229\u3060\u306a\u3068\u611f\u3058\u305f\u306e\u306f\u3001\u300ctouchstart\u3067\u30af\u30ea\u30c3\u30af\u30b9\u30bf\u30fc\u30c8\u300d\u300ctouchend\u3067\u30af\u30ea\u30c3\u30af\u30a8\u30f3\u30c9\u300d\u306a\u3069\u3082\u30ab\u30d0\u30fc\u3057\u3066\u304f\u308c\u3066\u3044\u308b\u3068\u3053\u308d\u3067\u3059\u3002<\/p>\n<p><script type=\"text\/javascript\" src=\"http:\/\/jsdo.it\/blogparts\/opPX\/js\"><\/script><\/p>\n<p><strong>\u30c7\u30e2\u30da\u30fc\u30b8<\/strong><\/p>\n<p><a href=\"http:\/\/webcyou.com\/demo\/js\/enchant\/ball\/\" target=\"_blank\">http:\/\/webcyou.com\/demo\/js\/enchant\/ball\/<\/a><\/p>\n<p>\u3053\u3061\u3089\u306escript\u306e\u8a73\u7d30\u306b\u95a2\u3057\u3066\u306f\u4ee5\u524d\u306e\u8a18\u4e8b\u3001<\/p>\n<h3><a href=\"https:\/\/www.webcyou.com\/?p=1676\">ActiinScript2.0 \u30dc\u30fc\u30eb\u30a2\u30af\u30b7\u30e7\u30f3 \u91cd\u529b\u3001\u6469\u64e6\u3001\u8df3\u306d\u8fd4\u308a\u4fc2\u6570<\/a><\/h3>\n<p>\u3092\u53c2\u7167\u3057\u3066\u9802\u3051\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u9806\u756a\u3092\u8ffd\u3063\u3066\u5236\u4f5c\u3055\u308c\u305f\u3044\u65b9\u306f\u4ee5\u4e0b\u306e\u9806\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><strong>ActionScript \u7c21\u5358\u306a\u30a4\u30fc\u30b8\u30f3\u30b0<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=637\" target=\"_blank\">https:\/\/www.webcyou.com\/?p=637<\/a><\/p>\n<p><strong>ActionScript2.0 \u30dc\u30fc\u30eb\u53cd\u8ee2<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=1636\" target=\"_blank\">https:\/\/www.webcyou.com\/?p=1636<\/a><\/p>\n<p><strong>ActiinScript2.0 \u7e26\u6a2a\u79fb\u52d5\u30dc\u30fc\u30eb\u30a2\u30af\u30b7\u30e7\u30f3<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=1645\" target=\"_blank\">https:\/\/www.webcyou.com\/?p=1645<\/a><\/p>\n<p><strong>ActiinScript2.0 \u7e26\u6a2a\u79fb\u52d5 \u30dc\u30fc\u30eb\u3092\u63b4\u3080<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=1655\" target=\"_blank\">https:\/\/www.webcyou.com\/?p=1655<\/a><\/p>\n<p><strong>ActiinScript2.0 \u7e26\u6a2a\u79fb\u52d5 \u30dc\u30fc\u30eb\u3092\u63b4\u3093\u3067\u6295\u3052\u308b<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=1668\" target=\"_blank\">https:\/\/www.webcyou.com\/?p=1668<\/a><\/p>\n<p><strong>ActiinScript2.0 \u30dc\u30fc\u30eb\u30a2\u30af\u30b7\u30e7\u30f3 \u91cd\u529b\u3001\u6469\u64e6\u3001\u8df3\u306d\u8fd4\u308a\u4fc2\u6570<\/strong><\/p>\n<p><a href=\"https:\/\/www.webcyou.com\/?p=1676\" target=\"_blank\">https:\/\/www.webcyou.com\/?p=1676<\/a><\/p>\n<p>\u305d\u3046\u3001ActionScript\u3067\u8a18\u8ff0\u3057\u3066\u3044\u305f\u306e\u3092\u6301\u3063\u3066\u6765\u308b\u611f\u3058\u3067\u6d41\u7528\u3067\u304d\u308b\u3068\u3053\u308d\u304c<strong>enchant.js<\/strong>\u306e\u7d20\u6674\u3089\u3057\u3044\u3068\u3053\u308d\u3060\u3063\u305f\u308a\u3057\u307e\u3059\u306d\u3002<\/p>\n<p>\u8981\u70b9\u306e\u307f\u6319\u3052\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">enchant();<\/pre>\n<p>\u304a\u307e\u3058\u306a\u3044\u3002\u5168\u3066\u306e\u59cb\u307e\u308a\u306f\u3053\u3053\u304b\u3089\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">var game = new Game(320, 320);<\/pre>\n<p>\u30b2\u30fc\u30e0\u306e\u30b9\u30c6\u30fc\u30b8\u306e\u5e45\u3092\u6c7a\u3081\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">enchant.Class.create()<\/pre>\n<p>\u5bb9\u6613\u306b\u30af\u30e9\u30b9\uff08\u3068\u3044\u3046\u8003\u3048\uff09\u3092\u751f\u6210\u3059\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n<p>initialize\u306e\u30e1\u30f3\u30d0\u30fc\u304c\u6700\u521d\u306b\u5b9f\u884c\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">this.addEventListener(\"touchstart\",this.onTouch);\r\nthis.addEventListener(\"touchmove\",this.onTouchMove);\r\nthis.addEventListener(\"touchend\",this.onTouchEnd);<\/pre>\n<p>\u672c\u6765\u306a\u3089\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u306e\u30bf\u30c3\u30c1\u306e\u30a4\u30d9\u30f3\u30c8\u306e\u307f\u3092\u53d6\u5f97\u3059\u308b\u306e\u3067\u3059\u304c\u3001enchant.js\u3067\u306f\u30af\u30ea\u30c3\u30af\u306b\u3082\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">this.addEventListener('enterframe', this.onEnterFrame);<\/pre>\n<p>enterframe\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u53d6\u5f97\u3002Flash\u540c\u69d8\u306e\u8981\u9818\u3067script\u3092\u8a18\u8ff0\u3057\u3066\u3044\u3051\u308b\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">game.onload = function() { var ball000 = new ball(100, 100); };<\/pre>\n<p>new\u6f14\u7b97\u5b50\u3067\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u306e\u751f\u6210\u3002x\u5ea7\u6a19100px \u3001y\u5ea7\u6a19100px\u306b\u914d\u7f6e\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">game.start();<\/pre>\n<p>\u3044\u3051\u3002<\/p>\n<p>\u6700\u5f8c\u306e\u5168\u90e8\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3092<\/p>\n<p><strong>HTML &#038; CSS<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;UTF-8&quot;&gt;\r\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;&gt; \r\n&lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;enchant.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot; src=&quot;main.js&quot;&gt;&lt;\/script&gt;\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\nbody {\r\n  margin: 0;\r\n  padding: 0;\r\n  background: #eee;\r\n}\r\ncanvas { background: #fff; }\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>JavaScript \uff08main.js\uff09<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\nenchant();\r\nwindow.onload = function() {\r\n  var game = new Game(320, 320);\r\n  game.preload('ball.png');\r\n  game.speedX = 5;\r\n  game.speedY = 5;\r\n  game.ballHold = 0;\r\n  game.x1 = 0;\r\n  game.x2 = 0;\r\n  game.y1 = 0;\r\n  game.y2 = 0;\r\n\r\n  var ball = enchant.Class.create(enchant.Sprite, {\r\n    initialize: function(x, y) {\r\n      enchant.Sprite.call(this, 50, 50);\r\n      this.x = x;\r\n      this.y = y;\r\n      this.image = game.assets&#x5B;'ball.png'];\r\n\r\n      this.addEventListener(&quot;touchstart&quot;,this.onTouch);\r\n      this.addEventListener(&quot;touchmove&quot;,this.onTouchMove);\r\n      this.addEventListener(&quot;touchend&quot;,this.onTouchEnd);\r\n      this.addEventListener('enterframe', this.onEnterFrame);      \r\n      game.rootScene.addChild(this);\r\n    },\r\n    onTouch : function(e) {\r\n      game.ballHold = 1;\r\n    },\r\n    onTouchMove : function(e) {\r\n      this.x = e.x -25;\r\n      this.y = e.y -25;\r\n    },\r\n    onTouchEnd : function(e) {\r\n      game.ballHold = 0;\r\n    },  \r\n    onEnterFrame : function(){\r\n      if(game.ballHold == 1) {\r\n        game.x1 = game.x2;\r\n        game.y1 = game.y2;\r\n        game.x2 = this.x;\r\n        game.y2 = this.y;\r\n        game.speedX = (game.x2 - game.x1);\r\n        game.speedY = (game.y2 - game.y1);\r\n      } else {\r\n        if (this.x &gt; 320 - this.width) {\r\n          this.x = 320 - this.width;\r\n          game.speedX = game.speedX*-1*0.8;\r\n        }\r\n        if (this.x &lt; 0){\r\n          this.x = 0;\r\n          game.speedX = game.speedX*-1*0.8;\r\n        }\r\n        if (this.y &lt; 0) {\r\n          this.y = 0;\r\n          game.speedY = game.speedY*-1*0.8;\r\n        }\r\n        if (this.y &gt; 320 - this.height) {\r\n          this.y = 320 - this.height;\r\n          game.speedY = game.speedY*-1*0.8;\r\n        }\r\n        game.speedX = game.speedX*0.99;\r\n        game.speedY = game.speedY*0.99+0.98;\r\n        this.x += game.speedX;\r\n        this.y += game.speedY;\r\n      }\r\n    }\r\n  });\r\n  game.onload = function() { var ball000 = new ball(100, 100); };\r\n  game.start();\r\n};\r\n<\/pre>\n<p>\u3067\u306f\u3067\u306f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3044\u3084\u30fc\u3002\u697d\u3057\u3044\u3067\u3059\u306d\u3002enchant.js\u306f\u3002 \u91cd\u529b\u306e\u3042\u308b\u30dc\u30fc\u30eb\u6319\u52d5\u306escript\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u305f\u3002\u30dc\u30fc\u30eb\u3092\u30c9\u30e9\u30c3\u30b0\u51fa\u6765\u3066\u3001\u653e\u308a\u6295\u3052\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002 \u4f55\u3088\u308a\u4fbf\u5229\u3060\u306a\u3068\u611f\u3058\u305f\u306e\u306f\u3001\u300ctouchstart\u3067\u30af\u30ea\u30c3\u30af\u30b9\u30bf\u30fc\u30c8 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[73,172,171,59,167,177,170,168,176,40,166,37,47,46,95,78,114,118],"class_list":["post-4395","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-actiinscript2-0","tag-actionscript","tag-android","tag-android-sdk","tag-css","tag-css3","tag-flash","tag-html","tag-html5","tag-ios-sdk","tag-iphone","tag-iphone-","tag-javascript-2","tag-js","tag-95","tag-78","tag-114","tag-118"],"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4395"}],"version-history":[{"count":5,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4395\/revisions"}],"predecessor-version":[{"id":4398,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/4395\/revisions\/4398"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}