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

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.

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!

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

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

Want more?

Transcript