Pre-release
AdventureJS Docs Downloads Bundler Devlog Score: 0 Moves: 0
Example showing how to create a MacVenture layout for AdventureJS. tutorial, MacVenture MacVentureLayout styles

Display & Layouts:MacVenture

This example shows a layout in the style of MacVenture games such as Déjà Vu, Uninvited and Shadowgate.

 

// MacVentureLayout.js
/* global AdventureJS A MacVentureLayout G */

var MacVentureLayout = new AdventureJS.Game(
  "MacVentureLayout",
  "MacVentureLayoutContainer"
);

MacVentureLayout.settings.set({
  display: "inline",
  layout: "macventure",
  title: "MacVenture Layout",
  author: "Ivan Cockrum",
  description: "Here is an example follows the MacVenture game layout. ",
  version: "0.0.1",
});

MacVentureLayout.createImageLookup({
  images: [
    {
      id: "startroom",
      src: "images/startroom.png",
    },
    {
      id: "northroom",
      src: "images/northroom.png",
    },
    {
      id: "southroom",
      src: "images/southroom.png",
    },
    {
      id: "eastroom",
      src: "images/eastroom.png",
    },
    {
      id: "westroom",
      src: "images/westroom.png",
    },
    {
      id: "brasskey",
      src: "images/icon_brass-key.png",
    },
    {
      id: "hairpin",
      src: "images/icon_hairpin.png",
    },
    {
      id: "ann",
      src: "images/icon_raggedy-ann.png",
    },
    {
      id: "andy",
      src: "images/icon_raggedy-andy.png",
    },
    {
      id: "bluekey",
      src: "images/icon_blue-steel-key.png",
    },
    {
      id: "drawing",
      src: "images/icon_drawing-alt.png",
    },
    {
      id: "silverkey",
      src: "images/icon_silver-key.png",
    },
    {
      id: "lantern",
      src: "images/icon_brass-lantern.png",
    },
    {
      id: "knapsack",
      src: "images/icon_knapsack.png",
    },
  ],
});

// Create the room image widget.
MacVentureLayout.createWidget({
  class: "RoomImage",
  id: "MyRoomImageWidget",
  cssclasses: ["custom", "room"],
  region: "header",
  messages: {
    randomize: true,
    frequency: 0.33,
    array: [
      "{We} clicked the picture, but there's no need for that. It's just a visual reference. ",
      "There's no need to click. Sorry, but this isn't a point & click game.",
      "Move on, there's nothing to do in the picture. ",
      "Whattaya think this is, a point & click game? ",
    ],
  },
});

// Create the first verb list widget.
MacVentureLayout.createWidget({
  class: "VerbList",
  id: "VerbList01",
  cssclasses: [],
  region: "footer",
  verbs: ["examine", "open", "close", "ask", "use", "go", "hit", "consume"],
});

// Create the compass widget.
MacVentureLayout.createWidget({
  class: "Compass",
  id: "CompassWidget",
  title: "EXITS",
  format: "map",
  cssclasses: [],
  region: "right",
});

// Create the object widget.
MacVentureLayout.createWidget({
  class: "InventoryList",
  id: "InventoryList",
  title: "OBJECTS",
  cssclasses: [],
  region: "left",
  print_images: true,
  hide_labels: true,
});

