![\"\u8d5b\u8f66\u6e38\u620f\"](\"http:\/\/sandbox.runjs.cn\/uploads\/rs\/133\/80kwuubo\/634.png\")
\n<\/p>\n\n\t\u524d\u6bb5\u65f6\u95f4\u5199\u4e86\u4e24\u7bc7React\u5f00\u53d1\u5165\u95e8\u6559\u7a0b\uff0c\u6709\u7f51\u53cb\u7559\u8a00\u662f\u5426\u6709\u5b9e\u6218\u9879\u76ee\uff1f\u6211\u4eca\u5929\u544a\u8bc9\u5927\u5bb6\u4e0d\u4ec5\u6709\uff0c\u800c\u4e14\u8fd8\u4e0d\u6b62\u4e00\u4e2a\uff0c\u8bf7\u5927\u5bb6\u9646\u7eed\u5173\u6ce8\u6211\u7f51\u7ad9\u4e0a\u7684\u65b0\u6587\u7ae0\u3002\u672c\u7bc7\u6587\u7ae0\u7684\u6807\u9898\u6211\u60f3\u4e86\u597d\u4e45\uff0c\u5982\u679c\u89c9\u5f97\u4e0d\u591f\u9192\u76ee\uff0c\u8bf7\u7559\u8a00\uff0c\u518d\u505a\u66f4\u6539\uff01\n<\/p>\n
\n\t\n<\/p>\n
\n\tReact\u5f00\u53d1\uff0c\u6211\u4eec\u9996\u5148\u9700\u8981\u5f15\u5165js\u5e93\u6587\u4ef6\u3002\u6211\u4f7f\u7528\u7684\u5168\u662fcdn\u7684\u5730\u5740\uff1a\n<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta http-equiv="Content-Type" content="text\/html; charset=UTF-8">\r\n\t\t<title>React\u5f00\u53d1\u7684\u6e38\u620f——\u4e1a\u4f59\u8349<\/title>\r\n\t\t<script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.23\/browser.min.js"><\/script>\r\n\t\t<script src="http:\/\/cdn.bootcss.com\/react\/15.2.0\/react.min.js"><\/script>\r\n\t\t<script src="http:\/\/cdn.bootcss.com\/react\/15.2.0\/react-dom.min.js"><\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div id="reactGame"><\/div>\r\n\t\t<script type="text\/babel">\r\n\t\t<\/script>\r\n\t<\/body>\r\n<\/html><\/pre>\n\n\t\u7136\u540e\u6211\u4eec\u9700\u8981\u521b\u5efaReact\u7ec4\u4ef6\uff0chtml\u4ee3\u7801\u975e\u5e38\u7b80\u5355\uff0c\u53ea\u6709\u4e00\u4e2a<div id="reactGame"><\/div><\/span><\/strong>\u3002\u521b\u5efa\u7ec4\u4ef6\u6211\u4eec\u4f7f\u7528React.createClass\u51fd\u6570\uff0c\u7136\u7528\u4f7f\u7528render\u65b9\u6cd5\u8fdb\u884c\u6e32\u67d3\u5230\u5143\u7d20\u4e0aReactDOM.render(<GameBoard\/>,document.getElementById("reactGame"));\n<\/p>\n
\r\n<script type="text\/babel">\r\nvar GameBoard = React.createClass({\r\n getInitialState : function(){\r\n return {\r\n gameState : 0\r\n }\r\n },\r\n render : function(){\r\n return <div className="board">\r\n <div className="roadbed"><\/div>\r\n <div className="road"}>\r\n <div className="hero"><\/div>\r\n <div className="enemy"><\/div>\r\n <\/div>\r\n <span className="start"><\/span>\r\n <span className="kilo"><\/span>\r\n <div className="failbub">\r\n <span className="failtext"><\/span>\r\n <span className="retry"><\/span>\r\n <\/div>\r\n <\/div>\r\n }\r\n});\r\nReactDOM.render(<GameBoard\/>,document.getElementById("reactGame"));\r\n<\/script><\/pre>\n\n\t\u5230\u8fd9\u91cc\uff0c\u754c\u9762\u5927\u81f4\u5c31\u5b8c\u6210\u4e86\uff0c\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u9700\u8981\u8ba9\u9a6c\u8def\u8fdb\u884c\u79fb\u52a8\u3002\u5177\u4f53\u7684\u505a\u6cd5\u5c31\u662f\uff0c\u8ba9\u5c0f\u8f66\u9759\u6b62\u5728\u5e95\u90e8\uff0c\u9a6c\u8def\u8fdb\u884c\u5faa\u73af\u7684\u5f80\u4e0b\u6eda\u52a8\u7684\u52a8\u753b\uff0c\u770b\u8d77\u6765\u5c31\u50cf\u662f\u5c0f\u8f66\u5728\u524d\u8fdb\u3002\n<\/p>\n
\r\n.roadbed{\r\n background:url(..\/resource\/road.png) repeat-y;\r\n width:480px;\r\n height:1600px;\r\n position:absolute;\r\n left:0;\r\n top:-800px;\r\n}\r\n.roadRun{\r\n -webkit-transform:translateZ(0);\r\n -webkit-animation:roadRun 1.2s linear infinite;\r\n}\r\n@-webkit-keyframes roadRun{\r\n 100%{ -webkit-transform:translateY(800px);}\r\n}<\/pre>\n\n\t\u63a5\u4e0b\u6765\u6211\u4eec\u9700\u8981\u76d1\u542c\u952e\u76d8\u7684\u5de6\u53f3\u952e\u548c\u7a7a\u683c\u952e\uff0c\u5de6\u53f3\u952e\u8fdb\u884c\u5c0f\u8f66\u79fb\u52a8\uff0c\u7a7a\u683c\u952e\u8fdb\u884c\u52a0\u901f\u3002\u4f7f\u7528componentDidMount\u65b9\u6cd5\u4e3a\u6e38\u620f\u6ce8\u518c\u4e00\u4e2a\u952e\u76d8\u4e8b\u4ef6\u3002\n<\/p>\n
\r\n\r\ngetInitialState : function(){\r\n\treturn {\r\n\t\tgameState : 0,\r\n\t\theroLoc : 0,\r\n\t}\r\n},\r\ngameStart : function(){\r\n\tthis.setState({\r\n\t\tgameState : 1\r\n\t})\r\n},\r\ngameHandle : function(e){\r\n\tif(this.state.gameState ==1){\r\n\t\tswitch(e.keyCode){\r\n\t\t\tcase 37:\r\n\t\t\t\tthis.setState({heroLoc : 0});\r\n\t\t\t\tbreak;\r\n\t\t\tcase 39:\r\n\t\t\t\tthis.setState({heroLoc : 1});\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t}\r\n},componentDidMount:function(){\r\n window.addEventListener("keydown", this.gameHandle, false);\r\n}<\/pre>\n\n\t\u73b0\u5728\u9700\u8981\u5730\u65b9\u521b\u5efa\u654c\u65b9\u8f66\u8f86\u4e86\uff0c\u654c\u65b9\u8f66\u8f86\u4e0e\u4e3b\u89d2\u8fd0\u52a8\u65b9\u5411\u4e00\u81f4\uff0c\u90fd\u662f\u5411\u4e0a\u8fd0\u52a8\uff0c\u7531\u4e8e\u4e3b\u89d2\u76f8\u5bf9\u56fa\u5b9a\uff0c\u901f\u5ea6\u53c8\u6bd4\u654c\u65b9\u8f66\u8f86\u5feb\uff0c\u6240\u4ee5enemy\u7684\u8fd0\u52a8\u65b9\u5411\u5b9e\u9645\u662f\u5411\u4e0b\u8fd0\u52a8\uff0c\u76f4\u81f3\u6d88\u5931\u5728\u5c4f\u5e55\u4e4b\u5916\u3002
\n\t\u4e3a\u4e86\u964d\u4f4e\u590d\u6742\u5ea6\uff0c\u6211\u4eec\u89c4\u5b9a\u5c4f\u5e55\u4e0a\u6bcf\u6b21\u53ea\u4f1a\u51fa\u73b0\u4e00\u8f86\u654c\u65b9\u8f66\u8f86\uff0c\u65b9\u5411\u968f\u673a\uff0c\u6240\u4ee5\u6211\u4eec\u53ea\u9700\u4e00\u4e2adiv\u4f5c\u4e3a\u654c\u65b9\u5c0f\u8f66\uff0c\u5728\u5c0f\u8f66\u8fd0\u52a8\u79bb\u5f00\u5c4f\u5e55\u540e\uff0c\u9a6c\u4e0a\u968f\u673a\u7ed9\u5c0f\u8f66\u6362\u4e0a\u4e0d\u540c\u7684\u8f66\u578b\u548c\u65b9\u5411\u7684class\u3002(\u5177\u4f53\u4ee3\u7801\u5c31\u770b\u4e0b\u9762\u7684\u5b8c\u6574\u4ee3\u7801\uff0c\u6211\u5c31\u4e0d\u5728\u8d34\u4e86)\n<\/p>\n\n\t\u6700\u540e\uff0c\u6211\u4eec\u8fd8\u7f3a\u4e4f\u78b0\u649e\u68c0\u6d4b\u673a\u5236\u3002\u6e38\u620f\u5df2\u7ecf\u6210\u529f\u8dd1\u8d77\u6765\u4e86\uff0c\u4f46\u4ec5\u4ec5\u662f\u4e00\u4e9b\u63a7\u5236\u64cd\u4f5c\u548c\u6548\u679c\u52a8\u753b\u7684\u8fd0\u884c\uff0c\u5e76\u6ca1\u6709\u6838\u5fc3\u7684\u6e38\u620f\u903b\u8f91\uff0c\u4e0b\u9762\u6211\u4eec\u52a0\u5165\u6e38\u620f\u7684\u6838\u5fc3\u903b\u8f91\uff0c\u78b0\u649e\u68c0\u6d4b\u3002
\n\t\u5982\u4f55\u5224\u65ad\u4e3b\u89d2\u4e0e\u654c\u65b9\u5c0f\u8f66\u78b0\u649e\u5230\u4e00\u8d77\u4e86\uff1f\u5176\u5b9e\u601d\u8def\u5f88\u7b80\u5355\uff0c\u6211\u65b9\u5c0f\u8f66\u4e0e\u654c\u65b9\u5c0f\u8f66\u4f4d\u4e8e\u540c\u4e00\u8f66\u9053\uff0c\u4e14\u654c\u65b9\u5c0f\u8f66\u7684\u8fd0\u52a8\u8ddd\u79bb\u5927\u4e8e\u821e\u53f0\u9ad8\u5ea6-\u6211\u65b9\u5c0f\u8f66\u9ad8\u5ea6\uff0c\u5373\u4e24\u8f66\u76f8\u649e\u3002(\u89c1\u5b8c\u6574\u4ee3\u7801)\n<\/p>\n\n\t\u597d\u4e86\uff0c\u73b0\u5728\u53ef\u4ee5\u5f00\u59cb\u6e38\u620f\u4e86\uff0c\u70b9\u51fb\u6b64\u5904\u7acb\u5373\u8bd5\u73a9\u8d5b\u8f66\u6e38\u620f<\/a>\u3002\n<\/p>\n
\n\t\u5982\u679c\u60f3\u8981\u6e90\u7801\uff0c\u5c31\u8bd5\u73a9\u6e38\u620f\u9875\u9762\uff0c\u53e6\u5b58\u5728\u81ea\u5df1\u7814\u7a76\u3002\u6216\u8005\u7559\u8a00\uff0c\u6216\u8005\u52a0\u7ad9\u957f\u7684qq\u7fa4\uff1a454796847\u3001135430763\n<\/p>\n
\n\t\u7248\u6743\u58f0\u660e\uff1a\u672c\u6587\u4e3a\u535a\u4e3b\u539f\u521b\u6587\u7ae0\uff0c\u672a\u7ecf\u535a\u4e3b\u5141\u8bb8\u4e0d\u5f97\u8f6c\u8f7d\u3002<\/strong><\/span><\/p>\n
<\/p>
\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1axttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p>
\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a\u4e1a\u4f59\u8349<\/a>\uff1a » React\u9879\u76ee\u5f00\u53d1\u5b9e\u6218\u4e4b\u4e1a\u4f59\u8349\u8d5b\u8f66\u6e38\u620f<\/a><\/p>","protected":false},"excerpt":{"rendered":"
\u524d\u6bb5\u65f6\u95f4\u5199\u4e86\u4e24\u7bc7React\u5f00\u53d1\u5165\u95e8\u6559\u7a0b\uff0c\u6709\u7f51\u53cb\u7559\u8a00\u662f\u5426\u6709\u5b9e\u6218\u9879\u76ee\uff1f\u6211\u4eca\u5929\u544a\u8bc9\u5927\u5bb6\u4e0d\u4ec5\u6709\uff0c\u800c\u4e14\u8fd8\u4e0d\u6b62\u4e00\u4e2a\uff0c\u8bf7\u5927\u5bb6 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[395,398,397,396],"class_list":["post-635","post","type-post","status-publish","format-standard","hentry","category-html5","tag-html5","tag-react"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=635"}],"version-history":[{"count":2,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/635\/revisions"}],"predecessor-version":[{"id":763,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/635\/revisions\/763"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}