console
(function(modules) {
var installedModules = {};
function __webpack_require__(moduleId) {
if (installedModules[moduleId])
return installedModules[moduleId].exports;
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.loaded = true;
return module.exports;
}
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.p = "";
return __webpack_require__(0);
})
([
(function(module, exports, __webpack_require__) {
__webpack_require__(1);
__webpack_require__(2);
module.exports = __webpack_require__(3);
}),
(function(module, exports, __webpack_require__) {
'use strict';
var _data = __webpack_require__(2);
var _gameLogic = __webpack_require__(3);
function main() {
var START = document.getElementById('start');
var STRICT = document.getElementById('strict');
START.onclick = function() {
if (_data.data.isStart) {
_data.data.isStart = false;
START.classList.remove('active'); (0, _gameLogic.resetGame)();
} else {
_data.data.isStart = true;
START.classList.add('active'); (0, _gameLogic.playOrder)(); (0, _gameLogic.addBtnEvent)();
}
};
STRICT.onclick = function() {
if (_data.data.isStrict) {
STRICT.classList.remove('active');
_data.data.isStrict = false;
} else {
STRICT.classList.add('active');
_data.data.isStrict = true;
}
};
}
window.onload = main;
}),
(function(module, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var data = {
orderData: [],
currentIndex: 0,
isStart: false,
isStrict: false,
addItem: function addItem() {
this.orderData.push(Math.floor(Math.random() * 4) + 1);
this.amount += 1;
}
};
exports.
default = function() {
return false;
};
exports.data = data;
}),
(function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.resetGame = exports.addBtnEvent = exports.playOrder = undefined;
var _data = __webpack_require__(2);
var GREEN = document.getElementById('green');
var RED = document.getElementById('red');
var YELLOW = document.getElementById('yellow');
var BLUE = document.getElementById('blue');
var SCREEN = document.getElementById('screen');
var timerEvents = [];
var simonSound = document.getElementById('simon-sound');
var wrongSound = document.getElementById('wrong-sound');
var colorBtns = [GREEN, RED, YELLOW, BLUE];
function addLight(val) {
if (val === 1) GREEN.classList.add('green-light');
if (val === 2) RED.classList.add('red-light');
if (val === 3) YELLOW.classList.add('yellow-light');
if (val === 4) BLUE.classList.add('blue-light');
}
function removeLight(val) {
if (val === 1) GREEN.classList.remove('green-light');
if (val === 2) RED.classList.remove('red-light');
if (val === 3) YELLOW.classList.remove('yellow-light');
if (val === 4) BLUE.classList.remove('blue-light');
}
function showOrder() {
_data.data.orderData.forEach(function(val, index) {
timerEvents.push(setTimeout(function() {
addLight(val);
simonSound.play();
},
index * 1000));
timerEvents.push(setTimeout(function() {
removeLight(val);
},
index * 1000 + 500));
});
}
function playOrder() {
_data.data.addItem();
_data.data.currentIndex = 0;
timerEvents.push(setTimeout(function() {
showOrder();
SCREEN.firstChild.nodeValue = _data.data.orderData.length;
},
500));
}
function correctEvent() {
_data.data.currentIndex += 1;
if (_data.data.currentIndex === _data.data.orderData.length) {
if (_data.data.orderData.length === 20) {
GREEN.classList.add('green-light');
RED.classList.add('red-light');
YELLOW.classList.add('yellow-light');
BLUE.classList.add('blue-light');
SCREEN.firstChild.nodeValue = 'FINISH!';
} else {
SCREEN.firstChild.nodeValue = 'PASSED!';
playOrder();
}
}
}
function errorEvent() {
if (_data.data.isStrict) {
SCREEN.firstChild.nodeValue = 'WRONG!';
_data.data.orderData = [];
playOrder();
} else {
SCREEN.firstChild.nodeValue = 'WRONG!';
_data.data.currentIndex = 0;
timerEvents.push(setTimeout(function() {
showOrder();
SCREEN.firstChild.nodeValue = _data.data.orderData.length;
},
500));
}
}
function addBtnEvent() {
colorBtns.forEach(function(val, index) {
val.onclick = function() {
if (_data.data.orderData[_data.data.currentIndex] === index + 1) {
simonSound.pause();
simonSound.currentTime = 0;
simonSound.play();
correctEvent();
} else {
wrongSound.play();
errorEvent();
}
};
});
}
function resetGame() {
SCREEN.firstChild.nodeValue = 0;
_data.data.orderData = [];
_data.data.currentIndex = 0;
timerEvents.forEach(function(val) {
clearTimeout(val);
});
GREEN.classList.remove('green-light');
RED.classList.remove('red-light');
YELLOW.classList.remove('yellow-light');
BLUE.classList.remove('blue-light');
}
exports.playOrder = playOrder;
exports.addBtnEvent = addBtnEvent;
exports.resetGame = resetGame;
})
]);
<div class="container">
<div class="controller">
<button class="start" id="start">
START
</button>
<button class="strict" id="strict">
STRICT
</button>
</div>
<div class="chassis">
<audio src="https://www.myinstants.com/media/sounds/incorrect.swf.mp3"
id="wrong-sound">
</audio>
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" id="simon-sound">
</audio>
<button class="green" id="green">
</button>
<button class="red" id="red">
</button>
<button class="yellow" id="yellow">
</button>
<button class="blue" id="blue">
</button>
<div class="screen">
<div class="screen-inner" id="screen">
0
</div>
</div>
</div>
</div>
@mixin center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
* {
box-sizing: border-box;
}
body {
button {
border: none;
background: no-repeat;
outline: none;
}
.container {
$color-chassis: #333333;
$chassis-width: 480px;
$screen-width: 160px;
$screen-inner-width: 120px;
$block-width: 200px;
$block-margin: 30px;
@include center();
.chassis {
width: $chassis-width;
height: $chassis-width;
background: $color-chassis;
border-radius: 50%;
position: relative;
box-shadow: 0 0 20px $color-chassis;
.green {
width: $block-width;
height: $block-width;
background-color: #33CC66;
border-radius: 100% 0 0 0;
position: absolute;
top: $block-margin;
left: $block-margin;
}
.green:active,
.green-light {
background: #66FF66;
box-shadow: 0 0 40px #66FF66;
}
.red {
width: $block-width;
height: $block-width;
background-color: #CC0000;
border-radius: 0 100% 0 0;
position: absolute;
top: $block-margin;
right: $block-margin;
}
.red:active,
.red-light {
background: #FF3300;
box-shadow: 0 0 40px #FF3300;
}
.yellow {
width: $block-width;
height: $block-width;
background-color: #CCCC00;
border-radius: 0 0 0 100%;
position: absolute;
bottom: $block-margin;
left: $block-margin;
}
.yellow:active,
.yellow-light {
background: #CCFF00;
box-shadow: 0 0 40px #CCFF00;
}
.blue {
width: $block-width;
height: $block-width;
background-color: #0066CC;
border-radius: 0 0 100% 0;
position: absolute;
bottom: $block-margin;
right: $block-margin;
}
.blue:active,
.blue-light {
background: #0066FF;
box-shadow: 0 0 40px #0066FF;
}
.screen {
width: $screen-width;
height: $screen-width;
background: $color-chassis;
border-radius: 50%;
@include center();
.screen-inner {
@include center();
width: $screen-inner-width;
height: $screen-inner-width;
background: #CCCCCC;
border-radius: 50%;
text-align: center;
line-height: $screen-inner-width;
font-size: 24px;
font-weight: 600;
color: $color-chassis;
}
}
}
.controller {
position: relative;
button {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 0 20px $color-chassis;
background: $color-chassis;
color: #CCCCCC;
font-size: 16px;
margin-bottom: 24px;
&:active {
background: #CCCCCC;
box-shadow: 0 0 20px #CCCCCC;
color: $color-chassis;
}
}
.start {
position: absolute;
top: -80px;
left: 40px;
}
.strict {
position: absolute;
top: -80px;
right: 40px;
}
.active {
background: #CCCCCC;
box-shadow: 0 0 20px #CCCCCC;
color: $color-chassis;
}
}
}
}