{"id":4182,"date":"2019-05-24T16:23:52","date_gmt":"2019-05-24T07:23:52","guid":{"rendered":"https:\/\/www.wsmeguro.jp\/wp\/?p=4182"},"modified":"2019-05-24T20:49:56","modified_gmt":"2019-05-24T11:49:56","slug":"javascript%e3%81%ae%e7%b7%b4%e7%bf%92%ef%bc%9a%e8%9b%87%e3%81%8c%e3%81%88%e3%81%95%e3%82%92%e9%a3%9f%e3%81%b9%e3%81%a6%e9%95%b7%e3%81%8f%e3%81%aa%e3%82%8b%e3%82%b2%e3%83%bc%e3%83%a0","status":"publish","type":"post","link":"https:\/\/www.wsmeguro.jp\/wp\/?p=4182","title":{"rendered":"Javascript\u306e\u7df4\u7fd2\uff1a\u86c7\u304c\u3048\u3055\u3092\u98df\u3079\u3066\u9577\u304f\u306a\u308b\u30b2\u30fc\u30e0"},"content":{"rendered":"<p>React\u3092\u3084\u3063\u3066\u3082Angular\u3092\u3084\u3063\u3066\u3082\u8e93\u3044\u3066\u3057\u307e\u3046\u306e\u3067\u3001Back to Basic\u3092\u3044\u3046\u3053\u3068\u3067\u3001Javascript\u306b\u7acb\u3061\u8fd4\u3063\u3066\u304a\u308a\u307e\u3059\u3002<br \/>\n\u307e\u305a\u306f\u3001Kindle\u3067\u300c\u30b2\u30fc\u30e0\u3092\u4f5c\u308a\u306a\u304c\u3089\u697d\u3057\u304f\u5b66\u3079\u308bHTML+CSS+Javascript\u300d\u3092\u8aad\u307f\u306a\u304c\u3089\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<br \/>\n<iframe style=\"width: 120px; height: 240px;\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" frameborder=\"0\" src=\"https:\/\/rcm-fe.amazon-adsystem.com\/e\/cm?ref=tf_til&amp;t=masuday55cm-22&amp;m=amazon&amp;o=9&amp;p=8&amp;l=as1&amp;IS1=1&amp;detail=1&amp;asins=B06XRSFM6G&amp;linkId=cb92f2ce1896efb8d141b360515d5deb&amp;bc1=ffffff&amp;lt1=_blank&amp;fc1=333333&amp;lc1=0066c0&amp;bg1=ffffff&amp;f=ifr\"><br \/>\n<\/iframe><br \/>\n\u51fa\u6765\u305f\u30b2\u30fc\u30e0\u306f\u3053\u3061\u3089\u306e\u3001\u86c7\u304c\u3048\u3055\u3092\u98df\u3079\u308b\u3068\u9577\u304f\u306a\u3063\u3066\u3044\u304f\u30b2\u30fc\u30e0\u3067\u3059\u3002<br \/>\n<a href=\"https:\/\/www.wsmeguro.jp\/tools\/js\/snake\/\" rel=\"noopener noreferrer\" target=\"_blank\">https:\/\/www.wsmeguro.jp\/tools\/js\/snake\/<\/a><\/p>\n<p>\u30dd\u30a4\u30f3\u30c8\u306f\u3001\u4ee5\u4e0b\u306e2\u3064\u3067\u52d5\u304d\u51fa\u3057\u305f\u3089\u3001\u58c1\u306b\u5f53\u305f\u308b\u304b\u3001\u81ea\u5206\u306e\u4f53\u306b\u89e6\u308c\u308b\u307e\u3067\u6b62\u307e\u3089\u306a\u3044\u3002\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u306d\u3002<br \/>\n\u30fbsetInterval\u30671\u79d2\u306b5\u56de\u518d\u8868\u793a\u3055\u305b\u308b\u3053\u3068\uff08\u30ad\u30fc\u5165\u529b\u304c\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u30ad\u30fc\u306b\u306a\u3089\u306a\u3044\uff09<br \/>\n\u30fb\u30ad\u30fc\u5165\u529b\u306fkeyCode\u304c\u899a\u3048\u3066\u3044\u308b<br \/>\n\u96e3\u70b9\u306f\u3001\u4f8b\u3048\u3070\u3001\u4e0a\u306b\u5411\u304b\u3063\u3066\u3044\u308b\u6642\u3001\u66f4\u65b0\u306e\u5408\u9593\u306e0.2\u79d2\u9593\u306b\u4e0a\u3068\u4e0b\u3092\u6253\u9375\u3059\u308b\u3068\u3001\u6700\u521d\u306e\u4e0a\u306f\u53cd\u5fdc\u3055\u308c\u305a\u4e0b\u3060\u3051\u306b\u53cd\u5fdc\u3059\u308b\u305f\u3081\u81ea\u5206\u306e\u4f53\u306b\u5f53\u305f\u3063\u305f\u3068\u3057\u3066\u30b2\u30fc\u30e0\u30aa\u30fc\u30d0\u30fc\u306b\u306a\u308a\u307e\u3059\u3002setInterval\u3067\u65b9\u5411\u3092\u899a\u3048\u3066\u304a\u3044\u3066\u3001\u5408\u9593\u306b\u884c\u308f\u308c\u305f\u6253\u9375\u3067\u51e6\u7406\u3092\u5206\u3051\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u3053\u3053\u307e\u3067\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>\u914d\u5217\u306b\u5bfe\u3059\u308bforEach\u3068\u304b\u3059\u3063\u304b\u308a\u5fd8\u308c\u3066\u3044\u307e\u3057\u305f\u306e\u3067\u3001\u3044\u3044\u52c9\u5f37\u306b\u306a\u308a\u307e\u3057\u305f\u3002<!--more--><\/p>\n<p>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n<blockquote><p>\u5f15\u7528\u5143\u30015-1 Canvas\u3092\u4f7f\u3063\u305f\u57fa\u790e\u7684\u306a\u30b2\u30fc\u30e0<br \/>\n\u7530\u4e2d \u8ce2\u4e00\u90ce. \u30b2\u30fc\u30e0\u3092\u4f5c\u308a\u306a\u304c\u3089\u697d\u3057\u304f\u5b66\u3079\u308bHTML5+CSS+JavaScript\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\uff3b\u6539\u8a02\u7248\uff3d (Japanese Edition) (p.168). Kindle \u7248.<br \/>\n\u8457\u8005\u304b\u3089\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u4e00\u3064\u300c\u30b2\u30fc\u30e0\u3067\u904a\u3076\u306e\u3082\u697d\u3057\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u81ea\u5206\u3067\u4f5c\u3063\u3066\u6539\u9020\u3059\u308b\u306e\u3082\u540c\u3058\u304f\u3089\u3044\u697d\u3057\u3044\u3082\u306e\u3067\u3059\u3002\u305d\u3093\u306a\u697d\u3057\u3055\u3092\u901a\u3057\u3066\u3001\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306e\u30b9\u30ad\u30eb\u3092\u8eab\u306b\u7740\u3051\u3066\u3044\u305f\u3060\u304d\u305f\u3044\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002\u300d\n<\/p><\/blockquote>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\" >&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\u201den\u201d&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=\u201dUTF-8\u2033&gt;\r\n&lt;meta name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1.0\u2033&gt;\r\n&lt;meta http-equiv=\u201dX-UA-Compatible\u201d content=\u201die=edge\u201d&gt;\r\n&lt;link rel=\u201dicon\u201d type=\u201dimage\/png\u201d href=\u201dhttps:\/\/www.wsmeguro.jp\/logo\/favicon.png\u201d&gt;\r\n&lt;link rel=\u201dstylesheet\u201d href=\u201dindex.css\u201d&gt;\r\n&lt;title&gt;A Snake Bites Foods&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body onload=\u201dinit()\u201d&gt;\r\n&lt;canvas width=\u201d600\u2033 height=\u201d600\u2033 id=\u201dfield\u201d style=\u201dbackground: #cce2e3\u2033&gt;&lt;\/canvas&gt;\r\n&lt;script src=\u201dindex.js\u201d async defer&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<pre class=\"lang:js decode:true \" title=\"index.js\">\"use strick\";\r\nvar W, H, S = 20;\r\nvar snake = [], foods = [];\r\nvar keyCode = 0;\r\nvar point = 0;\r\nvar timer = NaN;\r\nvar ctx;\r\n\r\nfunction Point(x, y) {\r\n  this.x = x;\r\n  this.y = y;\r\n}\r\n\r\nfunction init() {\r\n  var canvas = document.getElementById('field');\r\n  W = canvas.width \/ S;\r\n  H = canvas.height \/ S;\r\n  ctx = canvas.getContext('2d');\r\n  ctx.font = \"20px sans-serif\";\r\n\r\n  snake.push(new Point(W \/ 2, H \/ 2));\r\n\r\n  for (var i = 0; i &lt; 10; i++) {\r\n    addFood();\r\n  }\r\n\r\n  timer = setInterval(\"tick()\", 200);\r\n  window.onkeydown = keydown;\r\n}\r\n\r\nfunction addFood() {\r\n  while (true) {\r\n    var x = Math.floor(Math.random() * W);\r\n    var y = Math.floor(Math.random() * H);\r\n    if (isHit(foods, x, y) || isHit(snake, x, y)) {\r\n      continue;\r\n    }\r\n    foods.push(new Point(x, y));\r\n    break;\r\n  }\r\n}\r\n\r\nfunction isHit(data, x, y) {\r\n  for (var i = 0; i &lt; data.length; i++) {\r\n    if (data[i].x == x &amp;&amp; data[i].y == y) {\r\n      return true;\r\n    }\r\n  }\r\n  return false;\r\n}\r\n\r\nfunction moveFood(x, y) {\r\n  foods = foods.filter(function (p) {\r\n    return (p.x != x || p.y != y);\r\n  });\r\n  addFood();\r\n}\r\n\r\nfunction tick() {\r\n  var x = snake[0].x;\r\n  var y = snake[0].y;\r\n\r\n  switch (keyCode) {\r\n    case 37: x--; break;\r\n    case 38: y--; break;\r\n    case 39: x++; break;\r\n    case 40: y++; break;\r\n    default: paint(); return;\r\n  }\r\n\r\n  if (isHit(snake, x, y) || x &lt; 0 || x &gt;= W || y &lt; 0 || y &gt;= H) {\r\n    clearInterval(timer);\r\n    paint();\r\n    return;\r\n  }\r\n\r\n  snake.unshift(new Point(x, y));\r\n\r\n  if (isHit(foods, x, y)) {\r\n    point += 10;\r\n    moveFood(x, y);\r\n  } else {\r\n    snake.pop();\r\n  }\r\n  paint();\r\n}\r\n\r\nfunction paint() {\r\n  ctx.clearRect(0, 0, W * S, H * S);\r\n  ctx.fillStyle = \"rgb(255,0,0)\";\r\n  ctx.fillText(point, S, S * 2)\r\n  ctx.fillStyle = \"#42873a\";\r\n  foods.forEach(function (p) {\r\n    ctx.fillText(\"+\", p.x * S, (p.y + 1) * S);\r\n  });\r\n  ctx.fillStyle = \"#794059\";\r\n  snake.forEach(function (p) {\r\n    ctx.fillText(\"*\", p.x * S, (p.y + 1) * S);\r\n  });\r\n}\r\n\r\nfunction keydown(event) {\r\n  keyCode = event.keyCode;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>React\u3092\u3084\u3063\u3066\u3082Angular\u3092\u3084\u3063\u3066\u3082\u8e93\u3044\u3066\u3057\u307e\u3046\u306e\u3067\u3001Back to Basic\u3092\u3044\u3046\u3053\u3068\u3067\u3001Javascript\u306b\u7acb\u3061\u8fd4\u3063\u3066\u304a\u308a\u307e\u3059\u3002 \u307e\u305a\u306f\u3001Kindle\u3067\u300c\u30b2\u30fc\u30e0\u3092\u4f5c\u308a\u306a\u304c\u3089\u697d\u3057\u304f\u5b66\u3079\u308bHTML+CSS+J&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[560,505],"tags":[640,558],"class_list":["post-4182","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming","tag-game","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/4182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4182"}],"version-history":[{"count":17,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/4182\/revisions"}],"predecessor-version":[{"id":4214,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=\/wp\/v2\/posts\/4182\/revisions\/4214"}],"wp:attachment":[{"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsmeguro.jp\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}