干净地编写HTML文字冒险游戏

问题描述

我正在使用HTML5，CSS和JavaScript构建基于文本的冒险游戏，但是在我超越自己之前，我想知道应该如何组织文件。我当时在想，而不是拥有一个冗长的HTML文档，最好是为事件和对象使用多个.js文件，同时通过函数链接所有内容？

我是从notify7（交互式文本游戏构建器）处理多个脚本的方式中得到的。可悲的是，i7无法提供通过Web浏览器播放的方式，需要下载诸如gluxle之类的解释程序。其他类似Twine2和Quest这样的构建器都不错，但它们似乎非常有限。

到目前为止，标题屏幕已经完成，我正准备开始为游戏制作内容。

// JavaScript Document

// Titlescreen
function fadeOutEffect() {
    var fadeTarget = document.getElementById("titlescreen");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    },150);
}

document.getElementById("start").addEventListener('click',fadeOutEffect);
// Gamescreen

// L.Window

// M.Window

// R.Window

@charset "utf-8";
/* CSS Document */

body {
    background-color: #666;
    font-family: Roboto Mono;
    font-size: 12px;
    color: white;
    margin-top:20px;
}

/* Title Screen CSS */
.gamescreen {
    background-color:#333;
    margin:auto;
    padding:20px;
    width:864px;
    height: 504px;
    text-align: center;
    Box-shadow: 0 0 7px #000000;
}

.version {
    font-size: 8px;
    text-align: right;
}

.gametitle {
    font-family: Fondamento;
    font-size:40px;
    text-shadow: 0 0 3px #FFF;
    animation: pulse 3s linear;
}

/*All titlescreen button animations*/
#start {
    animation: pulse 1s infinite alternate;
    background-color: #333;
    border: none;
    color:#FFF;
    font-family:inherit;
    font-size:inherit;
    cursor:pointer;
}

.start.game {
  display:none;
}

/* Add Later
#new {
    animation: pulse 1s infinite alternate;
    background-color: #333;
    border: none;
    color:#FFF;
    font-family:inherit;
    font-size:inherit;
    cursor:pointer;
    display:none;
}

#load {
    animation: pulse 1s infinite alternate;
    background-color: #333;
    border: none;
    color:#FFF;
    font-family:inherit;
    font-size:inherit;
    cursor:pointer;
    display:none;
}

#quit {
    animation: pulse 1s infinite alternate;
    background-color: #333;
    border: none;
    color:#FFF;
    font-family:inherit;
    font-size:inherit;
    cursor:pointer;
    display:none;
}
*/

@keyframes pulse {
    0% {opacity:0.1;}
    100% {opacity:1; text-shadow: 0 0 3px #FFF;}
}

/*In-Game Screen*/

.gamescreen {
    
}

<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Path of Mice (Test)</title>

<link href="style.css" rel="stylesheet" type="text/css">
  
<link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Fondamento&family=Roboto+Mono">
  
<script src="script.js"></script>

<!--jQuery Script Link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-->

</head>

<body>

<!--Title Screen-->
<div class="gamescreen">
<div id="titlescreen">
<p class="version">version 0.1.0 [Demo]</p>
<h1 class="gametitle">Path of Mice<br /></h1>
<img src="images/Warrior.png" alt="[Splash Art]" style="width:432px;height:288px;"><br />

<!--Start Button-->
<button id="start" onclick="fadeOutEffect()">[Begin]</button>


<!-- To Add Later
  <div id="menu">
    <button id="new" onclick="newGame()">New Game</button>
    <button id="new" onclick="loadGame()">Load Game</button>
    <button id="load" onclick="quitGame()">Quit Game</button>
  </div>
  -->
  
<!--Credits-->
  <p style="font-size:8px;">
    Path of Mice is an Interactive Fiction<br /><br />
    by Daryl Gray<br /><br />
    &#169; 2020 DTGray Arts</p>
    </div>
</div>

</body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

code-organization html javascript