diff --git a/.gitignore b/.gitignore index b0e3907..9daa824 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ -node_modules -npm-debug.log .DS_Store +node_modules diff --git a/README.md b/README.md deleted file mode 100755 index e69de29..0000000 diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 0000000..4956579 --- /dev/null +++ b/dist/main.js @@ -0,0 +1,312 @@ +/******/ (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] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = 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; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + var _player = __webpack_require__(1); + + var _player2 = _interopRequireDefault(_player); + + var _game = __webpack_require__(3); + + var _game2 = _interopRequireDefault(_game); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"./scss/style.scss\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())); + + var game = { + rootElement: document.getElementById('holder'), + boxInterval: 0, + fail: false, + pause: false, + _score: 0, + get: function get() { + return this._score; + }, + + set: function set(value) { + this._score = value; + if (value % 10 == 0) this.boxInterval += 1; + } + }; + + window.onblur = function () { + game.pause = true; + }; + window.onfocus = function () { + game.pause = false; + }; + + var player = new _player2.default(game.rootElement); + + (0, _game.factory)(game.rootElement); + +/***/ }, +/* 1 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + var _controlled = __webpack_require__(2); + + var _controlled2 = _interopRequireDefault(_controlled); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + + var Player = function (_Controlled) { + _inherits(Player, _Controlled); + + function Player(holder) { + _classCallCheck(this, Player); + + var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Player).apply(this, arguments)); + + _this.class = 'player'; + _this.initalX = _this.holder.width() / 2; + + _this.createElement(); + + _this.actions = { + 37: _this.moveLeft.bind(_this), + 38: _this.jump.bind(_this), + 32: _this.jump.bind(_this), + 39: _this.moveRight.bind(_this) + }; + + $(window).on('keydown', function (e) { + var action = _this.actions[e.keyCode]; + if (action && !game.pause) action(); + }); + return _this; + } + + _createClass(Player, [{ + key: 'moveLeft', + value: function moveLeft() { + if (this.cords.x < this.radius + 150) return; + + this.position = { + x: this.cords.x - 250 + }; + } + }, { + key: 'moveRight', + value: function moveRight() { + if (this.cords.x > $(this.holder).width() - this.radius - 150) return; + + this.position = { + x: this.cords.x + 250 + }; + } + }, { + key: 'jump', + value: function jump() { + var _this2 = this; + + if (this.isJumping) return; + + this.isJumping = true; + $('.player').css('bottom', '70%'); + window.setTimeout(function () { + $('.player').css('bottom', '0'); + }, 500); + window.setTimeout(function () { + _this2.isJumping = false; + }, 1000); + } + }]); + + return Player; + }(_controlled2.default); + + exports.default = Player; + +/***/ }, +/* 2 */ +/***/ function(module, exports) { + + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + var Controlled = function () { + function Controlled(holder) { + _classCallCheck(this, Controlled); + + this.holder = holder; + this.holderHeight = this.holder.height(); + } + + _createClass(Controlled, [{ + key: 'createElement', + value: function createElement() { + this.element = $('
', { + class: this.class, + id: this.id + }); + + this.position = { + x: this.initalX, + y: 0 + }; + + $(this.holder).append(this.element); + + this.radius = this.element.width() / 2; + } + }, { + key: 'die', + value: function die() { + this.element.remove(); + } + }, { + key: 'position', + set: function set(val) { + if (!this.cords) this.cords = {}; + + if (val.y !== null) { + this.cords.y = val.y; + this.element.css('bottom', this.cords.y); + } + if (val.x !== null) { + this.cords.x = val.x; + this.element.css('left', this.cords.x); + } + } + }, { + key: 'x', + get: function get() { + return this.element.offset().left + this.radius; + } + }, { + key: 'y', + get: function get() { + return this.holder.offsetHeight - this.radius - this.element.offset().top; + } + }]); + + return Controlled; + }(); + + exports.default = Controlled; + +/***/ }, +/* 3 */ +/***/ function(module, exports) { + + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + exports.factory = factory; + exports.check = check; + exports.stop = stop; + function factory(holder) { + var count = 0; + + var iterator = function iterator() { + if (!game.pause) { + var obj = new Box(holder, count++); + obj.move(); + } + + if (!game.fail) setTimeout(iterator, Math.random() * 5000); + }; + + iterator(); + } + + function check(el) { + if (!el.cords) return; + var dx = Math.abs(el.x - player.x); + var dy = Math.abs(el.y - player.y); + + if (dx < player.radius && dy < player.radius) stop(); + } + + function stop() { + var gameOver = document.getElementsByClassName('game-over'), + holder = document.getElementsByClassName('holder'), + totalScore = document.getElementById('total-score'); + + gameOver.removeClass('hidden'); + holder.addClass('hidden'); + gameOver.on('click', function () { + window.location.reload(); + }); + setTimeout(function () { + window.onkeydown = function () { + window.location.reload(); + }; + }, 1000); + + totalScore.innerText = game.score; + player.die(); + game.fail = true; + } + +/***/ } +/******/ ]); diff --git a/package.json b/package.json index 8c3b968..1718492 100644 --- a/package.json +++ b/package.json @@ -1,51 +1,36 @@ { - "name": "vanillajs-boilerplate", + "name": "jump", "version": "1.0.0", - "description": "Boilerplate for vanilla.js projects.", + "description": "Simple javascript game", "main": "index.js", "scripts": { - "build": "npm run clean && webpack --colors --config webpack.production.js", - "start": "webpack-dev-server --colors --inline --hot", - "clean": "rimraf dist", - "lint": "eslint src/js; true" + "start": "webpack-dev-server --inline --hot", + "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "git+https://github.com/alrighty/vanillajs-boilerplate.git" + "url": "git+https://github.com/KoalaCoders/jump.git" }, - "keywords": [ - "ES6", - "webpack", - "boilerplate" - ], - "author": "Andrew M.", + "author": "Koala", "license": "ISC", "bugs": { - "url": "https://github.com/alrighty/vanillajs-boilerplate/issues" + "url": "https://github.com/KoalaCoders/jump/issues" }, - "homepage": "https://github.com/alrighty/vanillajs-boilerplate#readme", + "homepage": "https://github.com/KoalaCoders/jump#readme", "devDependencies": { - "autoprefixer": "^6.3.2", - "babel-core": "^6.5.2", - "babel-eslint": "^4.1.8", - "babel-loader": "^6.2.2", - "babel-preset-es2015": "^6.5.0", + "autoprefixer-loader": "^3.2.0", + "babel-core": "^6.13.2", + "babel-loader": "^6.2.5", + "babel-preset-es2015": "^6.13.2", + "copy-webpack-plugin": "^3.0.1", "css-loader": "^0.23.1", - "eslint": "^2.0.0", - "eslint-config-airbnb": "^5.0.1", "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.8.5", - "html-webpack-plugin": "^2.8.1", - "jade": "^1.11.0", - "jade-loader": "^0.8.0", - "node-sass": "^3.4.2", - "postcss-loader": "^0.8.1", - "raw": "^0.1.4", - "rimraf": "^2.5.2", - "sass-loader": "^3.1.2", - "style-loader": "^0.13.0", - "url-loader": "^0.5.7", - "webpack": "^1.12.13", - "webpack-dev-server": "^1.14.1" + "file-loader": "^0.9.0", + "html-minify-loader": "^1.1.0", + "node-sass": "^3.8.0", + "sass-loader": "^4.0.0", + "style-loader": "^0.13.1", + "webpack": "^1.13.2", + "webpack-dev-server": "^1.15.0" } } diff --git a/src/Ball/ball.js b/src/Ball/ball.js deleted file mode 100644 index e660ae8..0000000 --- a/src/Ball/ball.js +++ /dev/null @@ -1,7 +0,0 @@ - -export default class Ball { - - constructor() { - console.log('ball was created'); - } -} diff --git a/src/css/style.css b/src/css/style.css new file mode 100644 index 0000000..739c529 --- /dev/null +++ b/src/css/style.css @@ -0,0 +1,97 @@ +@import 'https://fonts.googleapis.com/css?family=Roboto'; + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; + +} + +.app { + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; + font-family: 'Roboto', sans-serif; + font-weight: 100; + color: #666; +} + +.holder { + position: relative; + width: 100vw; + height: 100vh; + overflow: hidden; +} + +.holder:before { + content: ""; + display: block; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, .6); + z-index: inherit; + z-index: 100; +} + +.score { + text-transform: uppercase; + font-size: 20px; +} + +.player { + display: inline-block; + height: 200px; + width: 200px; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + transition: left linear .4s, bottom ease-out .5s; + background-image: url('../images/man.gif'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} + +.box { + display: inline-block; + height: 100px; + width: 100px; + position: absolute; + transform: translateX(-50%); + bottom: 0; + background-image: url('../images/shit.png'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; +} + +.game-over { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, .9); + z-index: 100; +} + +.total-score { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: rgba(255, 255, 255, .8); + font-size: 30px; +} + +.hidden { + display: none; +} diff --git a/src/images/man.gif b/src/images/man.gif new file mode 100644 index 0000000..1640074 Binary files /dev/null and b/src/images/man.gif differ diff --git a/src/images/shit.png b/src/images/shit.png new file mode 100644 index 0000000..213f2a8 Binary files /dev/null and b/src/images/shit.png differ diff --git a/src/index.html b/src/index.html old mode 100755 new mode 100644 index 84816e2..2732994 --- a/src/index.html +++ b/src/index.html @@ -2,10 +2,26 @@ - Document + Jump - KoalaCoders + -

