817 lines
26 KiB
JavaScript
817 lines
26 KiB
JavaScript
|
/******/ (function() { // webpackBootstrap
|
|||
|
|
/******/ "use strict";
|
|||
|
|
/******/ var __webpack_modules__ = ([
|
|||
|
|
/* 0 */,
|
|||
|
|
/* 1 */
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
|
|||
|
|
/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_node_modules_less_loader_dist_cjs_js_index_less__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var options = {};
|
|||
|
|
|
|||
|
|
options.insert = "head";
|
|||
|
|
options.singleton = false;
|
|||
|
|
|
|||
|
|
var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_node_modules_less_loader_dist_cjs_js_index_less__WEBPACK_IMPORTED_MODULE_1__.default, options);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/* harmony default export */ __webpack_exports__["default"] = (_node_modules_css_loader_dist_cjs_js_node_modules_postcss_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_node_modules_less_loader_dist_cjs_js_index_less__WEBPACK_IMPORTED_MODULE_1__.default.locals || {});
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
/* 2 */
|
|||
|
|
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var isOldIE = function isOldIE() {
|
|||
|
|
var memo;
|
|||
|
|
return function memorize() {
|
|||
|
|
if (typeof memo === 'undefined') {
|
|||
|
|
// Test for IE <= 9 as proposed by Browserhacks
|
|||
|
|
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
|
|||
|
|
// Tests for existence of standard globals is to allow style-loader
|
|||
|
|
// to operate correctly into non-standard environments
|
|||
|
|
// @see https://github.com/webpack-contrib/style-loader/issues/177
|
|||
|
|
memo = Boolean(window && document && document.all && !window.atob);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return memo;
|
|||
|
|
};
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
var getTarget = function getTarget() {
|
|||
|
|
var memo = {};
|
|||
|
|
return function memorize(target) {
|
|||
|
|
if (typeof memo[target] === 'undefined') {
|
|||
|
|
var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself
|
|||
|
|
|
|||
|
|
if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {
|
|||
|
|
try {
|
|||
|
|
// This will throw an exception if access to iframe is blocked
|
|||
|
|
// due to cross-origin restrictions
|
|||
|
|
styleTarget = styleTarget.contentDocument.head;
|
|||
|
|
} catch (e) {
|
|||
|
|
// istanbul ignore next
|
|||
|
|
styleTarget = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
memo[target] = styleTarget;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return memo[target];
|
|||
|
|
};
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
var stylesInDom = [];
|
|||
|
|
|
|||
|
|
function getIndexByIdentifier(identifier) {
|
|||
|
|
var result = -1;
|
|||
|
|
|
|||
|
|
for (var i = 0; i < stylesInDom.length; i++) {
|
|||
|
|
if (stylesInDom[i].identifier === identifier) {
|
|||
|
|
result = i;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return result;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function modulesToDom(list, options) {
|
|||
|
|
var idCountMap = {};
|
|||
|
|
var identifiers = [];
|
|||
|
|
|
|||
|
|
for (var i = 0; i < list.length; i++) {
|
|||
|
|
var item = list[i];
|
|||
|
|
var id = options.base ? item[0] + options.base : item[0];
|
|||
|
|
var count = idCountMap[id] || 0;
|
|||
|
|
var identifier = "".concat(id, " ").concat(count);
|
|||
|
|
idCountMap[id] = count + 1;
|
|||
|
|
var index = getIndexByIdentifier(identifier);
|
|||
|
|
var obj = {
|
|||
|
|
css: item[1],
|
|||
|
|
media: item[2],
|
|||
|
|
sourceMap: item[3]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (index !== -1) {
|
|||
|
|
stylesInDom[index].references++;
|
|||
|
|
stylesInDom[index].updater(obj);
|
|||
|
|
} else {
|
|||
|
|
stylesInDom.push({
|
|||
|
|
identifier: identifier,
|
|||
|
|
updater: addStyle(obj, options),
|
|||
|
|
references: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
identifiers.push(identifier);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return identifiers;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function insertStyleElement(options) {
|
|||
|
|
var style = document.createElement('style');
|
|||
|
|
var attributes = options.attributes || {};
|
|||
|
|
|
|||
|
|
if (typeof attributes.nonce === 'undefined') {
|
|||
|
|
var nonce = true ? __webpack_require__.nc : 0;
|
|||
|
|
|
|||
|
|
if (nonce) {
|
|||
|
|
attributes.nonce = nonce;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Object.keys(attributes).forEach(function (key) {
|
|||
|
|
style.setAttribute(key, attributes[key]);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (typeof options.insert === 'function') {
|
|||
|
|
options.insert(style);
|
|||
|
|
} else {
|
|||
|
|
var target = getTarget(options.insert || 'head');
|
|||
|
|
|
|||
|
|
if (!target) {
|
|||
|
|
throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
target.appendChild(style);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return style;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function removeStyleElement(style) {
|
|||
|
|
// istanbul ignore if
|
|||
|
|
if (style.parentNode === null) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
style.parentNode.removeChild(style);
|
|||
|
|
}
|
|||
|
|
/* istanbul ignore next */
|
|||
|
|
|
|||
|
|
|
|||
|
|
var replaceText = function replaceText() {
|
|||
|
|
var textStore = [];
|
|||
|
|
return function replace(index, replacement) {
|
|||
|
|
textStore[index] = replacement;
|
|||
|
|
return textStore.filter(Boolean).join('\n');
|
|||
|
|
};
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
function applyToSingletonTag(style, index, remove, obj) {
|
|||
|
|
var css = remove ? '' : obj.media ? "@media ".concat(obj.media, " {").concat(obj.css, "}") : obj.css; // For old IE
|
|||
|
|
|
|||
|
|
/* istanbul ignore if */
|
|||
|
|
|
|||
|
|
if (style.styleSheet) {
|
|||
|
|
style.styleSheet.cssText = replaceText(index, css);
|
|||
|
|
} else {
|
|||
|
|
var cssNode = document.createTextNode(css);
|
|||
|
|
var childNodes = style.childNodes;
|
|||
|
|
|
|||
|
|
if (childNodes[index]) {
|
|||
|
|
style.removeChild(childNodes[index]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (childNodes.length) {
|
|||
|
|
style.insertBefore(cssNode, childNodes[index]);
|
|||
|
|
} else {
|
|||
|
|
style.appendChild(cssNode);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyToTag(style, options, obj) {
|
|||
|
|
var css = obj.css;
|
|||
|
|
var media = obj.media;
|
|||
|
|
var sourceMap = obj.sourceMap;
|
|||
|
|
|
|||
|
|
if (media) {
|
|||
|
|
style.setAttribute('media', media);
|
|||
|
|
} else {
|
|||
|
|
style.removeAttribute('media');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (sourceMap && typeof btoa !== 'undefined') {
|
|||
|
|
css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */");
|
|||
|
|
} // For old IE
|
|||
|
|
|
|||
|
|
/* istanbul ignore if */
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (style.styleSheet) {
|
|||
|
|
style.styleSheet.cssText = css;
|
|||
|
|
} else {
|
|||
|
|
while (style.firstChild) {
|
|||
|
|
style.removeChild(style.firstChild);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
style.appendChild(document.createTextNode(css));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var singleton = null;
|
|||
|
|
var singletonCounter = 0;
|
|||
|
|
|
|||
|
|
function addStyle(obj, options) {
|
|||
|
|
var style;
|
|||
|
|
var update;
|
|||
|
|
var remove;
|
|||
|
|
|
|||
|
|
if (options.singleton) {
|
|||
|
|
var styleIndex = singletonCounter++;
|
|||
|
|
style = singleton || (singleton = insertStyleElement(options));
|
|||
|
|
update = applyToSingletonTag.bind(null, style, styleIndex, false);
|
|||
|
|
remove = applyToSingletonTag.bind(null, style, styleIndex, true);
|
|||
|
|
} else {
|
|||
|
|
style = insertStyleElement(options);
|
|||
|
|
update = applyToTag.bind(null, style, options);
|
|||
|
|
|
|||
|
|
remove = function remove() {
|
|||
|
|
removeStyleElement(style);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
update(obj);
|
|||
|
|
return function updateStyle(newObj) {
|
|||
|
|
if (newObj) {
|
|||
|
|
if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
update(obj = newObj);
|
|||
|
|
} else {
|
|||
|
|
remove();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
module.exports = function (list, options) {
|
|||
|
|
options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
|
|||
|
|
// tags it will allow on a page
|
|||
|
|
|
|||
|
|
if (!options.singleton && typeof options.singleton !== 'boolean') {
|
|||
|
|
options.singleton = isOldIE();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
list = list || [];
|
|||
|
|
var lastIdentifiers = modulesToDom(list, options);
|
|||
|
|
return function update(newList) {
|
|||
|
|
newList = newList || [];
|
|||
|
|
|
|||
|
|
if (Object.prototype.toString.call(newList) !== '[object Array]') {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (var i = 0; i < lastIdentifiers.length; i++) {
|
|||
|
|
var identifier = lastIdentifiers[i];
|
|||
|
|
var index = getIndexByIdentifier(identifier);
|
|||
|
|
stylesInDom[index].references--;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var newLastIdentifiers = modulesToDom(newList, options);
|
|||
|
|
|
|||
|
|
for (var _i = 0; _i < lastIdentifiers.length; _i++) {
|
|||
|
|
var _identifier = lastIdentifiers[_i];
|
|||
|
|
|
|||
|
|
var _index = getIndexByIdentifier(_identifier);
|
|||
|
|
|
|||
|
|
if (stylesInDom[_index].references === 0) {
|
|||
|
|
stylesInDom[_index].updater();
|
|||
|
|
|
|||
|
|
stylesInDom.splice(_index, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lastIdentifiers = newLastIdentifiers;
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
/* 3 */
|
|||
|
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
|
|||
|
|
/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0__);
|
|||
|
|
// Imports
|
|||
|
|
|
|||
|
|
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_0___default()(function(i){return i[1]});
|
|||
|
|
// Module
|
|||
|
|
___CSS_LOADER_EXPORT___.push([module.id, "* {\n margin: 0;\n padding: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\nbody {\n width: 100vw;\n height: 100vh;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.main {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n width: 360px;\n height: 420px;\n background-color: #ccc;\n border: 10px solid black;\n border-radius: 40px;\n}\n.stage {\n position: relative;\n width: 304px;\n height: 304px;\n border: 2px solid black;\n}\n.stage .snake > div {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: #000;\n border: 1px solid #ccc;\n}\n.stage .food {\n position: absolute;\n top: 0;\n left: 20px;\n width: 10px;\n height: 10px;\n background-color: yellow;\n border: 1px solid #ccc;\n border-radius: 50%;\n}\n.point {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n width: 100%;\n}\n", ""]);
|
|||
|
|
// Exports
|
|||
|
|
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
|
|||
|
|
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
/* 4 */
|
|||
|
|
/***/ (function(module) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
MIT License http://www.opensource.org/licenses/mit-license.php
|
|||
|
|
Author Tobias Koppers @sokra
|
|||
|
|
*/
|
|||
|
|
// css base code, injected by the css-loader
|
|||
|
|
// eslint-disable-next-line func-names
|
|||
|
|
module.exports = function (cssWithMappingToString) {
|
|||
|
|
var list = []; // return the list of modules as css string
|
|||
|
|
|
|||
|
|
list.toString = function toString() {
|
|||
|
|
return this.map(function (item) {
|
|||
|
|
var content = cssWithMappingToString(item);
|
|||
|
|
|
|||
|
|
if (item[2]) {
|
|||
|
|
return "@media ".concat(item[2], " {").concat(content, "}");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return content;
|
|||
|
|
}).join("");
|
|||
|
|
}; // import a list of modules into the list
|
|||
|
|
// eslint-disable-next-line func-names
|
|||
|
|
|
|||
|
|
|
|||
|
|
list.i = function (modules, mediaQuery, dedupe) {
|
|||
|
|
if (typeof modules === "string") {
|
|||
|
|
// eslint-disable-next-line no-param-reassign
|
|||
|
|
modules = [[null, modules, ""]];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var alreadyImportedModules = {};
|
|||
|
|
|
|||
|
|
if (dedupe) {
|
|||
|
|
for (var i = 0; i < this.length; i++) {
|
|||
|
|
// eslint-disable-next-line prefer-destructuring
|
|||
|
|
var id = this[i][0];
|
|||
|
|
|
|||
|
|
if (id != null) {
|
|||
|
|
alreadyImportedModules[id] = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (var _i = 0; _i < modules.length; _i++) {
|
|||
|
|
var item = [].concat(modules[_i]);
|
|||
|
|
|
|||
|
|
if (dedupe && alreadyImportedModules[item[0]]) {
|
|||
|
|
// eslint-disable-next-line no-continue
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (mediaQuery) {
|
|||
|
|
if (!item[2]) {
|
|||
|
|
item[2] = mediaQuery;
|
|||
|
|
} else {
|
|||
|
|
item[2] = "".concat(mediaQuery, " and ").concat(item[2]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
list.push(item);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return list;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
/* 5 */
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony import */ var _snake__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
|
|||
|
|
/* harmony import */ var _food__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7);
|
|||
|
|
/* harmony import */ var _point__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
|
|||
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|||
|
|
|
|||
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|||
|
|
|
|||
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|||
|
|
|
|||
|
|
//游戏控制器
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var GameControl = /*#__PURE__*/function () {
|
|||
|
|
function GameControl() {
|
|||
|
|
_classCallCheck(this, GameControl);
|
|||
|
|
|
|||
|
|
// 存储移动的方向
|
|||
|
|
this.direction = ''; // 游戏是否继续
|
|||
|
|
|
|||
|
|
this.isLive = true;
|
|||
|
|
this.snake = new _snake__WEBPACK_IMPORTED_MODULE_0__.default();
|
|||
|
|
this.food = new _food__WEBPACK_IMPORTED_MODULE_1__.default();
|
|||
|
|
this.point = new _point__WEBPACK_IMPORTED_MODULE_2__.default(10, 3);
|
|||
|
|
this.init();
|
|||
|
|
} // 游戏初始化的方法
|
|||
|
|
|
|||
|
|
|
|||
|
|
_createClass(GameControl, [{
|
|||
|
|
key: "init",
|
|||
|
|
value: function init() {
|
|||
|
|
// 绑定键盘事件
|
|||
|
|
document.addEventListener('keydown', this.keydownHandle.bind(this)); // document调用这个函数, 这里的this是document， 所以要么改成箭头函数，要么用bind
|
|||
|
|
|
|||
|
|
this.run();
|
|||
|
|
} // 按键按下事件
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "keydownHandle",
|
|||
|
|
value: function keydownHandle(e) {
|
|||
|
|
// console.log(this)
|
|||
|
|
// console.log(e.key);
|
|||
|
|
this.direction = e.key;
|
|||
|
|
} // 蛇移动的方法
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "run",
|
|||
|
|
value: function run() {
|
|||
|
|
var X = this.snake.X;
|
|||
|
|
var Y = this.snake.Y; // 检查有没有吃到食物
|
|||
|
|
|
|||
|
|
this.checkEat(X, Y); // 控制移动
|
|||
|
|
|
|||
|
|
switch (this.direction) {
|
|||
|
|
// 上
|
|||
|
|
case "ArrowUp":
|
|||
|
|
case "Up":
|
|||
|
|
Y -= 10;
|
|||
|
|
break;
|
|||
|
|
//下
|
|||
|
|
|
|||
|
|
case "ArrowDown":
|
|||
|
|
case "Down":
|
|||
|
|
Y += 10;
|
|||
|
|
break;
|
|||
|
|
// 左
|
|||
|
|
|
|||
|
|
case "ArrowLeft":
|
|||
|
|
case "Left":
|
|||
|
|
X -= 10;
|
|||
|
|
break;
|
|||
|
|
// 右
|
|||
|
|
|
|||
|
|
case "ArrowRight":
|
|||
|
|
case "Right":
|
|||
|
|
X += 10;
|
|||
|
|
break;
|
|||
|
|
} // 先检查有没有撞墙
|
|||
|
|
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
this.snake.X = X;
|
|||
|
|
this.snake.Y = Y;
|
|||
|
|
} catch (e) {
|
|||
|
|
// 捕获到异常， 结束运行
|
|||
|
|
alert(e.message);
|
|||
|
|
clearTimeout(this.timeID);
|
|||
|
|
this.isLive = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.timeID && clearTimeout(this.timeID); // 短路运算
|
|||
|
|
|
|||
|
|
if (this.isLive) {
|
|||
|
|
this.timeID = setTimeout(this.run.bind(this), 300 - (this.point.level - 1) * 30);
|
|||
|
|
}
|
|||
|
|
} // 检查是否吃到食物
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "checkEat",
|
|||
|
|
value: function checkEat(X, Y) {
|
|||
|
|
if (X === this.food.X && Y === this.food.Y) {
|
|||
|
|
console.log('吃到食物');
|
|||
|
|
this.food.change();
|
|||
|
|
this.point.addScore();
|
|||
|
|
this.snake.addBody();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]);
|
|||
|
|
|
|||
|
|
return GameControl;
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
/* harmony default export */ __webpack_exports__["default"] = (GameControl);
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
/* 6 */
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|||
|
|
|
|||
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|||
|
|
|
|||
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|||
|
|
|
|||
|
|
var Snake = /*#__PURE__*/function () {
|
|||
|
|
function Snake() {
|
|||
|
|
_classCallCheck(this, Snake);
|
|||
|
|
|
|||
|
|
this.element = document.getElementById('snake');
|
|||
|
|
this.head = document.querySelector('#snake>div'); // 提示类型不匹配,断言
|
|||
|
|
|
|||
|
|
this.bodies = document.getElementById('snake').getElementsByTagName('div'); //query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．
|
|||
|
|
// 在使用的时候getElement这种方法性能比较好，query选择符则比较方便
|
|||
|
|
} // 蛇头的坐标
|
|||
|
|
|
|||
|
|
|
|||
|
|
_createClass(Snake, [{
|
|||
|
|
key: "X",
|
|||
|
|
get: function get() {
|
|||
|
|
return this.head.offsetLeft;
|
|||
|
|
},
|
|||
|
|
set: // 设置蛇头的坐标
|
|||
|
|
function set(value) {
|
|||
|
|
if (this.X == value) return; // 蛇撞墙
|
|||
|
|
|
|||
|
|
if (value < 0 || value > 290) {
|
|||
|
|
throw new Error('蛇撞墙了');
|
|||
|
|
} // 没撞墙
|
|||
|
|
// 长度大于1时，禁止掉头
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (this.bodies[1] && this.bodies[1].offsetLeft === value) {
|
|||
|
|
console.log("发生了掉头");
|
|||
|
|
|
|||
|
|
if (value > this.X) {
|
|||
|
|
// 向右掉头， 则要往左修正value
|
|||
|
|
value = this.X - 10;
|
|||
|
|
} else {
|
|||
|
|
value = this.X + 10;
|
|||
|
|
}
|
|||
|
|
} // 移动身体
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.moveBody(); // 这里同样要先移动身体， 再移动头
|
|||
|
|
// 移动头
|
|||
|
|
|
|||
|
|
this.head.style.left = value + 'px'; // 检查头是否撞到了身体
|
|||
|
|
|
|||
|
|
if (this.bodies.length > 4) {
|
|||
|
|
this.checkBreak();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
key: "Y",
|
|||
|
|
get: function get() {
|
|||
|
|
return this.head.offsetTop;
|
|||
|
|
},
|
|||
|
|
set: function set(value) {
|
|||
|
|
if (this.Y == value) return; // 蛇撞墙
|
|||
|
|
|
|||
|
|
if (value < 0 || value > 290) {
|
|||
|
|
throw new Error('蛇撞墙了');
|
|||
|
|
} // 没撞墙
|
|||
|
|
// 长度大于1 ， 禁止掉头
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (this.bodies[1] && this.bodies[1].offsetTop === value) {
|
|||
|
|
console.log("发生了掉头");
|
|||
|
|
|
|||
|
|
if (value > this.Y) {
|
|||
|
|
// 向下掉头， 则要往上修正value
|
|||
|
|
value = this.Y - 10;
|
|||
|
|
} else {
|
|||
|
|
value = this.Y + 10;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.moveBody();
|
|||
|
|
this.head.style.top = value + 'px'; // 检查头是否撞到了身体
|
|||
|
|
|
|||
|
|
this.checkBreak();
|
|||
|
|
} // 增加身体
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "addBody",
|
|||
|
|
value: function addBody() {
|
|||
|
|
this.element.insertAdjacentHTML("beforeend", "<div></div>");
|
|||
|
|
} // 移动身体
|
|||
|
|
// 最后一节移到倒数第二节， 把倒数第二节移到倒数第三节 ... 从后开始移动
|
|||
|
|
// 蛇头不用管
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "moveBody",
|
|||
|
|
value: function moveBody() {
|
|||
|
|
for (var i = this.bodies.length - 1; i > 0; i--) {
|
|||
|
|
// 前一截的位置
|
|||
|
|
var x = this.bodies[i - 1].offsetLeft;
|
|||
|
|
var y = this.bodies[i - 1].offsetTop; // HTMLElement 对象表示 HTML 中的一个元素。
|
|||
|
|
// HTMLElement 对象继承了Element 对象的标准属性，也实现了一些非标准属性
|
|||
|
|
// HTMLElement 简单的看成Element的子类
|
|||
|
|
// 给当前的一截赋值
|
|||
|
|
|
|||
|
|
this.bodies[i].style.left = x + 'px';
|
|||
|
|
this.bodies[i].style.top = y + 'px';
|
|||
|
|
}
|
|||
|
|
} // 检查撞身体
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "checkBreak",
|
|||
|
|
value: function checkBreak() {
|
|||
|
|
for (var i = 4; i < this.bodies.length; i++) {
|
|||
|
|
var bd = this.bodies[i];
|
|||
|
|
|
|||
|
|
if (bd.offsetLeft === this.X && bd.offsetTop === this.Y) {
|
|||
|
|
throw new Error('蛇撞到自己了');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]);
|
|||
|
|
|
|||
|
|
return Snake;
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
/* harmony default export */ __webpack_exports__["default"] = (Snake);
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
/* 7 */
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|||
|
|
|
|||
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|||
|
|
|
|||
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|||
|
|
|
|||
|
|
// 定义食物类
|
|||
|
|
var Food = /*#__PURE__*/function () {
|
|||
|
|
function Food() {
|
|||
|
|
_classCallCheck(this, Food);
|
|||
|
|
|
|||
|
|
this.element = document.getElementById('food'); // 这里的感叹号是非null和非undefined的类型断言
|
|||
|
|
|
|||
|
|
this.change();
|
|||
|
|
} // 获取食物的坐标
|
|||
|
|
|
|||
|
|
|
|||
|
|
_createClass(Food, [{
|
|||
|
|
key: "X",
|
|||
|
|
get: function get() {
|
|||
|
|
return this.element.offsetLeft;
|
|||
|
|
}
|
|||
|
|
}, {
|
|||
|
|
key: "Y",
|
|||
|
|
get: function get() {
|
|||
|
|
return this.element.offsetTop;
|
|||
|
|
} // 修改食物的坐标
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "change",
|
|||
|
|
value: function change() {
|
|||
|
|
this.element.style.left = Math.round(Math.random() * 29) * 10 + 'px';
|
|||
|
|
this.element.style.top = Math.round(Math.random() * 29) * 10 + 'px';
|
|||
|
|
}
|
|||
|
|
}]);
|
|||
|
|
|
|||
|
|
return Food;
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
/* harmony default export */ __webpack_exports__["default"] = (Food);
|
|||
|
|
|
|||
|
|
/***/ }),
|
|||
|
|
/* 8 */
|
|||
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|||
|
|
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|||
|
|
|
|||
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|||
|
|
|
|||
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|||
|
|
|
|||
|
|
//定义统计类
|
|||
|
|
var Point = /*#__PURE__*/function () {
|
|||
|
|
function Point() {
|
|||
|
|
var maxLevel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
|
|||
|
|
var upScore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
|
|||
|
|
|
|||
|
|
_classCallCheck(this, Point);
|
|||
|
|
|
|||
|
|
this.score = 0;
|
|||
|
|
this.level = 1;
|
|||
|
|
this.maxLevel = maxLevel;
|
|||
|
|
this.upScore = upScore;
|
|||
|
|
this.scoreEle = document.getElementById('score');
|
|||
|
|
this.levelEle = document.getElementById('level');
|
|||
|
|
} // 增加积分
|
|||
|
|
|
|||
|
|
|
|||
|
|
_createClass(Point, [{
|
|||
|
|
key: "addScore",
|
|||
|
|
value: function addScore() {
|
|||
|
|
this.scoreEle.innerHTML = ++this.score + ''; // 整除时升级
|
|||
|
|
|
|||
|
|
if (this.score % this.upScore === 0) {
|
|||
|
|
this.levelUp();
|
|||
|
|
}
|
|||
|
|
} // 增加等级
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
key: "levelUp",
|
|||
|
|
value: function levelUp() {
|
|||
|
|
if (this.level < this.maxLevel) {
|
|||
|
|
this.levelEle.innerHTML = ++this.level + '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]);
|
|||
|
|
|
|||
|
|
return Point;
|
|||
|
|
}();
|
|||
|
|
|
|||
|
|
/* harmony default export */ __webpack_exports__["default"] = (Point);
|
|||
|
|
|
|||
|
|
/***/ })
|
|||
|
|
/******/ ]);
|
|||
|
|
/************************************************************************/
|
|||
|
|
/******/ // The module cache
|
|||
|
|
/******/ var __webpack_module_cache__ = {};
|
|||
|
|
/******/
|
|||
|
|
/******/ // The require function
|
|||
|
|
/******/ function __webpack_require__(moduleId) {
|
|||
|
|
/******/ // Check if module is in cache
|
|||
|
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|||
|
|
/******/ if (cachedModule !== undefined) {
|
|||
|
|
/******/ return cachedModule.exports;
|
|||
|
|
/******/ }
|
|||
|
|
/******/ // Create a new module (and put it into the cache)
|
|||
|
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|||
|
|
/******/ id: moduleId,
|
|||
|
|
/******/ // no module.loaded needed
|
|||
|
|
/******/ exports: {}
|
|||
|
|
/******/ };
|
|||
|
|
/******/
|
|||
|
|
/******/ // Execute the module function
|
|||
|
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|||
|
|
/******/
|
|||
|
|
/******/ // Return the exports of the module
|
|||
|
|
/******/ return module.exports;
|
|||
|
|
/******/ }
|
|||
|
|
/******/
|
|||
|
|
/************************************************************************/
|
|||
|
|
/******/ /* webpack/runtime/compat get default export */
|
|||
|
|
/******/ !function() {
|
|||
|
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|||
|
|
/******/ __webpack_require__.n = function(module) {
|
|||
|
|
/******/ var getter = module && module.__esModule ?
|
|||
|
|
/******/ function() { return module['default']; } :
|
|||
|
|
/******/ function() { return module; };
|
|||
|
|
/******/ __webpack_require__.d(getter, { a: getter });
|
|||
|
|
/******/ return getter;
|
|||
|
|
/******/ };
|
|||
|
|
/******/ }();
|
|||
|
|
/******/
|
|||
|
|
/******/ /* webpack/runtime/define property getters */
|
|||
|
|
/******/ !function() {
|
|||
|
|
/******/ // define getter functions for harmony exports
|
|||
|
|
/******/ __webpack_require__.d = function(exports, definition) {
|
|||
|
|
/******/ for(var key in definition) {
|
|||
|
|
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|||
|
|
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|||
|
|
/******/ }
|
|||
|
|
/******/ }
|
|||
|
|
/******/ };
|
|||
|
|
/******/ }();
|
|||
|
|
/******/
|
|||
|
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|||
|
|
/******/ !function() {
|
|||
|
|
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
|
|||
|
|
/******/ }();
|
|||
|
|
/******/
|
|||
|
|
/******/ /* webpack/runtime/make namespace object */
|
|||
|
|
/******/ !function() {
|
|||
|
|
/******/ // define __esModule on exports
|
|||
|
|
/******/ __webpack_require__.r = function(exports) {
|
|||
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|||
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|||
|
|
/******/ }
|
|||
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|||
|
|
/******/ };
|
|||
|
|
/******/ }();
|
|||
|
|
/******/
|
|||
|
|
/************************************************************************/
|
|||
|
|
var __webpack_exports__ = {};
|
|||
|
|
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
|
|||
|
|
!function() {
|
|||
|
|
__webpack_require__.r(__webpack_exports__);
|
|||
|
|
/* harmony import */ var _index_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
|
|||
|
|
/* harmony import */ var _modules_gameControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
|
|||
|
|
|
|||
|
|
|
|||
|
|
new _modules_gameControl__WEBPACK_IMPORTED_MODULE_1__.default(); // 调试
|
|||
|
|
}();
|
|||
|
|
/******/ })()
|
|||
|
|
;
|