WarriorJS: Game written in JavaScript for learning JavaScript and artificial intelligence

274c474bb14a19f48ee86907c5be2a1d?s=47 Kite
October 05, 2016

WarriorJS: Game written in JavaScript for learning JavaScript and artificial intelligence

WarriorJS とは、インタラクティブな方法で JavaScript と人工知能を楽しく教えるために設計されたゲーム。
WarriorJS is a game designed to teach JavaScript and artificial intelligence in a fun, interactive way.

274c474bb14a19f48ee86907c5be2a1d?s=128

Kite

October 05, 2016
Tweet

Transcript

  1. Game written in JavaScript for learning JavaScript and artificial intelligence

  2. Kite KITERETZ inc. CEO & Founder kite.koga ixkaito ixkaito Web

    & graphic designer Programmer WordPress core contributor Ruby on Rails contributor React contributor Wocker developer Bathe developer Frasco developer
  3. 8BSSJPS+4ͱ͸ʁ What is WarriorJS?

  4. 8BSSJPS+4ͱ͸ɺΠϯλϥΫςΟϒͳํ๏Ͱ+BWB4DSJQUͱਓ޻஌ೳΛָ ͘͠ڭ͑ΔͨΊʹઃܭ͞ΕͨήʔϜɻ WarriorJS is a game designed to teach JavaScript

    and artificial intelligence in a fun, interactive way.
  5. https://github.com/olistic/warriorjs

  6. ͋ͳͨ͸ɺڊౝͷ࠷্֊Ͱʻ͜͜ʹ͋ͳͨͷϞνϕʔγϣϯͱͳΔԿ͔Λૠೖʼ ͢ΔͨΊɺͦΕΛొΔઓ࢜ͱͯ͠ϓϨʔ͠·͢ɻ֤֊Ͱఢͱઓ͍ɺ஥ؒ Λٹग़͠ɺ࣍ͷ֊ʹͭͳ͕Δ֊ஈ΁౸ୡ͢ΔͨΊʹ͸ɺ+BWB4DSJQU &4ϑϧαϙʔτ Λॻ͍ͯઓ࢜ʹࢦࣔΛ༩͑Δඞཁ͕͋Γ·͢ɻ You play as a warrior

    climbing a tall tower to <insert something that motivates you here> at the top level. On each floor, you need to write JavaScript (with full ES2015 support) to instruct the warrior to battle enemies, rescue captives, and reach the stairs.
  7. Πϯετʔϧํ๏ Installation

  8. $ npm install -g warriorjs

  9. ࢖͍ํ Usage

  10. $ warriorjs

  11. Ҏ্ʂݱࡏͷ৔ॴʹXBSSJPSKTσΟϨΫτϦ͕࡞੒͞Εɺͦͷதͷϓϩ ϑΝΠϧσΟϨΫτϦͰ1MBZFSΫϥεΛؚΜͩ1MBZFSKTϑΝΠϧΛݟ ͚ͭΔ͜ͱ͕Ͱ͖·͢ɻ That's it! This will create a warriorjs

    directory in your current location, where you will find a Player.js file in your profile's directory containing the Player class. class Player { playTurn(warrior) { // Cool code goes here } }
  12. ໨త Objective

  13. ͋ͳͨͷ໨త͸ɺplayTurnϝιουʹ໋ྩΛهೖ͢Δ͜ͱͰɺઓ࢜ʹԿ Λ͢΂͖͔ࢦࣔΛ༩͑Δ͜ͱͰ͢ɻ֤֊Ͱɺઓ࢜ͷΞϏϦςΟ͸೉қ౓ ͱͱ΋ʹ੒௕͠·͢ɻݱࡏͷ֊Ͱઓ͕࢜ར༻Ͱ͖ΔΞϏϦςΟͷৄࡉʹ ͍ͭͯ͸ɺϓϩϑΝΠϧσΟϨΫτͷ3&"%.&Λࢀর͍ͯͩ͘͠͞ɻ Your objective is to fill the

    playTurn method with commands to instruct the warrior what to do. With each level, your abilities will grow along with the difficulty. See the README in your profile's directory for details on what abilities your warrior has available on the current level.
  14. Լه͸ɺఢʹ৮Εͨ৔߹͸߈ܸ͠ɺͦΕҎ֎ͷ৔߹͸લਐ͢ΔࢦࣔΛઓ ࢜ʹ༩͑Δ؆୯ͳྫͰ͢ɿ Here is a simple example which will instruct

    the warrior to attack if he feels an enemy, otherwise he will walk forward: class Player { playTurn(warrior) { if (warrior.feel().isEnemy()) { warrior.attack(); } else { warrior.walk(); } } }
  15. ༡ͼํ Playing

  16. 1MBZFSKTͷฤू͕׬ྃͨ͠ΒɺϑΝΠϧΛอଘ͠ɺͦͷ֊ΛϓϨʔ͢Δ ʹ͸࠶౓warriorjsίϚϯυΛ࣮ߦ͍ͯͩ͘͠͞ɻҰ࿈ͷλʔϯͷ࠶ ੜ͕࢝·Γ·͢ɻ֤λʔϯͰ͸ɺϓϨΠϠʔͱఢͷplayTurnϝιου ͕ಉ࣌ʹ࣮ߦ͞Ε·͢ɻ Once you are done editing Player.js,

    save the file and run the warriorjs command again to start playing the level. The play happens through a series of turns. On each one, your playTurn method is called along with any enemy's.
  17. ֊ͷ్தͰίʔυΛมߋ͢Δ͜ͱ͸Ͱ͖·ͤΜɻॳΊ͔Βͦͷ֊Ͱى͜ Γ͑Δ͢΂ͯͷ͜ͱΛߟྀʹೖΕɺઓ࢜ʹద੾ͳࢦࣔΛ༩͑Δඞཁ͕͋ Γ·͢ɻ You cannot change your code in the

    middle of a level. You must take into account everything that may happen on that level and give your warrior the proper instructions from the start.
  18. ମྗ IFBMUI Λશࣦͯ͏ͱͦͷ֊͸ࣦഊʹͳΓ·͢ɻࣦഊʹΑΔേ͸͋ Γ·ͤΜɻ1MBZFSKTϑΝΠϧʹ໭ΓɺίʔυΛվળͯ͠࠶ࢼߦͯͩ͘͠ ͍͞ɻ Losing all of your health

    will cause you to fail the level. You are not punished by this, you simply need to go back to your Player.js file, improve your code, and try again.
  19. ੒ޭʢ֊ஈʹ౸ୡʣ͢ΔͱɺϓϩϑΝΠϧͷ3&"%.&͸࣍ͷ֊ͷͨΊ ʹߋ৽͞Ε·͢ɻ࣍ͷ֊ΛϓϨʔ͢Δʹ͸ɺ1MBZFSKTϑΝΠϧΛมߋ͠ɺ ࠶౓warriorjsΛ࣮ߦ͍ͯͩ͘͠͞ɻ Once you pass a level (by reaching

    the stairs), the profile README will be updated for the next level. Alter the Player.js file and run warriorjs again to play the next level.
  20. ಘ఺ Scoring

  21. ͋ͳͨͷ໨ඪ͸֊ஈʹ౸ୡ͢Δ͜ͱ͚ͩͰ͸ͳ͘ɺ࠷ߴಘ఺Λ֫ಘ͢Δ ͜ͱͰ΋͋Γ·͢ɻଟ͘ͷํ๏ͰϙΠϯτΛಘΔ͕Ͱ͖·͢ɻ Your objective is to not only reach the

    stairs, but to get the highest score you can. There are many ways you can earn points on a level.
  22. ఢΛ౗͢͜ͱͰɺͦͷମྗͷ࠷େ஋͕ಘ఺ʹՃࢉ͞Ε·͢ defeat an enemy to add his max health to

    your score
  23. ஥ؒΛٹग़͢Δ͜ͱͰɺϙΠϯτΛ֫ಘͰ͖·͢ rescue a captive to earn 20 points

  24. ϘʔφελΠϜ಺Ͱ੒ޭ͢Δ͜ͱͰɺϘʔφελΠϜͷ࢒ྔΛಘ఺ͱ͠ ͯಘΔ͜ͱ͕ग़དྷ·͢ pass the level within the bonus time to

    earn the amount of bonus time remaining
  25. ͢΂ͯͷఢΛ౗͠ɺ͢΂ͯͷ஥ؒΛٹग़͢Δ͜ͱͰɺಘ఺ͷΛϘʔ φεͱͯ֫͠ಘ͢Δ͜ͱ͕Ͱ͖·͢ defeat all enemies and rescue all captives to

    receive a 20% overall bonus
  26. ొ͖ͬͯͨ֊ͷ߹ܭಘ఺͸ه࿥͞Ε·͢ɻ֊Λ௨ա͢Δ͝ͱʹͦͷ֊ͷ ಘ఺͸߹ܭಘ఺ʹՃࢉ͞Ε·͢ɻ A total score is kept as you progress

    through the levels. When you pass a level, that score is added to your total.
  27. ήʔϜը໘ͷݟํ Perspective

  28. ͜ͷήʔϜ͸ςΩετϕʔεͰ͸͋Δ͕ɺ্ۭ͔Β၆ᛌ͍ͯ͠Δ%ήʔ Ϝͱߟ͍͑ͯͩ͘͞ɻ͢΂ͯͷ֊͸௕ํܗͰ͋Γɺෳ਺ͷϚεʹΑͬͯ ߏ੒͞Ε͍ͯ·͢ɻϚεʹ͸Ұͭͷཁૉ͔͠ଘࡏ͢Δ͜ͱ͕Ͱ͖·ͤΜɻ ͋ͳͨͷ໨ඪ͸֊ஈͷ͋ΔϚεΛݟ͚ͭΔ͜ͱͰ͢ɻ Even though this is a text-based

    game, think of it as two-dimensional where you are viewing from overhead. Each level is always rectangular in shape and is made up of a number of squares. Only one unit can be on a given square at a time, and your objective is to find the square with the stairs.
  29. Լه͸ϑϩΞϚοϓͱཁૉͷҰྫͰ͢ɿ Here is an example level map and key: ╔════╗

    ║C s>║ ║ S s║ ║C @ ║ ╚════╝ > = Stairs | ֊ஈ @ = Warrior (20 HP) | ઓ࢜ s = Sludge (12 HP) | εϥΠϜ S = Thick Sludge (24 HP) | ڧεϥΠϜ C = Captive (1 HP) | ஥ؒ
  30. ΞϏϦςΟ Abilities

  31. ͸͡Ί͸ɺઓ࢜͸Θ͔ͣͳΞϏϦςΟ͔͍࣋ͬͯ͠ͳ͍͕ɺ֊্͕͕Δ ʹͭΕͯΞϏϦςΟ͸੒௕͠·͢ɻେ͖͘෼͚ͯೋछྨͷΞϏϦςΟ͕ ͋Γ·͢ɿΞΫγϣϯͱηϯεɻ When you first start, your warrior will

    only have a few abilities, but with each level your abilities will grow. A warrior has two kinds of abilities: Actions and Senses.
  32. ଟ͘ͷΞϏϦςΟ͸ɺԼهͷ޲͖Ͱߦ͏͜ͱ͕Ͱ͖·͢ɿGPSXBSE લ ɺ CBDLXBSE ޙ ɺMFGU ࠨ ɺSJHIU ӈ ɻ࠷ॳͷҾ਺ͱͯ͠޲͖ͷจࣈ

    ྻΛ౉͢ඞཁ͕͋Γ·͢ɻྫɿwarrior.walk('backward');ɻ Many abilities can be performed in the following directions: forward, backward, left and right. You have to pass a string with the direction as the first argument, e.g. warrior.walk('backward');.
  33. ΞΫγϣϯ ߦಈ  Actions

  34. ΞΫγϣϯ͸Կ͔͠ΒͷӨڹΛήʔϜʹ༩͑·͢ɻλʔϯ͝ͱʹ࣮ߦͰ ͖ΔΞΫγϣϯ͸ҰͭͷΈͰ͢ͷͰɺݡ͍બ୒Λ͍ͯͩ͘͠͞ɻ An action is something that affects the game

    in some way. Only one action can be performed per turn, so choose wisely.
  35. ΞΫγϣϯҰཡ Here is the complete list of actions

  36. warrior.walk([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ʹҠಈ͠·͢ɻ Move in given direction (forward by

    default).
  37. warrior.attack([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ͷཁૉΛ߈ܸ͠·͢ɻ Attack a unit in given direction

    (forward by default).
  38. warrior.rest() ࠷େମྗͷΛճ෮͠·͢ɻ࠷େମྗΛ௒͑Δ͜ͱ͸͋Γ·ͤΜɻ Gain 10% of max health back, but do

    nothing more.
  39. warrior.rescue([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ͷ஥ؒΛٹग़͠·͢ ϙΠϯτΛ ֫ಘ ɻ Rescue a captive

    from his chains (earning 20 points) in given direction (forward by default).
  40. warrior.pivot([direction]) ࠨɺӈɺ΋͘͠͸ޙํ σϑΥϧτ ʹ޲͖Λม͑·͢ɻ Rotate left, right or backward (default).

  41. warrior.shoot([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ʹٷ໼Λ์ͭɻ Shoot your bow & arrow in

    given direction (forward by default).
  42. warrior.bind([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ͷཁૉΛറͬͯಈ͚ͳ͍Α͏ʹ͢Δɻ Bind a unit in given direction

    to keep him from moving (forward by default).
  43. warrior.detonate([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ͷര஄Λരൃͤ͞ΔɻपғϚε ࣗ ෼ࣗ਎΋ؚΉ ʹμϝʔδΛ༩͑·͢ɻ Detonate a bomb

    in a given direction (forward by default) which damages that space and surrounding 4 spaces (including yourself).
  44. warrior.explode() ࣗ෼ࣗ਎ͱपғ͢΂ͯͷཁૉΛരൃͤ͞Δɻ͓ͦΒ͘ҙਤతʹ͜ΕΛͨ͠ ͘͸ͳ͍Ͱ͠ΐ͏ɻ Kills you and all surrounding units. You

    probably don't want to do this intentionally.
  45. ηϯε ײ஌  Senses

  46. ηϯεͱ͸ɺݱࡏͷ֊ͷ৘ใΛऩू͢ΔΞϏϦςΟͰ͢ɻपғͷ֬ೝ΍ ద੾ͳΞΫγϣϯͷબ୒ͷͨΊɺඞཁͳͱ͖ʹηϯεΛߦ͏͜ͱ͕Ͱ͖ ·͢ɻ A sense is something which gathers information

    about the floor. You can perform senses as often as you want per turn to gather information about your surroundings and to aid you in choosing the proper action.
  47. ηϯεҰཡ Here is the complete list of senses

  48. warrior.feel([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ͷεϖʔεΛฦ͠·͢ɻ Return a Space for the given

    direction (forward by default).
  49. warrior.health() ݱࡏͷମྗͷ਺஋Λฦ͠·͢ɻ Return an integer representing your current health.

  50. warrior.look([direction]) ༩͑ΒΕͨํ޲ σϑΥϧτͰલํ ͷ࠷େεϖʔεͷ഑ྻΛฦ͠·͢ɻ Return an array of up to

    three Spaces in the given direction (forward by default).
  51. warrior.directionOfStairs() ݱࡏͷҐஔ͔Βݟͨ֊ஈͷ͋Δํ޲Λฦ͠·͢ɻ Return the direction the stairs are from your

    location.
  52. warrior.directionOf(space) Ҿ਺ͱͯ͠εϖʔεΛ౉͢͜ͱͰɺͦͷεϖʔεͷํ޲͕ฦ͞Ε·͢ɻ Pass a Space as an argument, and the

    direction to that space will be returned.
  53. warrior.distanceOf(space) Ҿ਺ͱͯ͠εϖʔεΛ౉͢͜ͱͰɺͦͷεϖʔε·Ͱͷڑ཭Λද͢਺஋Λ ฦ͠·͢ɻ Pass a Space as an argument, and

    it will return an integer representing the distance to that space.
  54. warrior.listen() ཁૉΛ࣋ͭ͢΂ͯͷεϖʔεΛ഑ྻͰฦ͠·͢ɻ Return an array of all spaces which have

    units in them.
  55. ײ஌ͨ͠৘ใ͸λʔϯ͝ͱʹมԽ͢ΔͷͰɺ࣍ͷλʔϯͰ࢖༻͢ΔͨΊ ूΊͨ৘ใ͸ɺه࿥͓ͯ͘͠ඞཁ͕͋Γ·͢ɻྫ͑͹ɺମྗ͕લͷλʔ ϯΑΓ΋ݮ͍ͬͯΔ͔Ͳ͏͔Ͱɺ߈ܸ͞Ε͍ͯΔ͔Ͳ͏͔Λ֬ೝ͢Δ͜ ͱ͕Ͱ͖·͢ɻ Since what you sense will change

    each turn, you should record what information you gather for use on the next turn. For example, you can determine if you are being attacked if your health has gone down since the last turn.
  56. εϖʔε Spaces

  57. εϖʔε͸ϚοϓͷϚεΛද͠·͢ɻ͋ΔΤϦΞʹରͯ͠ηϯεΛߦͬ ͨ৔߹ɺ௨ৗҰͭ·ͨ͸ෳ਺ͷ Ұͭͷ഑ྻͰ εϖʔε͕ฦ͞Ε·͢ɻ A space is an object representing

    a square in the level. Whenever you sense an area, often one or multiple spaces (in an array) will be returned.
  58. ͋Δεϖʔεʹରͯ͠ϝιουΛݺͼग़͢͜ͱͰɺͦ͜ʹԿ͕͋Δ͔ʹ ͍ͭͯͷ৘ใΛऩू͢Δ͜ͱ͕Ͱ͖·͢ɻ You can call methods on a space to

    gather information about what is there.
  59. εϖʔεʹରͯ͠ར༻Մೳͳϝιου Here are the various methods that are available to

    you for spaces
  60. space.isEmpty() trueͷ৔߹ɺ͜ͷ৔ॴʹ͸Կ΋ͳ͘ ֊ஈΛআ͘ ɺ͜͜·Ͱา͚Δ͜ͱ Λҙຯ͠·͢ɻ If true, this means that

    nothing (except maybe stairs) is at this location and you can walk here.
  61. space.isStairs() ͦ͜ͷ৔ॴʹ֊ஈ͕͋Δ͔Ͳ͏͔Λ֬ೝ͠·͢ɻ Determine if stairs are at that location.

  62. space.isEnemy() ͦ͜ͷ৔ॴʹఢ͕͍Δ͔Ͳ͏͔Λ֬ೝ͠·͢ɻ Determine if an enemy unit is at this

    location.
  63. space.isCaptive() ͦ͜ͷ৔ॴʹั·͍ͬͯΔ஥͕͍ؒΔ͔Ͳ͏͔Λ֬ೝ͠·͢ɻ Determine if a captive is at this location.

  64. space.isWall() ͕͜͜֊ͷ୺Ͱ͋Ε͹trueΛฦ͠·͢ɻ͜͜·Ͱา͘͜ͱ͸Ͱ͖·ͤ Μɻ Return true if this is the edge

    of the level. You can't walk here.
  65. space.isTicking() ͜ͷεϖʔεʹ΍͕ͯരൃ͢Δര஄ؚ͕·Ε͍ͯΔ৔߹trueΛฦ͠· ͢ɻ Return true if this space contains a

    bomb which will explode in time.
  66. ଟ͘ͷ৔߹ɺηϯεͷ௚ޙʹ͜ΕΒͷϝιουΛݺͼग़͢͜ͱʹͳΓ· ͢ɻྫ͑͹ɺfeelηϯε͸SpaceΛฦ͠·͢ɻ͜Εʹରͯ͠ isCaptive()Λݺͼग़͢͜ͱͰɺ໨ͷલʹั·͍ͬͯΔ஥͕͍ؒΔ͔Ͳ ͏͔Λ֬ೝ͢Δ͜ͱ͕Ͱ͖·͢ɻ You will often call these methods

    directly after a sense. For example, the feel sense returns one Space. You can call isCaptive() on this to determine if a captive is in front of you: warrior.feel().isCaptive();
  67. ςΟοϓεͱώϯτ Tips & hints

  68. ΋͋͠Δ֊Ͱߦ͖٧·ͬͨ৔߹͸ɺ3&"%.&υΩϡϝϯςʔγϣϯΛ ݟ௚͠ɺ͢΂ͯͷΞϏϦςΟΛࢼ͍ͯ͠Δ͔Ͳ͏͔Λ֬ೝ͍ͯͩ͘͠͞ɻ ΋͠ମྗΛҡ࣋Ͱ͖ͳ͍৔߹͸ɺपΓʹఢ͕͍ͳ͍ͱ͖ʹ ମྗʹ஫ҙ ͠ͳ͕Β ճ෮͍ͯͩ͘͠͞ɻ·ͨɺՄೳͳ͔͗Γԕڑ཭෢ث ྫ͑͹ ٷͳͲ Λ࢖༻͍ͯͩ͘͠͞ɻ If

    you ever get stuck on a level, review the README documentation and be sure you're trying each ability out. If you can't keep your health up, be sure to rest when no enemy is around (while keeping an eye on your health). Also, try to use far-ranged weapons whenever possible (such as the bow).
  69. +BWB4DSJQUͰ࡞ۀ͍ͯ͠Δ͜ͱΛ๨Εͳ͍Ͱ͍ͩ͘͞ɻͨͩ୯ʹଟ͘ ͷίʔυͰplayTurnϝιουΛຒΊͳ͍Ͱ͍ͩ͘͞ɻϝιου΍Ϋϥ εΛ࢖ͬͯ੔ཧ͠·͠ΐ͏ɻ Remember, you're working in JavaScript here. Don't

    simply fill up the playTurn method with a lot of code. Organize it with methods and classes.
  70. ηϯε͸ؾܰʹ࢖༻Ͱ͖·͢ɻײ஌͞Εͨ৘ใΛอଘ͓ͯ͘͜͠ͱͰɺ ͜ͷઌԿͷΞΫγϣϯΛߦ͏΂͖͔ʹ͍ͭͯͷΑΓΑ͍൑அʹ໾ཱͯͯ ͍ͩ͘͞ɻ Senses are cheap, so use them liberally.

    Store the sensed information to help you better determine what actions to take in the future.
  71. ϓϩϑΝΠϧσΟϨΫτϦʹ͍Δؒ͸ɺwarriorjsΛ࣮ߦ͢Δͱɺϓ ϩϑΝΠϧΛࣗಈతʹબ୒͠·͢ɻͦͷͨΊɺ࣮ߦͷͨͼʹબ୒͢Δඞ ཁ͸͋Γ·ͤΜɻ Running warriorjs while you are in your

    profile directory will auto-select that profile so you don't have to each time.
  72. ΋͠ߴಘ఺Λૂ͍ͬͯΔͳΒɺ๨ΕͣʹΤϦΞશମΛݟ౉͍ͯͩ͘͠͞ɻ ͨͱ͑֊ஈۙ͘ʹ͍ͨͱͯ͠΋ɺ ମྗ͕͋ΔͳΒ͹ ͢΂ͯͷ΋ͷΛ ೖख͢Δ·ͰதʹೖΒͳ͍Ͱ͍ͩ͘͞ɻԕڑ཭ηϯε ྫ͑͹MPPLͱ MJTUFO Λ࢖ͬͯɺఢ͕࢒͍ͬͯΔ͔Ͳ͏͔Λ֬ೝ͍ͯͩ͘͠͞ɻ If you're

    aiming for points, remember to sweep the area. Even if you're close to the stairs, don't go in until you've gotten everything (if you have the health). Use far- ranged senses (such as look and listen) to determine if there are any enemies left.
  73. ೔ຊޠԽʹ౒Ί͍ͯ·͢ Translating to Japanese

  74. https://github.com/ixkaito/warriorjs-ja

  75. ,*5&3&5;JOD גࣜձࣾΩςϨπ Ͱ͸ɺ
 ຐ๏࢖͍ʹͳΓ͍ͨਓΛืू͠·͢ɻ
 ϦϞʔτɺύʔτλΠϜ׻ܴɻ αΠτ͔Β
 http://kiteretz.com/ 'BDFCPPLϝοηʔδ͔Β
 http://facebook.com/kite.koga (JU)VC*TTVF͔Β


    https://github.com/kiteretz
  76. Thank You!