В этой статье используется конкретный код реализации JavaScript Propect Canvas версии Lianliankan Game для вашей ссылки. Конкретный контент заключается в следующем
Изображение воспроизведения:
Код реализации:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> < /title> <style> #box { /*border: 1px solid #d1d1d1; */ переполнение: скрыто; позиция: относительно; надоеволос: 60px; } #bg {фоновое цветное: rgba (254,195,89, .2); } #mycanvas {position: Absolute; Верх: 36px; слева: 0; } #toolsbar {width: 100%; позиция: абсолютно; Внизу: 10px; слева: 0; переполнение: скрыто; } кнопка {ounline: 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: до, #Timeline Span: After {Display: Block; содержание: ""; Высота: 26px; Фон: URL (Images/time_bars-hd.png) без повторного перепонки; } #Timeline Span: до {width: 12px; } #Timeline Span: After { /*Ширина: 100%;* / founal Position: правый верх; -Webkit-flex: 1; /*Margin-top: -26px;*/} </style> </head> <body> <div id = "box"> <div id = "Timeline"> <pan> </span> </div> <div id = "Toolbar"> <Tood> re-list (3) </button> <tood> Hint (3) </button> </button> <3) </button> <tood> style = style = style = 'fight style = style = nector style = nector style = nalor = nalor = nabutor: "Кнопка: кнопка: кнопка: 3) </button>" </button> ". #00AA79; "> pause </button> <button Style =" Margin-left: 50px; type="text/javascript" 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 type = "text/javascript"> $ (function () {var matrix = map_arr [parseint (math.random ()*map_length); Новая розыгрыш ({id: "myCanvas", шаг: 42, матрица: _matrix.matrix, dir: "Images/", скорость: 300}); $ ("#mycanvas"). On ("click", function (e) {var x = e.offsetx, y = e.oftsety; var _x = math.floor ((x-1)/43), _y = math.floor ((y-1)/43); Controller.click (_x, _y); Parseint ($ (this) .Text (). Parseint ($ (this) .text (). Match (// D+/) [0]); Parseint ($ (this) .text (). Match (// d+/) [0]); $ (". Parse"). On ("click", function () {var bool = $ (this) .text () == "pause"; $ (this) .text (bool?Скачать исходный код: Смотрите игру в Лианлиане
Есть много примеров разработки игр JavaScript. Для получения подробной информации вы можете обратиться к специальной теме «JavaScript Classic Mini Games», чтобы узнать. Я надеюсь, что это будет полезно для вашего обучения.