invasion
Version:
get invaded by invaders in this invasion
631 lines (527 loc) • 19.1 kB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
const Constants = {
SCREEN_HEIGHT: window.screen.height,
SCREEN_WIDTH: window.screen.width
};
/* harmony default export */ __webpack_exports__["a"] = Constants;
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_constants_js__ = __webpack_require__(0);
class Grid {
constructor(blockSize) {
this.blocks = [];
this.blockSize = blockSize;
this.rows = Math.ceil(__WEBPACK_IMPORTED_MODULE_0__utils_constants_js__["a" /* default */].SCREEN_HEIGHT / this.blockSize);
this.columns = Math.ceil(__WEBPACK_IMPORTED_MODULE_0__utils_constants_js__["a" /* default */].SCREEN_WIDTH / this.blockSize);
this.gap = 0;
}
generateBlocks() {
let startX = 0;
let startY = 0;
for (let row = 0; row < this.rows; row++) {
let newRow = [];
for (let col = 0; col < this.columns; col++) {
let block = {
x: startX,
y: startY
};
startY = startY + this.blockSize;
newRow.push(block);
}
this.blocks.push(newRow);
startX = startX + this.blockSize;
startY = 0;
}
return this.blocks;
}
getRandomBlock() {
let rows = this.rows - 1;
let columns = this.columns - 1;
let x = Math.ceil(Math.random() * rows);
let y = Math.ceil(Math.random() * columns);
return this.blocks[x][y];
}
draw() {
//grid context
let blocks = this.blocks.length == 0 ? this.generateBlocks() : this.blocks;
let size = this.blockSize;
let gap = this.gap;
function drawRow(row, ctx) {
for (let i = 0; i < row.length; i++) {
ctx.strokeStyle = "red";
ctx.strokeRect(row[i].y + gap, row[i].x + gap, size, size);
}
}
//applying canvas context
return function () {
let rows = blocks.length;
for (let i = 0; i < rows; i++) {
drawRow(blocks[i], this);
}
};
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = Grid;
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
const path = [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6], [6, 7], [7, 0]];
class Invader {
constructor(pos, size) {
this.x = pos.x;
this.y = pos.y;
this.size = size;
this.generatePoints();
}
generatePoints() {
this.points = [];
let point1 = { x: this.x, y: this.y };
let point2 = { x: this.x + this.size / 2, y: this.y - this.size / 2 };
let point3 = { x: this.x + this.size, y: this.y };
let point4 = { x: point3.x - this.size / 6, y: point3.y + this.size / 6 };
let point5 = { x: point4.x - this.size / 6, y: point4.y - this.size / 6 };
let point6 = { x: point5.x - this.size / 6, y: point5.y + this.size / 6 };
let point7 = { x: point6.x - this.size / 6, y: point6.y - this.size / 6 };
let point8 = { x: point7.x - this.size / 6, y: point7.y + this.size / 6 };
this.points.push(point1, point2, point3, point4, point5, point6, point7, point8);
}
draw() {
let points = this.points.length > 0 ? this.points : this.generatePoints();
function drawHandler(line) {
let [point1, point2] = line;
this.save();
this.strokeStyle = "green";
this.beginPath();
this.moveTo(points[point1].x, points[point1].y);
this.lineTo(points[point2].x, points[point2].y);
this.stroke();
this.restore();
}
return function () {
for (let i = 0; i < path.length; i++) {
let dh = drawHandler.bind(this);
dh(path[i]);
}
};
}
}
/* harmony export (immutable) */ __webpack_exports__["a"] = Invader;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(5);
if(typeof content === 'string') content = [[module.i, content, '']];
// add the styles to the DOM
var update = __webpack_require__(6)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!./../node_modules/css-loader/index.js!./style.css", function() {
var newContent = require("!!./../node_modules/css-loader/index.js!./style.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/* 4 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function () {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for (var i = 0; i < this.length; i++) {
var item = this[i];
if (item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function (modules, mediaQuery) {
if (typeof modules === "string") modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for (var i = 0; i < this.length; i++) {
var id = this[i][0];
if (typeof id === "number") alreadyImportedModules[id] = true;
}
for (i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)();
// imports
// module
exports.push([module.i, "#root {\n position: fixed;\n height: 100vh;\n width: 100vw;\n top: 0;\n left: 0;\n}\n\nbody {\n overflow: hidden;\n margin: 0 !important;\n}", ""]);
// exports
/***/ }),
/* 6 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isOldIE = memoize(function() {
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0,
styleElementsInsertedAtTop = [];
module.exports = function(list, options) {
if(typeof DEBUG !== "undefined" && DEBUG) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
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 (typeof options.singleton === "undefined") options.singleton = isOldIE();
// By default, add <style> tags to the bottom of <head>.
if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
}
function addStylesToDom(styles, options) {
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(list) {
var styles = [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
styles.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
return styles;
}
function insertStyleElement(options, styleElement) {
var head = getHeadElement();
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
if (options.insertAt === "top") {
if(!lastStyleElementInsertedAtTop) {
head.insertBefore(styleElement, head.firstChild);
} else if(lastStyleElementInsertedAtTop.nextSibling) {
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
} else {
head.appendChild(styleElement);
}
styleElementsInsertedAtTop.push(styleElement);
} else if (options.insertAt === "bottom") {
head.appendChild(styleElement);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
}
}
function removeStyleElement(styleElement) {
styleElement.parentNode.removeChild(styleElement);
var idx = styleElementsInsertedAtTop.indexOf(styleElement);
if(idx >= 0) {
styleElementsInsertedAtTop.splice(idx, 1);
}
}
function createStyleElement(options) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
insertStyleElement(options, styleElement);
return styleElement;
}
function createLinkElement(options) {
var linkElement = document.createElement("link");
linkElement.rel = "stylesheet";
insertStyleElement(options, linkElement);
return linkElement;
}
function addStyle(obj, options) {
var styleElement, update, remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement(options));
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else if(obj.sourceMap &&
typeof URL === "function" &&
typeof URL.createObjectURL === "function" &&
typeof URL.revokeObjectURL === "function" &&
typeof Blob === "function" &&
typeof btoa === "function") {
styleElement = createLinkElement(options);
update = updateLink.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
if(styleElement.href)
URL.revokeObjectURL(styleElement.href);
};
} else {
styleElement = createStyleElement(options);
update = applyToTag.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
};
}
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();
}
};
}
var replaceText = (function () {
var textStore = [];
return function (index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
})();
function applyToSingletonTag(styleElement, index, remove, obj) {
var css = remove ? "" : obj.css;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = styleElement.childNodes;
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index]);
} else {
styleElement.appendChild(cssNode);
}
}
}
function applyToTag(styleElement, obj) {
var css = obj.css;
var media = obj.media;
if(media) {
styleElement.setAttribute("media", media)
}
if(styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while(styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}
styleElement.appendChild(document.createTextNode(css));
}
}
function updateLink(linkElement, obj) {
var css = obj.css;
var sourceMap = obj.sourceMap;
if(sourceMap) {
// http://stackoverflow.com/a/26603875
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}
var blob = new Blob([css], { type: "text/css" });
var oldSrc = linkElement.href;
linkElement.href = URL.createObjectURL(blob);
if(oldSrc)
URL.revokeObjectURL(oldSrc);
}
/***/ }),
/* 7 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
;
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_constants__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__app_grid__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__app_invader__ = __webpack_require__(2);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__css_style_css__ = __webpack_require__(3);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__css_style_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3__css_style_css__);
const root = document.getElementById("root");
const canvas = document.createElement("canvas");
canvas.height = __WEBPACK_IMPORTED_MODULE_0__utils_constants__["a" /* default */].SCREEN_HEIGHT;
canvas.width = __WEBPACK_IMPORTED_MODULE_0__utils_constants__["a" /* default */].SCREEN_WIDTH;
const ctx = canvas.getContext("2d");
root.appendChild(canvas);
function loop(fn) {
window.webkitRequestAnimationFrame(fn);
}
class Invasion {
constructor() {
this.grid = new __WEBPACK_IMPORTED_MODULE_1__app_grid__["a" /* default */](25);
this.grid.generateBlocks();
this.invaders = [];
this.createInvaders();
}
clear() {
ctx.clearRect(0, 0, __WEBPACK_IMPORTED_MODULE_0__utils_constants__["a" /* default */].SCREEN_HEIGHT, __WEBPACK_IMPORTED_MODULE_0__utils_constants__["a" /* default */].SCREEN_WIDTH);
}
createInvaders() {
for (let i = 0; i < 5; i++) {
let coords = this.grid.getRandomBlock();
let invader = new __WEBPACK_IMPORTED_MODULE_2__app_invader__["a" /* default */](coords, 25);
this.invaders.push(invader);
}
}
drawGrid() {
let gridDrawable = this.grid.draw();
gridDrawable.apply(ctx);
}
drawInvaders() {
for (let i = 0; i < this.invaders.length; i++) {
console.log(this.invaders[i]);
let invaderDrawable = this.invaders[i].draw();
invaderDrawable.apply(ctx);
}
}
draw() {
this.clear();
this.drawGrid();
this.drawInvaders();
//loop(this.draw.bind(this))
}
}
/* harmony export (immutable) */ __webpack_exports__["default"] = Invasion;
let invasion = new Invasion();
invasion.draw();
/***/ })
/******/ ]);