repl.it
@neodymium/

GAM - An RPG

HTML, CSS, JS

A clever, pixel RPG for the Game Jam.

fork
loading
Files
  • index.html
  • costumes
  • sounds
  • dialogue.js
  • events.js
  • joystix_mono.ttf
  • keys.js
  • script.js
  • sprites.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>GAM - RPG</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <p id="alert">⚠️ If images on canvas look off-screen, please re-run the project.</p>
    <p style="font-family: 'Joystix Mono';"></p>
    <canvas style="font-family: 'Joystix Mono';"id="screen"width="480"height="360">Canvas failed to load. Wait or refresh.</canvas>
    <div id="change-log">
      <p>What works so far:</p>
      <ul>
        <li>Title / intro</li>
        <li>Movement</li>
        <li>Creatures spawning</li>
        <li>Creature dialogue</li>
      </ul>
      <p>What has to be added:</p>
      <ul>
        <li>More creatures</li>
        <li>Fighting engine</li>
        <li>Asking creatures</li>
      </ul>
      <p>What's not working:</p>
      <ul><li>Unable to get audio to play</li></ul>
    </div>
    <div id="costumes">
      <img id="start_btn" src="costumes/start_btn.png">
      <img id="title"     src="costumes/title.png">
      <img id="p1-still"  src="costumes/still.png">
      <img id="p1-walk1"  src="costumes/walk1.png">
      <img id="p1-walk2"  src="costumes/walk2.png">
      <img id="p1-fight"  src="costumes/fight.png">
      <img id="black"     src="costumes/black.png">
      <img id="cave"      src="costumes/cave.png">
      <img id="field1"    src="costumes/field1.png">
      <img id="jeff1"     src="costumes/jeff1.png">
      <img id="jeff2"     src="costumes/jeff2.png">
      <img id="felix1"    src="costumes/felix1.png">
      <img id="felix2"    src="costumes/felix2.png">
      <img id="d-box"     src="costumes/dia-box.png">
    </div>
    <script src="keys.js"></script>
    <script src="sprites.js"></script>
    <script src="dialogue.js"></script>
    <script src="events.js"></script>
    <script src="script.js"></script>
  </body>
</html>
result
console