30:Te33,{ // initialize Kaboom and assign to var let K= KABOOM({ width: 140, // width of canvas height: 140, // height of canvas scale: 4, clearColor: [0, 0, 0, 1], canvas: document.getElementById("kb"), }); // Load Images K.loadSprite("steel", await FileAttachment("steel.png").url()); K.loadSprite("ch1", await FileAttachment("ch1.png").url()); K.loadSprite("ch2", await FileAttachment("ch2.png").url()); K.loadSprite("grass", await FileAttachment("grass.png").url()); K.loadSprite("door", await FileAttachment("door.png").url()); K.loadSprite("key", await FileAttachment("key.png").url()); K.loadSprite("guy", await FileAttachment("guy.png").url()); K.scene("main", (levelIdx) => { //levelIdx passed in from start() const characters = { "a": { sprite: "ch1", msg: "ohhi how are you", }, "b": { sprite: "ch2", msg: "get out!", }, }; const levels = [ [ "=======|==", "= =", "= a =", "= =", "= =", "= $ =", "= =", "= =", "= @ =", "==========", ], [ "==========", "= =", "= $ =", "= =", "| =", "= =", "= b =", "= =", "= @ =", "==========", ], ]; K.addLevel(levels[levelIdx], { width: 11, height: 11, pos: K.vec2(20, 20), "=": [ K.sprite("steel"), K.solid(), ], "$": [ K.sprite("key"), "key", ], "@": [ K.sprite("guy"), "player" ], "|": [ K.sprite("door"), //K.solid(), "door", ], any(ch) { const char = characters[ch]; if (char) { return [ K.sprite(char.sprite), //K.solid(), "character", { msg: char.msg, }, ]; } }, }); const player = K.get("player")[0]; let hasKey = false; let talking = null; function talk(msg) { talking = K.add([ K.text(msg), ]); } player.overlaps("key", (key) => { K.destroy(key); hasKey = true; }); player.overlaps("door", () => { if (hasKey) { if (levelIdx + 1 < levels.length) { K.go("main", levelIdx + 1); } else { K.go("win"); } } else { talk("you got no key!"); } }); player.overlaps("character", (ch) => { talk(ch.msg); }); K.keyPress(["left", "right", "up", "down"], () => { if (talking) { K.destroy(talking); talking = null; } }); K.keyPress("left", () => { player.moveLeft(); const targets = player.resolve() if (targets.length && targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y) ) { player.moveRight() } }); K.keyPress("right", () => { player.moveRight(); // handle tile collision const targets = player.resolve() if (targets.length && targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y) ) { player.moveLeft() } }); K.keyPress("up", () => { player.moveUp(); // handle tile collision const targets = player.resolve() if (targets.length && targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y) ) { player.moveDown() } }); K.keyPress("down", () => { player.moveDown(); const targets = player.resolve() if (targets.length && targets.find(t => t.obj.gridPos.x === player.gridPos.x && t.obj.gridPos.y === player.gridPos.y) ) { player.moveUp() } }); }); K.scene("win", () => { K.add([ K.text("you win!"), K.pos(K.width() / 2, K.height() / 2), K.origin("center"), ]); }); K.start("main", 0); }31:[{"id":"17b696e040e7b860ca67790d182232e334775f64496a79e6d4652da9689c73b36e0135fa971f1562bd3c911c7aed3570aa3c7d60bc1354221354b9267eef814c","href":"https://static.observableusercontent.com/files/17b696e040e7b860ca67790d182232e334775f64496a79e6d4652da9689c73b36e0135fa971f1562bd3c911c7aed3570aa3c7d60bc1354221354b9267eef814c","name":"ch2.png","type":"image/png","lastModified":1621733662442.805,"size":140},{"id":"a54ee3d871085c8c054bffc3f763b42d9c9f66bdbd3018506fcd80c2721392e0f206951c8bb33b4dfc217b4d63f24e44396afab3c94ff5d7d6125171fe2664c9","href":"https://static.observableusercontent.com/files/a54ee3d871085c8c054bffc3f763b42d9c9f66bdbd3018506fcd80c2721392e0f206951c8bb33b4dfc217b4d63f24e44396afab3c94ff5d7d6125171fe2664c9","name":"steel.png","type":"image/png","lastModified":1621733662445.904,"size":160},{"id":"203dd561c52042f3a8e7bd3750dc45bff0b8a38f3eb8ad206788630f5abc1dd7d5f75ba9d1f0e886923d3e2f48f6638d036abdf2286dfa8519f1337dfdcba9d5","href":"https://static.observableusercontent.com/files/203dd561c52042f3a8e7bd3750dc45bff0b8a38f3eb8ad206788630f5abc1dd7d5f75ba9d1f0e886923d3e2f48f6638d036abdf2286dfa8519f1337dfdcba9d5","name":"grass.png","type":"image/png","lastModified":1621733662434.347,"size":225},{"id":"328f1da0dfafb2bff51a8024bae8511cd3493e367897fb81b58c821035b16959ff343a139635471f246c3c32a25b3dd4cbd4c1f33ac4a3fb3afcd89791acdaa5","href":"https://static.observableusercontent.com/files/328f1da0dfafb2bff51a8024bae8511cd3493e367897fb81b58c821035b16959ff343a139635471f246c3c32a25b3dd4cbd4c1f33ac4a3fb3afcd89791acdaa5","name":"ch1.png","type":"image/png","lastModified":1621733661442.232,"size":146},{"id":"069075db325091c22f57e9fcdb4b525875caedc9585dcfbfa7a1e387ef318a3bcd6ac358fdd873b54d3284457551d34e7279cb0c41536f45b5514d2d07cef061","href":"https://static.observableusercontent.com/files/069075db325091c22f57e9fcdb4b525875caedc9585dcfbfa7a1e387ef318a3bcd6ac358fdd873b54d3284457551d34e7279cb0c41536f45b5514d2d07cef061","name":"key.png","type":"image/png","lastModified":1621733618625.829,"size":115},{"id":"46d1101fea50d16ece4824c1b39f1e5336ec6895b11bb58480e3f3b8977537fd7f4de58a48a8064605dd647b764edc2231222d6dddcf7a9bc4ec3047be17aa5c","href":"https://static.observableusercontent.com/files/46d1101fea50d16ece4824c1b39f1e5336ec6895b11bb58480e3f3b8977537fd7f4de58a48a8064605dd647b764edc2231222d6dddcf7a9bc4ec3047be17aa5c","name":"guy.png","type":"image/png","lastModified":1621733614770.389,"size":157},{"id":"3ff894edf0e4b6c3f53b9c985e504ab94c72b97997a11ec1b508ba45e34c6cbfcb9e8a866c1713a4b57399ae6dd791640742636c1dc538b12eda46a44426d022","href":"https://static.observableusercontent.com/files/3ff894edf0e4b6c3f53b9c985e504ab94c72b97997a11ec1b508ba45e34c6cbfcb9e8a866c1713a4b57399ae6dd791640742636c1dc538b12eda46a44426d022","name":"door.png","type":"image/png","lastModified":1621733610508.187,"size":159}] 2e:{"title":"Kaboom RPG Example","cells":[{"id":0,"value":"# Kaboom RPG Example\n\nReference https://kaboomjs.com/examples#rpg","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"import {KABOOM} from \"@triptych/kaboom-js\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"

\n","pinned":true,"hidden":false,"mode":"html"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"

Updates

May 23, 2021 - Added collision detection from AaronJewell\n\n

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}