[m0dem]

In this challenge, you will simulate Simon (the game). If you do not know what the game even is, here you go:

Spoiler:

The device has four colored buttons, each producing a particular tone when it is pressed or activated by the device. A round in the game consists of the device lighting up one or more buttons in a random order, after which the player must reproduce that order by pressing the buttons. As the game progresses, the number of buttons to be pressed increases.

https://en.wikipedia.org/wiki/Simon_%28game%29

---

Now, to pass the challenge, your game must act like the real game... it does not have to look exactly like the real game.
NOTE: You don't need to have sounds.
So, in that case, you could make it a colored ASCII game in C or a graphics game in Javascript (just some examples).

Enjoy!

[Megan]

Not participating but I'd love to see some entries to this.

[m0dem]

Not participating but I'd love to see some entries to this.

Yes, I'll be posting my entry as soon as I have it done. (I'm on a trip, with limited computer time -- which is also why I've been a bit inactive lately)
I'm using Python w/ Pygame for my first entry.

[insidious]

I'm on this. Never used pygame before, and I said I'd do last challenge (I still will) but I'm halfway through this one cause I found it more interesting , but irl works a bitch and there seems to be alot of it.

If I don't finish this tomorrow, kill me.

If you finish this in Python first, I''ll do this in ASCII Java

[m0dem]

I'm on this. Never used pygame before, and I said I'd do last challenge (I still will) but I'm halfway through this one cause I found it more interesting , but irl works a bitch and there seems to be alot of it.

If I don't finish this tomorrow, kill me.

If you finish this in Python first, I''ll do this in ASCII Java

Hey! That's cool! I'm using Pygame too.
Bro, it does not matter if I finish before you (or you before me).. we should still post!
Even if the code has a few bugs, still post... just say: "The code is buggy" or something

I am basically almost done with my code. It's just in the really buggy stage.
I'm excited to see how your Pygame code looks!

[Rou]

Might as well hop on this as my first post here.

Decided to use Javascript, as that's the language I've been playing most with lately. Also decided to see how fast I could implement it, which is why my implementation might seem rather rushed (because it was).
It's not very flexible or elegant as it relies on intervals and timeouts for the game logic, but hey, not bad for a 1h 30min job?

Edit:
I forgot to mention: I've only tested this in Firefox, as that's the only browser I have available currently (out travelling). It might look a little wonky in other browsers due to the CSS3 transformations. Just saying.

Spoiler:

