Попытка № ∞

Я пытаюсь сделать проект Simon Game на Freecodecamp уже несколько недель, и меня это раздражает. Эта проблема была не в том, что она была сложной, она была ментальной. Я пытался сделать слишком много сразу. Я взял небольшой перерыв, а затем разрезал процесс на кусочки размером с укус. Знаешь… такие, которые можно есть палочками.

Я упростил код до основ:

  1. Инициализируйте Саймона числом от 0 до 3.

2) Получите значение от 0 до 3 от пользователя и добавьте его в массив.

3) Проверьте значение simon от пользователя.

var simonArray = [];
var x = Math.floor(Math.random() * 4);
var playerArray = [];
simonArray.push(x);
var simonArrayNum = [];

$(document).ready(function(){
console.log(simonArray) });

function humanSong(val){
playerArray.push(val);
console.log(playerArray);
for (var i= 1; i< playerArray.length;){
if (val == simonArray[i]){
console.log(val)
simonSong()}
else{
alert(‘you suck! Try again!’)
break;}}

return playerArray}
function simonSong(){
var y = Math.floor(Math.random() * 4);
simonArray.push(y);
console.log(simonArray);}

function enter(){
console.log(playerArray);}

Я назначил каждому цвету в своем html функцию humanSong() с помощью onclick, а затем ввел уникальное значение от 0 до 3 внутри функции humanSong().

Излишне говорить, что вышеуказанная функция не работает. Вместо использования звука я распечатываю массив simon и человеческие значения, чтобы проверить, что делает код.

Журнал консоли в моем массиве simon не срабатывал, и я спросил мистера Google.

Затем у меня возникла проблема с моими петлями, равными ∞. Мне даже пришлось принудительно выйти из Google Chrome несколько раз. Я исправил это, изменив логику и сделав оператор «else» в приведенном выше коде оператором «if».

После этого у меня возникла проблема с разрывом в операторе else, который фактически не прерывал цикл. Я исправил это, заменив «разрыв» на «возврат».

Моя следующая проблема заключалась в том, что программа приравнивала ввод val от игрока ко всему массиву simon. Я исправил это, добавив еще один оператор if, чтобы проверять только, равна ли длина входного массива длине массива simon.

Затем программа не проверяла, как человек вводил значения. Это, опять же, было вопросом обхода логики и проверки.

Как только я заработал, я понял, что сравнение, которое я делал после уровня 3, не работает. По какой-то причине мой массив игроков повторялся как «неопределенный». По какой-то причине переменная, которую я использовал для итерации, пропускала промежуточные значения. Оказывается, у меня был неправильный индекс. ржу не могу. Мне пришлось использовать ‹ вместо ≤ или вычесть 1 из значения, которое я повторяю.

Теперь я добавляю функцию, которая будет воспроизводить соответствующий звук, когда игрок нажимает на доску.

Это сработало! Теперь мне просто нужно добавить, включена ли у вас кнопка «строгий». Это означает, что я должен каким-то образом получить значение от пользователя и использовать его для изменения ответов, когда игрок проигрывает.

Я сделал это после нескольких часов проб и ошибок.

Теперь мне нужно сделать так, чтобы доска реагировала, когда игрок нажимает кнопку. Я использовал функцию toggleClass в jquery с функцией setTimeout() и бум!

В этот момент я заметил, что Google Chrome не обновлял css! Поэтому я скачал расширение под названием CSS Reloader. Щелкните правой кнопкой мыши на странице, выберите загрузчик и бум! обновленный css. Я не хотел очищать кеш.

Теперь мне нужно запустить последовательность Саймона; последовательность, которая воспроизводится, чтобы игрок знал, какие кнопки нажимать.

Так что я мучился часами, потому что думал, что не смогу использовать цикл for с функцией setTimeout(). Затем я нашел это, оно не только дает пример кода, но и объясняет, что происходит, когда код сходит с ума. Если вы не сделали это так, как автор заставляет вас повторять, воспроизведение от Саймона становится беспорядком, если нет, бесконечным циклом, который приведет к сбою Chrome.

Итак, в итоге мои файлы выглядят так:

index.html

<!DOCTYPE html>

<html lang=”en-us”>

<head>
<meta charset=”utf-8">
<title>Simon</title>

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src=”https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.js"></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" type=”text/css” />
<link rel=”stylesheet” href=”stylesheet.css” type=”text/css” />
<script type=”text/javascript” src=”simon.js”></script>
</head>

<body>
<div id=’userOptions’>
<form class=”form”>

<div id=options>
<h1>Choose Parameters</h1>
<div class=”radio”>
<label>
<input type=”radio” id=’stict’ name=”optionsRadios” id=”optionsRadios1" value=”checked” checked>
Play Strict: Game will start over if you mess up
</label>
</div>
<div class=”radio”>
<label>
<input type=”radio” name=”optionsRadios” id=”optionsRadios2" value=”unchecked”>
Play Regular: Game will continue if you mess up
</label>
</div>
</div>
<div id=”console”style=”display: none”>
<h1>Level is:</h1> <h1 id=’level’>0</h1>
</div>

<label class=”form-check-label”>
<button class=”btn btn-primary inital” onclick=’Ty(); return false;’>Play Game!</button>
<button onclick= ‘init()’ class=”btn btn-primary”>Reset Game!</button>
</label>
</div>

