<!DOCTYPE html>\n<html lang="ja">\n<head>\n\t<meta charset="UTF-8">\n<\/head>\n<body>\n\t<canvas id="canId" width=600 height=500><\/canvas><br>\n\t<button onclick="stop()">STOP<\/button>\n\n\t<script>\n\t\tlet getE = document.getElementById("canId");\n\t\tgetE.style.backgroundColor = "black";\n\t\tlet can = getE.getContext("2d");\n\n\t\tlet interval = setInterval(loop, 10);\t\/\/ \u7e70\u308a\u8fd4\u3057\u51e6\u7406\n\t\t\n\t\tfunction stop(){\n\t\t\t clearInterval(interval);\n\t\t\t Smiley.clearField();\n\t\t}\n\n\t\t\/\/******************** \u30b9\u30de\u30a4\u30ea\u30fc\u30af\u30e9\u30b9 ********************\n\t\tclass Smiley{\n\t\t\tconstructor(x, y, moveX, moveY){\t\/\/ \u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u30fc\n\t\t\t\tthis.x = x;\n\t\t\t\tthis.y = y;\n\t\t\t\tthis.moveX = moveX;\n\t\t\t\tthis.moveY = moveY;\n\t\t\t\tthis.color = "yellow";\n\t\t\t}\n\t\t\tstatic clearField(){\t\t\t\/\/ \u30af\u30ea\u30a2\u95a2\u6570\n\t\t\t\tcan.fillStyle = "#000";\n\t\t\t\tcan.fillRect(0,0,600,500);\n\t\t\t}\n\t\t\tdraw(){\t\t\t\t\t\t\t\/\/ \u30c9\u30ed\u30fc\u95a2\u6570\n\t\t\t\tcan.beginPath();\t\t\t\t\t\t\/\/ \u30cb\u30b3\u3061\u3083\u3093\u8f2a\u90ed\n\t\t\t\tcan.arc(50+this.x, 50+this.y, 50, 0, Math.PI*2);\n\t\t\t\tcan.fillStyle = this.color;\n\t\t\t\tcan.fill();\n\t\t\t\tcan.beginPath();\t\t\t\t\t\t\/\/ \u30cb\u30b3\u3061\u3083\u3093\u306e\u53e3\n\t\t\t\tcan.arc(50+this.x, 50+this.y, 35, 0, Math.PI);\n\t\t\t\tcan.strokeStyle = "black";\n\t\t\t\tcan.lineWidth = 4;\n\t\t\t\tcan.stroke();\n\t\t\t\tcan.beginPath();\t\t\t\t\t\t\/\/ \u30cb\u30b3\u3061\u3083\u3093\u306e\u76ee\n\t\t\t\tcan.ellipse(35+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);\n\t\t\t\tcan.ellipse(65+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);\n\t\t\t\tcan.fillStyle = "black";\n\t\t\t\tcan.fill();\n\t\t\t}\n\t\t\tmove(){\t\t\t\t\t\t\t\/\/ \u30e0\u30fc\u30d6\u95a2\u6570\n\t\t\t\tif (this.x<0 || this.x>500){ this.moveX *= -1;}\t\t\/\/ \u5de6\u53f3\u58c1\u3068\u306e\u885d\u7a81\u5224\u5b9a\n\t\t\t\tif (this.y<0 || this.y>400){ this.moveY *= -1;}\t\t\/\/ \u5929\u4e95\u3068\u5e8a\u3068\u306e\u885d\u7a81\u5224\u5b9a\n\n\t\t\t\tthis.x += this.moveX;\t\t\t\t\t\t\t\t\/\/ \u6b21\u56de\u63cf\u753b\u4f4d\u7f6e\u3092\u8a2d\u5b9a\n\t\t\t\tthis.y += this.moveY;\n\t\t\t}\n\t\t}\n\n\t\t\/\/******************** \u30b9\u30de\u30a4\u30ea\u30fc\uff12\u30af\u30e9\u30b9 ********************\n\t\tclass Smiley2 extends Smiley{\t\/\/\u30b9\u30de\u30a4\u30ea\u30fc\u30af\u30e9\u30b9\u3092\u7d99\u627f\n\t\t\tmove(){\t\t\t\t\t\t\/\/move()\u30e1\u30bd\u30c3\u30c9\u3060\u3051\u5909\u66f4\u2192\u5929\u4e95\u3068\u5e8a\u3067\u53cd\u5c04\u3068\u540c\u6642\u306b\u8272\u304c\u5909\u5316\n\t\t\t\tlet arrayColor = ["white","red","blue","green"];\n\t\t\t\tif (this.x<0 || this.x>500){ this.moveX *= -1;}\t\n\t\t\t\tif (this.y<0 || this.y>400){\n\t\t\t\t\tthis.moveY *= -1;\n\t\t\t\t\tthis.color = arrayColor[Math.floor(Math.random()*4)];\n\t\t\t\t}\t\n\t\t\t\tthis.x += this.moveX;\t\n\t\t\t\tthis.y += this.moveY;\n\t\t\t}\n\t\t}\n\n\t\t\/\/******************** \u30b9\u30de\u30a4\u30ea\u30fc\uff13 ********************\n\t\tclass Smiley3 extends Smiley2{\t\/\/\u30b9\u30de\u30a4\u30ea\u30fc\uff12\u30af\u30e9\u30b9\u3092\u7d99\u627f\n\t\t\tdraw(){\t\t\t\t\t\t\/\/draw()\u30e1\u30bd\u30c3\u30c9\u3060\u3051\u5909\u66f4\u2192\u56db\u89d2\u3044\u30cb\u30b3\u3061\u3083\u3093\n\t\t\t\tcan.beginPath();\t\t\t\t\t\t\n\t\t\t\tcan.rect(this.x, this.y, 100, 100);\n\t\t\t\tcan.fillStyle = this.color;\n\t\t\t\tcan.fill();\n\t\t\t\tcan.beginPath();\t\t\t\t\t\t\n\t\t\t\tcan.arc(50+this.x, 50+this.y, 35, 0, Math.PI);\n\t\t\t\tcan.strokeStyle = "black";\n\t\t\t\tcan.lineWidth = 4;\n\t\t\t\tcan.stroke();\n\t\t\t\tcan.beginPath();\t\t\t\t\t\t\n\t\t\t\tcan.ellipse(35+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);\n\t\t\t\tcan.ellipse(65+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);\n\t\t\t\tcan.fillStyle = "black";\n\t\t\t\tcan.fill();\n\t\t\t}\n\t\t}\n\n\n\t\t\/\/ \u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u306a\u3069\n\t\tlet smileys = [];\n\t\tlet nico_1 = new Smiley3(0,0,3,5);\n\t\tlet nico_2 = new Smiley2(0,0,1,5);\n\t\tsmileys.push(nico_1);\n\t\tsmileys.push(nico_2);\n\t\tfor (let i=0; i<10; i++){\n\t\t\tlet moveX = Math.floor(Math.random()*5)+1;\n\t\t\tlet moveY = Math.floor(Math.random()*5)+1;\n\t\t\tlet smile = new Smiley(0,0,moveX,moveY);\n\t\t\tsmileys.push(smile);\t\t\t\n\t\t}\n\n\t\tfunction loop(){\n\t\t\tSmiley.clearField();\n\t\t\tfor (let i=0; i<smileys.length; i++){\n\t\t\t\tsmileys[i].draw();\n\t\t\t\tsmileys[i].move();\n\t\t\t}\n\t\t}\n\n\n\n\t<\/script>\n<\/body>\n<\/html><\/code><\/pre><\/div>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript\u306e\u30af\u30e9\u30b9\u3092\u89e3\u8aac\u3057\u305f\u52d5\u753b\u306e\u30b3\u30fc\u30c9 JavaScript\u306e\u5165\u9580\u8b1b\u5ea7\u3082\u305d\u308d\u305d\u308d\u7d42\u76e4\u3067\u3059\u3002\u6b21\u56de\u304b\u3089\u3044\u3088\u3044\u3088\u300c\u30c6\u30c8\u30ea\u30b9\u300d\u306e\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306b\u5165\u308a\u307e\u3059\u3002 \u30af\u30e9\u30b9\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411\u3067\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0 […]<\/p>\n","protected":false},"author":1,"featured_media":11594,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[350,340],"tags":[],"class_list":["post-11523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-programming"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts\/11523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11523"}],"version-history":[{"count":4,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts\/11523\/revisions"}],"predecessor-version":[{"id":11678,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/posts\/11523\/revisions\/11678"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=\/wp\/v2\/media\/11594"}],"wp:attachment":[{"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kusakarism.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}