Code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Rou Says</title> <style> body{ background: #333; color: #eee; text-shadow: 0px 1px 0px rgb(0, 0, 0); font-family: Droid Sans, sans-serif; background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=33333300&noise=626262&density=33&opacity=15); } h1{ text-align: center; } #game{ width: 192px; margin: 15px; } #diamond{ width: 192px; height: 192px; margin: 15px 0; position: relative; } .button{ width: 64px; height: 64px; transform: rotate(45deg); background: #eee; box-shadow: 0px 0px 5px #000; transition: all 0.3s; cursor: pointer; } #top{ position: absolute; top: 16px; left: 64px; background: #d00; } #left{ position: absolute; top: 64px; left: 16px; background: #0d0; } #right{ position: absolute; top: 64px; right: 16px; background: #00d; } #bottom{ position: absolute; bottom: 16px; left: 64px; background: #dd0; } #helptext{ text-align: center; } </style> </head> <body> <div id="game"> <h1>Rou Says</h1> <div id="diamond"> <div id="top" class="button"></div> <div id="left" class="button"></div> <div id="right" class="button"></div> <div id="bottom" class="button"></div> </div> <p id="helptext">Push any button to being a new game.</p> </div> <script> /******************************************************************\ * * Rou Says * ======== * * A simple Simon clone. * There really isn't more to it than that. * * The program flow is as follows: * * buttonClick() <---------------------------. * | | * v | * Game started? --- No --> startGame() | * | playPattern() -->| * yes | * | | * v | * Playing pattern? --- Yes ---------------->| * | | * no | * | | * v | * Correct input? --- No ---> Game Over | * | | * yes | * | | * v | * End of pattern? --- No ------------------>| * | | * yes | * | | * v | * extendPattern() | * playPattern() ----------------------------' * * * Written on December 30th, 2015 * Copyright (c) 2015, Rou Sawyer * License: Simplified BSD License * https://opensource.org/licenses/BSD-2-Clause \******************************************************************/ /******************** * Global vars * */ // The help text var helpText = document.getElementById('helptext'); // The pattern the player must recreate var pattern = []; // If true, the pattern is being played an input should be ignored var isPlayingPattern = false; var playbackInterval = null; // Used both for player input and the playback interval var playbackIndex = 0; // If true, a game has started var isPlaying = false; // If true, the player failed to repeat the pattern var isGameOver = false; // The initial countdown before starting a game, to allow the player // to get ready (in seconds) var initialCountdown = 5; var countdownInterval = null; // Button states var buttonStates = {}; // Button names var buttonNames = ['top', 'left', 'right', 'bottom']; /******************** * Attach events to the 4 buttons * */ function attachButtons() { for(var i in buttonNames) { var e = document.getElementById(buttonNames[i]); buttonStates[buttonNames[i]] = { element: e, timeout: 0 }; e.onclick = buttonClick; } } /******************** * A button has been clicked. The "meat" of the game is here. * */ function buttonClick() { // Disallow input when the pattern is being played back, or // when the player has hit the game over state if(isPlayingPattern || isGameOver) return; // Blink the button var name = this.id; blinkButton(name); // If we aren't playing a game, start a new one if(!isPlaying) { startGame(); return; } // Check that the player clicked the correct button if(name != pattern[playbackIndex]) { isPlaying = false; isGameOver = true; helpText.innerHTML = "Game over<br>Score: " + pattern.length; return; } playbackIndex++; // If we've reached the end of the pattern without fail, // extend the pattern and play back the new one. if(playbackIndex == pattern.length) { playbackIndex = 0; extendPattern(); playPattern(); return; } } /******************** * Blink a button * */ function blinkButton(name) { var bname = name; // Reset any previous timeouts if(buttonStates[bname].timeout) clearTimeout(buttonStates[bname].timeout); // Light up the button turnOnButton(bname); // Set time timeout for the button to go dark buttonStates[bname].timeout = setTimeout(function() { turnOffButton(bname); }, 500); } /******************** * Turn on a button * */ function turnOnButton(name) { buttonStates[name].element.style.background = "#eee"; } /******************** * Turn off a button * */ function turnOffButton(name) { buttonStates[name].element.style.background = ""; } /******************** * Adds a new button to the pattern that the player * must follow */ function extendPattern() { var b = (Math.random() * 4)|0; pattern.push(buttonNames[b]); } /******************** * Play back the pattern, so that the player can memorize is. * No input is allowed while this happens. */ function playPattern() { isPlayingPattern = true; playbackInterval = setInterval(playPatternInterval, 1000); } function playPatternInterval() { helpText.innerHTML = "Memorize this pattern"; // Check if we're at the end if(playbackIndex == pattern.length) { clearInterval(playbackInterval); isPlayingPattern = false; playbackIndex = 0; helpText.innerHTML = "Repeat the pattern"; return; } // Blink the next button blinkButton(pattern[playbackIndex]); playbackIndex++; } /******************** * Prepeare a new game * */ function startGame() { if(isGameOver) return; isPlaying = true; isPlayingPattern = true; extendPattern(); countdownInterval = setInterval(doCountdown, 1000); } /******************** * Countdown before the game starts, so that the player can * prepare themselves */ function doCountdown() { if(initialCountdown == 0) { clearInterval(countdownInterval); isPlayingPattern = false; playPattern(); return; } var str = "Starting in " + initialCountdown; str += " second" + (initialCountdown == 1 ? "" : "s"); helpText.innerHTML = str; initialCountdown--; } /******************** * Main entry point for the game * */ function start() { attachButtons(); } // Begin start(); </script> </body> </html>

[m0dem]

Might as well hop on this as my first post here.

Decided to use Javascript, as that's the language I've been playing most with lately. Also decided to see how fast I could implement it, which is why my implementation might seem rather rushed (because it was).
It's not very flexible or elegant as it relies on intervals and timeouts for the game logic, but hey, not bad for a 1h 30min job?

Spoiler:

Code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Rou Says</title> <style> body{ background: #333; color: #eee; text-shadow: 0px 1px 0px rgb(0, 0, 0); font-family: Droid Sans, sans-serif; background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=33333300&noise=626262&density=33&opacity=15); } h1{ text-align: center; } #game{ width: 192px; margin: 15px; } #diamond{ width: 192px; height: 192px; margin: 15px 0; position: relative; } .button{ width: 64px; height: 64px; transform: rotate(45deg); background: #eee; box-shadow: 0px 0px 5px #000; transition: all 0.3s; cursor: pointer; } #top{ position: absolute; top: 16px; left: 64px; background: #d00; } #left{ position: absolute; top: 64px; left: 16px; background: #0d0; } #right{ position: absolute; top: 64px; right: 16px; background: #00d; } #bottom{ position: absolute; bottom: 16px; left: 64px; background: #dd0; } #helptext{ text-align: center; } </style> </head> <body> <div id="game"> <h1>Rou Says</h1> <div id="diamond"> <div id="top" class="button"></div> <div id="left" class="button"></div> <div id="right" class="button"></div> <div id="bottom" class="button"></div> </div> <p id="helptext">Push any button to being a new game.</p> </div> <script> /******************************************************************\ * * Rou Says * ======== * * A simple Simon clone. * There really isn't more to it than that. * * The program flow is as follows: * * buttonClick() <---------------------------. * | | * v | * Game started? --- No --> startGame() | * | playPattern() -->| * yes | * | | * v | * Playing pattern? --- Yes ---------------->| * | | * no | * | | * v | * Correct input? --- No ---> Game Over | * | | * yes | * | | * v | * End of pattern? --- No ------------------>| * | | * yes | * | | * v | * extendPattern() | * playPattern() ----------------------------' * * * Written on December 30th, 2015 * Copyright (c) 2015, Rou Sawyer * License: Simplified BSD License * https://opensource.org/licenses/BSD-2-Clause \******************************************************************/ /******************** * Global vars * */ // The help text var helpText = document.getElementById('helptext'); // The pattern the player must recreate var pattern = []; // If true, the pattern is being played an input should be ignored var isPlayingPattern = false; var playbackInterval = null; // Used both for player input and the playback interval var playbackIndex = 0; // If true, a game has started var isPlaying = false; // If true, the player failed to repeat the pattern var isGameOver = false; // The initial countdown before starting a game, to allow the player // to get ready (in seconds) var initialCountdown = 5; var countdownInterval = null; // Button states var buttonStates = {}; // Button names var buttonNames = ['top', 'left', 'right', 'bottom']; /******************** * Attach events to the 4 buttons * */ function attachButtons() { for(var i in buttonNames) { var e = document.getElementById(buttonNames[i]); buttonStates[buttonNames[i]] = { element: e, timeout: 0 }; e.onclick = buttonClick; } } /******************** * A button has been clicked. The "meat" of the game is here. * */ function buttonClick() { // Disallow input when the pattern is being played back, or // when the player has hit the game over state if(isPlayingPattern || isGameOver) return; // Blink the button var name = this.id; blinkButton(name); // If we aren't playing a game, start a new one if(!isPlaying) { startGame(); return; } // Check that the player clicked the correct button if(name != pattern[playbackIndex]) { isPlaying = false; isGameOver = true; helpText.innerHTML = "Game over<br>Score: " + pattern.length; return; } playbackIndex++; // If we've reached the end of the pattern without fail, // extend the pattern and play back the new one. if(playbackIndex == pattern.length) { playbackIndex = 0; extendPattern(); playPattern(); return; } } /******************** * Blink a button * */ function blinkButton(name) { var bname = name; // Reset any previous timeouts if(buttonStates[bname].timeout) clearTimeout(buttonStates[bname].timeout); // Light up the button turnOnButton(bname); // Set time timeout for the button to go dark buttonStates[bname].timeout = setTimeout(function() { turnOffButton(bname); }, 500); } /******************** * Turn on a button * */ function turnOnButton(name) { buttonStates[name].element.style.background = "#eee"; } /******************** * Turn off a button * */ function turnOffButton(name) { buttonStates[name].element.style.background = ""; } /******************** * Adds a new button to the pattern that the player * must follow */ function extendPattern() { var b = (Math.random() * 4)|0; pattern.push(buttonNames[b]); } /******************** * Play back the pattern, so that the player can memorize is. * No input is allowed while this happens. */ function playPattern() { isPlayingPattern = true; playbackInterval = setInterval(playPatternInterval, 1000); } function playPatternInterval() { helpText.innerHTML = "Memorize this pattern"; // Check if we're at the end if(playbackIndex == pattern.length) { clearInterval(playbackInterval); isPlayingPattern = false; playbackIndex = 0; helpText.innerHTML = "Repeat the pattern"; return; } // Blink the next button blinkButton(pattern[playbackIndex]); playbackIndex++; } /******************** * Prepeare a new game * */ function startGame() { if(isGameOver) return; isPlaying = true; isPlayingPattern = true; extendPattern(); countdownInterval = setInterval(doCountdown, 1000); } /******************** * Countdown before the game starts, so that the player can * prepare themselves */ function doCountdown() { if(initialCountdown == 0) { clearInterval(countdownInterval); isPlayingPattern = false; playPattern(); return; } var str = "Starting in " + initialCountdown; str += " second" + (initialCountdown == 1 ? "" : "s"); helpText.innerHTML = str; initialCountdown--; } /******************** * Main entry point for the game * */ function start() { attachButtons(); } // Begin start(); </script> </body> </html>

Absolutely amazing implementation! Especially for 1.5 hours of work!
You have beat me by a million! You have taught me that Pygame is no match for Javascript. (I spent about 10x more time on graphics than the game logic... and it's not even done! )
The graphics are just lovely.
And however did you learn to write 346 LOC in 1.5 hour!!!!

---

Welcome to SL! (make an introduction post, that would be awesome!)

[Rou]

Absolutely amazing implementation! Especially for 1.5 hours of work!
You have beat me by a million! You have taught me that Pygame is no match for Javascript. (I spent about 10x more time on graphics than the game logic... and it's not even done! )
The graphics are just lovely.
And however did you learn to write 346 LOC in 1.5 hour!!!!

---

Welcome to SL! (make an introduction post, that would be awesome!)

Awesome, thanks! Looking forward to seeing your implementations. I have absolutely no experience with Pygame, so it'll be interesting to see how you solved it.
You can do simple graphics like this with a plain old HTML/CSS/JS stack, but if it was any more complex, I'd ditch HTML/CSS for Canvas, which would probably add another hour or so just to get something playable.

And however did you learn to write 346 LOC in 1.5 hour!!!!

Lots and lots of bloat due to comments, HTML and CSS. There's only about 100 lines or so of actual logic.

[insidious]

Absolutely amazing implementation! Especially for 1.5 hours of work!
You have beat me by a million! You have taught me that Pygame is no match for Javascript. (I spent about 10x more time on graphics than the game logic... and it's not even done! )
The graphics are just lovely.
And however did you learn to write 346 LOC in 1.5 hour!!!!

---

Welcome to SL! (make an introduction post, that would be awesome!)

Yeah Graphics are a bitch :'(.
I've got mine down, and even the pattern animation (no clicking animation yet though), Logic is only a small part of it.

[ねこまっしぐら]

Is this supposed to be Simon Says?