Assignment 02 -  The    Simon  Memory Game  

CS230    -    Web    Information    Processing    
Assignment    2
This    Assignment    is    worth    10%    of    the    Web    Information    Processing    CA    Component.        
This    is    an    open-book,    graded    assignment.    You    may    use    online    resources    for    reference    purposes    only    
to    help    with    the    assignment.    Please    cite    all    references    as    comments    in    your    submissions.        You    cannot    
directly    reuse    HTML/CSS/JS    solu2on    code     from    online    sources.    You    must    not    engage    with    another    
student,     in     person     or     electronically     (phone,     social     media,     etc.)     to     secure     assistance     with     this    
assignment.    If    you    do    so    you    will    receive    an    automa2c    fail    (0%).    We    will    perform    similarity    checks    
on    submiGed    assignments    to    check    for    collaboraHve    efforts.    A    reasonable    aGempt    at    this    assignment    
will    gain    you    10%    of    your    conHnual    assignment    marks.    
Assignment    02    -    The    Simon    Memory    Game    
The    Simon    electronic    memory    skill    game,    invented    in    1978    by    Ralph    H.    Baer    and    Howard    J.    Morrison,    
creates    a    series    of    tones    and    lights    and    requires    a    user    to    repeat    the    sequence.    If    the    user    succeeds,    
the    series    becomes    progressively    longer    and    more    complex.    Once    the    user    fails    or    the    Hme    limit    runs    
out,     the     game     is     over.          Simon     is     named     aWer     the     simple     children's     game     of     Simon     Says,     but     the    
gameplay    is    based    on    Atari's    unpopular    Touch    Me    arcade    game    from    1974.    
The     device     has     four     coloured     buGons,     each     producing     a     parHcular     tone     when     it     is     pressed     or    
acHvated    by    the    device.    A    round    in    the    game    consists    of    the    device    lighHng    up    one    or    more    buGons    
in    a    random    order,    aWer    which    the    player    must    reproduce    that    order    by    pressing    the    buGons.    As    the    
game    progresses,    the    number    of    buGons    to    be    pressed    increases.    
Assignment    02    -    Requirements    
You    are    required    to    re-create    a    version    of    the    Simon    game    as    a    (HTML/CSS/JS)    web    app.    You    are    only    
required     to     flash     the     coloured     buGons     in    each     round     (no     audio     signal     is     required).     Your     app    must    
implement     the     interface     shown     in     Figures     1,     and     only     requires     implementaHon     of     the     following    
single-player    game    play.    
Assignment    Release    Date: 22-02-2021
Submission    Due    Date: 05-03-2021
Feedback    Due    Date    (esHmated): 19-03-2021    (for    assignments    that    make    Due    Date)
Support    Laboratories Lab    03,    Lab    04    (Two    Weeks)
Total    Mark: 10%
The    Single-Player    Simon    Game    is    as    follows:    
1. Click     the    START    buGon     to    begin,     the    game    status    indicator     (the     red/green    light    below     the    START    
buGon)    switches    from    RED    to    GREEN.    The    game    will    begin    3s    aWer    the    light    turns    GREEN.    
2. Simon    will    give    the    first    signal    (randomly    flash    a    coloured    buGon).    Repeat    the    signal    by    clicking    the    
same    colour    buGon.    
3. Simon    will    duplicate     the    first     signal    and    add    one.    Repeat     these     two     signals    by    clicking     the     same    
colour    buGons,    in    order.    
4. Simon    will    duplicate    these    first    two    signals    and    add    one.    
5. ConHnue    playing    as    long    as    you    can    repeat    each    sequence    of    signals    correctly.    AWer    the    5th,    9th    
and    13th    signals    in    a    sequence,    Simon    automaHcally    speeds    up    the    interval    between    signals.    
6. If     you     fail     to     repeat     a     sequence     exactly,     or     if     you     take    more     than     5     seconds     to     repeat     a     signal,    
Simon    responds    by    flashing    all    four    buGons    simultaneously    five    Hmes.        This    means    you    have    lost,    
and    the    sequence    of    signals    ends.    The    game    status    indicator    switches    from    GREEN    to    RED    and    you    
will    have    to    click    START    buGon    to    begin    a    new    game.        
7. Your    progress    (the    number    of    correctly    repeated    signals)    for    the    game    just    completed    (last    game)    
is    shown    in    the    display    to    the    right    of    the    START    buGon.    The    all-Hme    highest    score    is    shown    in    the    
display    to    the    leW    of    the    START    buGon.    
Figure    1    
Required Interface for CS230 (HTML/CSS/JS) Simon Application
Assignment    02        -    Development    Notes    
Please    adhere    to    the    following    development    requirements:    
1. All    game    interface    elements    must    be    generated    using    HTML    elements     together    with    appropriate    
CSS    styling.    Generally,    your    colour    schemes,    must    follow    a    similar    colour    scheme    to    that    shown    in    
Figure     1.     You     may     not     use     pre-constructed     images     for     any     of     the     game     elements.     All     of     the    
elements    shown    were    created    using    HTML    and    CSS    in    codepen.io,    and    (for    convenience    of    display    
in     this     document)     were     combined     using     Keynote.     The     individual     elements     used     are     shown     in     a    
screenshot    of    the    parHal    CodePen    Interface    in    Figure    2.    
2. The    posiHon    of     the    interacHve    and    display    elements    must,    in    general,    be    structured    as    shown    in    
Figure    1.    You    cannot    use    another    layer    or    design    for    your    assignment.    
3. The     font     family     used     is     “Orbitron”     and     you    may     load     it     from     hGps://fonts.googleapis.com/.     You    
may    not    use    any    other    font    as    part    of    the    display.    
4. You    may    not    use    a    CSS     framework,    such    as    Bootstrap,     for     this    assignment.    You    may,    if    you    wish,    
use    the    jQuery    Javascript    framework.    If    you    use    TypeScript,    or    similar,    and    transpire    to    JavaScript,    
you    need    to    provide    all    sources.    Your    app    only    needs    to    run    on    a    desktop    browser    such    as    Chrome    
-    you    do    not    need    to    ensure    it    works    on    every    browser    (mobile    browsers,    for    example).    
5. You     must     comment     your     code,     clearly     indicaHng,     how     your     code     implements     the     Single-Player    
Simon    game    described    above    in    the    “Assignment    02    -    Requirements”    secHon.    
Figure    2    
The HTML/CSS Elements generated using CodePen
Please     note     that     there     are     many     sample     (HTML/CSS/JS)     soluHons     for     Simon-like     games     available    
online.    While    it    is    fine    to    consult    these,    and    accompanying    arHcles,     for    references,    you    may    not    reuse    code     from     these    projects.    Please    cite    your     reference     sources    in    your    codebase.    We    will     search    
and     idenHfy     online     Simon     game     code     for     the     purposes     of     checking     against     submiGed     soluHons     in    
instances    where    we    have    concerns    about    code    originality.    
IMPORTANT    SUBMISSION    DETAILS        
Before     submiVng     your     assignment     students     should     check     that     their     solu2on     works     in     Chrome    
and/or    Firefox.    Please    indicate    the    Browser,        Lab    Opera2ng    System    (Linux/Windows)    and    Browser    
version    used    for    tes2ng    (as    a    comment    in    your    submiZed    code).    
All    work    must    be    submiGed    via    Moodle    (see    "Assignments"    secHon    for    submission).    Work    submiGed    
via     other     means     will     not     be     accepted     unless     you     have     prior     arrangements     with     the     Head    
Demonstrator     (Behnam     Faghih).     All     work     MUST     be     submiGed     by     the     due-date     deadline.     Late    
submissions    will    not    be    accepted.        
The    assignment    submission    is    a    zip    file    named    “assignment-02-xxxxxxxxx.zip”    (where    “xxxxxxxxx”    is    
your     student     id)     containing     a     solu7on     file     named     “assignment-02.html”     together     with     any     other    
resources     used     in     the     assignment     solu7on.     External     CSS     and     Javascript     files     should     be     named    
“assignment-02.css”     and     “assignment-02.js”,     respec7vely.     Please     ensure     that     all     external     files     use    
rela7ve    directory    referencing,    rather    than    hard-coding    the    files’    loca7on.