Hello World

- +
+ + + +
+
+ Score: 0 +
+
+ +
+ diff --git a/src/index.js b/src/index.js index 275cab4..586675a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,12 @@ -import { Ball } from './Ball/ball.js'; -console.log('Hi'); -let ball = new Ball(); +import Player from './js/player.js'; +import Game from './js/game.js'; + +import game from './js/game.js'; + +window.onblur = () => { game.pause = true; }; +window.onfocus = () => { game.pause = false; }; + +game.player = new Player(game.rootElement); + +game.factory(); diff --git a/src/js/box.js b/src/js/box.js new file mode 100644 index 0000000..6d10554 --- /dev/null +++ b/src/js/box.js @@ -0,0 +1,27 @@ +import Controlled from './controlled'; +import game from './game.js'; + +export default class Box extends Controlled { + constructor(holder, num) { + super(...arguments); + this.class = 'box'; + this.id = `box-${num}`; + this.initalX = this.holder.offsetWidth + 200; + this.createElement(); + this.radius = this.element.offsetWidth / 2; + } + + move() { + if(!game.pause) this.position = { x: this.cords.x - 2 - game.boxInterval }; + + if ((this.x > -this.radius) && (!game.fail)) + window.setTimeout(() => this.move(), 5); + else { + this.die(); + if(!game.fail) document.getElementById('score').text(++game.score); + } + + game.check(this); + } + +} diff --git a/src/js/controlled.js b/src/js/controlled.js new file mode 100644 index 0000000..c5a71fd --- /dev/null +++ b/src/js/controlled.js @@ -0,0 +1,45 @@ +export default class Controlled { + + constructor(holder) { + this.holder = holder; + } + + createElement() { + this.element = document.createElement('div'); + this.element.classList.add(this.class); + this.element.id = this.id; + + this.holder.appendChild(this.element); + + this.position = { + x: this.initalX, + y: 0 + } + } + + die() { + this.element.outerHTML = ""; + this.element.parentElement.removeChild(this.element); + } + + set position(val) { + if (!this.cords) this.cords = {}; + + if(val.y !== undefined) { + this.cords.y = val.y; + this.element.style.bottom = this.cords.y + 'px'; + } + if(val.x !== undefined) { + this.cords.x = val.x; + this.element.style.left = this.cords.x + 'px'; + } + } + + get x() { + return this.element.offsetLeft + this.radius; + } + + get y() { + return this.holder.offsetHeight - this.radius - this.element.offsetTop; + } +} diff --git a/src/js/game.js b/src/js/game.js new file mode 100644 index 0000000..a18ee07 --- /dev/null +++ b/src/js/game.js @@ -0,0 +1,62 @@ +import Box from './box.js'; +import game from './game.js'; + +export default { + holder: holder, + rootElement: document.getElementById('holder'), + boxInterval: 0, + fail: false, + pause: false, + _score: 0, + + factory() { + let count = 0; + + let iterator = () => { + if(!game.pause) { + let obj = new Box(this.holder, count++); + obj.move(); + } + + if (!game.fail) + setTimeout(iterator, Math.random() * 5000 + 1000); + } + + iterator(); + }, + + check(el) { + if (!el.cords) return; + const dx = Math.abs(el.x - this.player.x); + const dy = Math.abs(el.y - this.player.y); + + if (dx < this.player.radius && dy < this.player.radius) stop(); + }, + + stop() { + let gameOver = document.getElementsByClassName('game-over'), + holder = document.getElementsByClassName('holder'), + totalScore = document.getElementById('total-score') + + gameOver.classList.add('hidden'); + holder.classList.add('hidden'); + + setTimeout(() => { + gameOver.onclick = () => { window.location.reload() }; + window.onkeydown = () => { window.location.reload() }; + }, 1000); + + totalScore.innerText = game.score; + this.player.die(); + game.fail = true; + }, + + get score() { + return this._score; + }, + + set score(value) { + this._score = value; + if(value % 10 == 0) this.boxInterval += 1; + } +} diff --git a/src/js/player.js b/src/js/player.js new file mode 100644 index 0000000..e1c30fe --- /dev/null +++ b/src/js/player.js @@ -0,0 +1,52 @@ +import Controlled from './controlled'; +import game from './game.js'; + +export default class Player extends Controlled { + + constructor(holder) { + super(...arguments); + this.class = this.id = 'player'; + this.initalX = this.holder.offsetWidth / 2; + + this.createElement(); + + this.radius = this.element.offsetWidth / 2; + this.actions = { + 37: this.moveLeft.bind(this), + 38: this.jump.bind(this), + 32: this.jump.bind(this), + 39: this.moveRight.bind(this) + }; + + window.onkeydown = e => { + let action = this.actions[e.keyCode]; + if (action && !game.pause) action(); + }; + } + + moveLeft() { + if(this.x < (this.radius + 150)) return; + debugger + this.position = { + x: this.x - 250 + } + } + + moveRight() { + if(this.x > (this.holder.offsetWidth - this.radius - 150)) return; + + this.position = { + x: this.x + 250 + } + } + + jump() {this + if (this.isJumping) return; + + this.isJumping = true; + this.element.style.bottom = '70%'; + + setTimeout(() => { this.element.style.bottom = 0; }, 500); + setTimeout(() => { this.isJumping = false; }, 1000); + } +} diff --git a/src/scss/_main.scss b/src/scss/_main.scss deleted file mode 100755 index 2551dac..0000000 --- a/src/scss/_main.scss +++ /dev/null @@ -1,4 +0,0 @@ -body { - background-color: $background-color; - color: $font-color; -} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss deleted file mode 100755 index 2da7aed..0000000 --- a/src/scss/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -$background-color: #F5F5F5; -$font-color: #00695C; diff --git a/src/scss/style.scss b/src/scss/style.scss deleted file mode 100755 index e47f6a9..0000000 --- a/src/scss/style.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './variables'; -@import './main'; diff --git a/webpack.config.js b/webpack.config.js old mode 100755 new mode 100644 index d986159..53875fc --- a/webpack.config.js +++ b/webpack.config.js @@ -1,25 +1,51 @@ -var webpack = require('webpack'); -var path = require('path'); -var HtmlWebpackPlugin = require('html-webpack-plugin'); +'use strict'; + +const webpack = require('webpack'); +const path = require('path'); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); + module.exports = { - entry: './src', - output: { - path: path.join(__dirname, 'dist'), - filename: 'bundle.js' - }, - module: { - loaders: [ - { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }, - { test: /\.html$/, loader: 'raw' }, - { test: /\.(scss|css)$/, loader: 'style!css!sass' }, - { test: /\.(png|jpg|gif|svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=500000' } - ] - }, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - new HtmlWebpackPlugin({ - template: './src/index.html' - }) - ] -} + context: __dirname + '/src', + entry: './', + + output: { + path: path.resolve(__dirname, 'dist'), + filename: '[name].js', + }, + + devtool: 'eval-source-map', + + module: { + loaders: [{ + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel?presets[]=es2015', + }, { + test: /\.scss/, + loader: ExtractTextPlugin.extract("css!autoprefixer-loader!sass") + }, { + test: /\.html$/, + loader: 'raw!html-minify' + },{ + test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, + loader: 'file?name=[path][name].[ext]' + }] + }, + + resolve: { + extentions: ['', '.js', '.json'] + }, + + plagins: [ + new webpack.HotModuleReplacementPlugin(), + new ExtractTextPlugin("style.css", {allChunks: true}) + ], + + watch: true, + + devServer: { + contentBase: './src', + hot: true + } +};