MacVentureLayout.createAsset({
  class: "Player",
  name: "Explorer",
  place: { in: "Start Room" },
});
MacVentureLayout.createAsset({
  class: "Key",
  name: "brass key",
  image: "brasskey",
  synonyms: ["glass bead"],
  article: "a",
  adjectives: ["burnished", "chonky"],
  place: { in: "Explorer" },
  description: `It's a burnished brass key with chonky teeth 
  and a small glass bead mounted in the head. `,
}); // brass Key
MacVentureLayout.createAsset({
  class: "Key",
  name: "blue steel key",
  image: "bluekey",
  synonyms: ["blue key", "steel key"],
  adjectives: ["victorian"],
  description: "It's an ornate Victorian key made of blue steel. ",
  // article: "a",
  place: { in: "Explorer" },
});
MacVentureLayout.createAsset({
  class: "Key",
  name: "tiny silver key",
  adjectives: ["tiny"],
  image: "silverkey",
  description: `It's tiny, and it's silver, and it's a key. It don't open nuthin' so don't even bother. `,
  article: "a",
  place: { in: "Explorer" },
});
MacVentureLayout.createAsset({
  class: "Doll",
  name: "Raggedy Ann doll",
  synonyms: ["dress", "trim", "hair"],
  image: "ann",
  place: { in: "Explorer" },
  description: `It's a well-loved Raggedy Ann doll in a white dress with blue and red trim. `,
});
MacVentureLayout.createAsset({
  class: "Doll",
  name: "Raggedy Andy doll",
  synonyms: ["hat"],
  image: "andy",
  place: { in: "Explorer" },
  description: `It's a threadworn Raggedy Andy doll in a patched 
      sailor suit. His red hair is partially covered by a cap 
      that appears to be sewn on, though the old threads are wearing. `,
});
MacVentureLayout.createAsset({
  class: "Lockpick",
  name: "copper hairpin",
  image: "hairpin",
  synonyms: ["pin", "beads", "tines", "head"],
  adjectives: ["hammered"],
  article: "the",
  description: `The hammered copper hairpin has two tines and  
    a butterfly shaped head with tiny beads affixed to it, in  
    a vaguely art nouveau style. It's actually quite nice. `,
  place: { in: "Explorer" },
});

MacVentureLayout.createAsset({
  class: "Room",
  name: "Start Room",
  image: "startroom",
  description: `
    This is the Start Room. There's not much to say about it.
  `,
  exits: {
    east: "East Room",
    west: "West Room",
    north: "North Room",
    south: "South Room",
  },
});

MacVentureLayout.createAsset({
  class: "Room",
  name: "North Room",
  image: "northroom",
  description: `This is the North Room. We don't have much to say about it. `,
  exits: {
    south: "Start Room",
  },
});

MacVentureLayout.createAsset({
  class: "Room",
  name: "South Room",
  image: "southroom",
  description: `This is the South Room. We don't have much to say here either.`,
  exits: {
    north: "Start Room",
  },
});

MacVentureLayout.createAsset({
  class: "Room",
  name: "East Room",
  image: "eastroom",
  description: `This is the East Room. Brevity is the soul of wit. Or so we've been told. `,
  exits: {
    west: "Start Room",
  },
});

MacVentureLayout.createAsset({
  class: "Room",
  name: "West Room",
  image: "westroom",
  description: `This is the West Room. The less said the better. `,
  exits: {
    east: "Start Room",
  },
});

MacVentureLayout.createAsset({
  class: "Entity",
  name: "Thing One",
  place: { in: "Start Room" },
});

MacVentureLayout.createAsset({
  class: "Entity",
  name: "Thing Two",
  place: { in: "Start Room" },
});

MacVentureLayout.createAsset({
  class: "Entity",
  name: "Another Thing",
  place: { in: "Start Room" },
});

MacVentureLayout.createAsset({
  class: "NPC",
  name: "Floyd",
  // proper_name: "Floyd",
  pronouns: "nonhuman",
  gender: "male",
  // use_proper_name: true,
  name_is_proper: true,
  place: { in: "Start Room" },
  // use_articles: false,
});

MacVentureLayout.createAsset({
  class: "Entity",
  name: "raygun",
  place: { in: "Start Room" },
});

MacVentureLayout.createAsset({
  class: "Clothing",
  name: "pair of boots",
  synonyms: ["pair", "boots"],
  place: { in: "Start Room" },
});

Demo Source files

Right-click and choose "Save as..." to download source files.

Notes:

  • Demo games are set to a small size to fit doc pages. They can easily be enlarged via display settings.
  • Demo games all use the same theme. Colors and fonts can be changed via custom CSS.
  • Demo games don't include the core AdventureJS code. To run downloaded games locally, you'll need to also download copies of the core JS and CSS and set up this local folder structure.
AdventureJS
└── js
|   └── adventure.min.js
└── css
|   └── adventurejs.min.css
└── games
    ├── demogame01
    ├── demogame02
    └── demogame03