この記事では、参照のためにLianLiankanゲームのJavaScriptライティングキャンバスバージョンの特定の実装コードを共有しています。特定のコンテンツは次のとおりです
複製画像：
実装コード：
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> < /title> <style> #box { /*border：1px solid＃d1d1d1; */オーバーフロー：非表示;位置：相対;パディングボトム：60px; } #bg {background-color：rgba（254,195,89、.2）; } #mycanvas {position：absolute;トップ：36px;左：0; } #toolsbar {width：100％;位置：絶対;下：10px;左：0;オーバーフロー：隠し; } button {outsline：none;国境：なし;幅：100px;高さ：32px;バックグラウンドカラー：＃D80049;色：#fffff;ボーダーラジウス：5px;マージン右：10px;カーソル：ポインター; } #timeline {height：26px;幅：568px;パディングボトム：10px;背景：url（images/time_slot-hd.png）繰り返し。オーバーフロー：隠し; } #timeline span {display：block;幅：100％;高さ：100％;ディスプレイ：Flex;オーバーフロー：隠し; } #timeline span：before、#timeline span：after {display：block;コンテンツ： "";高さ：26px;背景：url（images/time_bars-hd.png）繰り返し。 } #timelineスパン：{width：12px; } #timelineスパン：{ /*width：100％;* / background-position：右上。 -webkit-flex：1; /*マージントップ：-26px;*/} </style> </head> <body> <div id = "box"> <div id = "timeline"> <span> </span> </div> <div id = "toolsbar"> <ボタン＃00AA79; ">一時停止</button> <button style ="マージン左：＃00AA79; ">再び開始</button> </div> <canvas id = </canvas> <canvas id =" mycanvas "> src="../../public/js/jquery-1.11.2.min.js" ></script><script type="text/javascript" src="control.js" ></script><script type="text/javascript" src="matrix.js" ></script><script type="text/javascript" src="draw.js" >/script><script type = "text/javascript" src = "map.js">/script> <script> <text/javascript "> $（function（）{var matrix = map_arr [math.random（）*map_arr.length）]; window._matrix = new matrix（matrix、36）; window = new draw"： "ddraw = new draw = find.4）;マトリックス：_Matrix、dir： "Images/"、speed：300}）; e.offsetx、e.offsety; parseint（this） parseint（this）.text（// d+/）[0]; parseint（this）.text（// d+/）[0]; $（ "。parse"）ソースコードのダウンロード：Lianlianのゲームをご覧ください
JavaScriptライティングゲームの開発例はたくさんあります。詳細については、学習するための特別なトピック「JavaScript Classic Mini Games Summary」を参照できます。それがあなたの学習に役立つことを願っています。