</form>

<div id=”gameBoard”>
<h1>Simon</h1>
<table id=simongame>
<tr>
<td class=’makeClear’ id =”green” onclick=’humanSong(0);return false’></td>
<td class=’makeClear’ id =”red” onclick=’humanSong(1)’></td>
</tr>
<tr>
<td class=’makeClear’ id =”yellow” onclick=’humanSong(2) ;return false’></td>
<td class=’makeClear’ id =”blue” onclick=’humanSong(3) ;return false’></td>
</tr>
</table></div>
</body>
</html>

Саймон.js

var simonArray = [];
var playerArray = [];
var simonPlaylist = [];
var simon;
var human;
var level = 1;

var gamePlay = ‘regular’;
var numtocolor = {0:”#green”, 1:”#red”,2:”#yellow”, 3:”#blue” };
var audio1 = new Audio(“https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
var audio2 = new Audio(“https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
var audio3 = new Audio(“https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
var audio4 = new Audio(“/simonSound4.mp3”);

var playlist = {
0: audio1,
1: audio2,
2: audio3,
3: audio4};

function Ty(){
document.getElementById(‘options’).style.display = ‘none’;
document.getElementById(‘console’).style.display = ‘block’;
playGame();
simonSong();
}

function humanSong(val){
// makeOpaque(numtocolor[val]);
resetBoard(val)
playerArray.push(val);
playSound(val);
if (playerArray.length <= level){
check(); }
if (playerArray.length == simonArray.length){
nextLevel()}}

function simonSong(){
var y = Math.floor(Math.random() * 4);
simonArray.push(y);
simonPlaylist.push(playlist[y]);
var i=0;
theLoop(i);}

function check(){
for (i=0; i<= playerArray.length-1;i++){
human = playerArray[i];
simon = simonArray[i];
if (human !== simon){
strictFunt();}}

}
function nextLevel(){
if (level==20){
window.confirm(“You Won!! Predd OK to Play Again!”)
init();
}
simonSong();
level ++;
document.getElementById(“level”).innerHTML= (level -1)
playerArray = [];
}

`function playSound(num){
var audio = playlist[num];
audio.play();
}

function playGame(){
if ($(‘#stict’).prop(‘checked’) == true){
gamePlay = “strict”;}
return gamePlay;}

function strictFunt(){
if (gamePlay == “strict”){
window.confirm(“Strict Mode: Game Will Restart… Loser!”);
init();
return;
}
window.confirm(“Regular Mode: Wimp… Game Will Continue”);
playerArray=[]
theLoop(0)
}

function resetBoard(val){
$(numtocolor[val]).toggleClass(‘makeClear’);
setTimeout(function (){$(numtocolor[val]).toggleClass(‘makeClear’)}, 300)}

function setSimonsong(z) {
playSound(z);
resetBoard(z);
z++;
}

function theLoop (i) {
setTimeout(function () {
sound = simonArray[i];
setSimonsong(sound);
i++;
if (i < simonArray.length) { // If i > 0, keep going
theLoop(i); // Call the loop again, and pass it the current value of i
}
}, 1000);
}

Саймон.css

#red{
border: solid 5vh red;
width: 40vh;
height: 40vh;
border-radius: 70% 0% 70% 0% ;
background-color: red;
margin: 10vh;
box-shadow: 0 4vh 8vh 0 rgba(0, 0, 0, 0.2), 0 8vh 20vh 0 rgba(0, 0, 0, 1.5);}

#green{
border: solid 5vh green;
width: 40vh;
height: 40vh;
border-radius: 0% 70% 0% 70% ;
background-color: green;
margin: 10vh;
box-shadow: 0 4vh 8vh 0 rgba(0, 0, 0, 0.2), 0 8vh 20vh 0 rgba(0, 0, 0, 1.9);}

#yellow{
border: solid 5vh yellow;
width: 40vh;
height: 40vh;
border-radius: 70% 0% 70% 0% ;
background-color: yellow;
margin: 10vh;
box-shadow: 0 4vh 8vh 0 rgba(0, 0, 0, 0.2), 0 8vh 20vh 0 rgba(0, 0, 0, 1.9);
}
#blue{
border-radius: 0% 70% 0% 70% ;
border: solid 5vh blue;
width: 40vh;
height: 40vh;
background-color: blue;
margin: 10vh;
box-shadow: 0 4vh 8vh 0 rgba(0, 0, 0, 0.2), 0 8vh 20vh 0 rgba(0, 0, 0, 1.9);
}
body{
background-color: black;
padding-left: 20vh;
}

table{
background-color: white;
}

.form{
border: white 1vh solid;
color: white;
padding: 10vh;
display: inline-table;
margin: 10vh;
}

tr:hover td{
background-color: purple;
}

.makeOpaqueClass{
opacity: 1;
}
.makeClear{
opacity: 0.5
}
#userOptions{
float: right;
width: 80vh;
height: 30%;
overflow: scroll;
}
#gameBoard{

}
.radio{
margin: 2;
}

Если вы хотите увидеть это в IDE, это ссылка на C9 и вот ссылка на Codepe. Отсюда это просто стиль с помощью css. У меня было много проблем с этим, поэтому, если вам нужна помощь, просто напишите мне.