亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

用 Javascript 制作游戲，有點像視覺小說

用 Javascript 制作游戲，有點像視覺小說

牧羊人nacy 2023-03-18 17:09:14
我是 JS 初學者。我想制作一款視覺小說類型的游戲。當你在法庭上時，有點像 Ace Attorney 游戲。在這個游戲中，你會遇到人，而不是打架，而是與他們交談。在遭遇中，頂部是一個圖像。此圖像將根據您的反應而改變。它下方有一個文本框，顯示當前文本。下面有 2 個（或可能更多）選項框。你有一個有 100 點的耐心計（就像健康計）。根據您選擇的選項，您將失去或獲得耐心。你用完了你就輸了。目標是使用正確的響應并在不失去所有耐心的情況下到達對話的結尾。根據您所做的選擇，將出現不同的對話框。所以我正在準備一個對話樹。關于如何編碼的任何想法？我真的很難弄清楚在哪里存儲所有文本和選項。以及如何訪問文本和選項。這是文本和選項的示例。起初我嘗試將文本放在對象中。sales1 是介紹文字。如果您選擇 opt1，sales2 文本將顯示在屏幕上。如果您選擇 opt2，sales3 文本將顯示在屏幕上。const sales1 = { action: "Salesman Chad wants to talk!", opt1: "告訴他你不感興趣", opt2: "聽他說完" };const sales2 = { action: "他對此進行了反駁！"先生，像你這樣有品位的人需要這輛車！", opt1: ""我們甚至不在經銷店！", opt2: ""Ooo一輛新車”” };const sales3 = { action: ""Ssssooooooooo, 你有什么樣的電視服務？", opt1: "告訴他你的房東付錢", opt2: "告訴他你不怎么看電視" };@font-face {    font-family: "Game Over Cre";    src: url(fonts/gameovercre1.ttf);    font-style: normal;    font-weight: 300;}* {    margin: 0;    padding: 0;    box-sizing: border-box;    font-family: "Game Over Cre", sans-serif;    font-size: 40px;}body {    background: black;    color: white;}#image-box {    border: 4px solid white;    height: 500px;    width: 60%;    margin: 10px auto;    align-items: center;    display: flex;    justify-content: center;}#opponent {    height: 400px;}#text-box {    border: 4px solid white;    height: 150px;    width: 60%;    margin: 10px auto;    padding: 20px;}#options {    display: flex;    width: 60%;    /* background: gray; */    margin: auto;    flex-wrap: wrap;    justify-content: space-between;}#option-1, #option-2, #option-3, #option-4 {    height: 100px;    width: 49.5%;    border: 4px solid white;    margin-bottom: 10px;    font-size: 35px;    padding: 10px;}#option-1:hover, #option-2:hover, #option-3:hover, #option-4:hover {    background: white;    color: black;}<body>    <section class="main-hub">        <div id="image-box">            <img id="opponent" src="img/salesman-chad.png">        </div>
查看完整描述

2 回答

?
慕碼人2483693

TA貢獻1860條經驗 獲得超9個贊

您可以將您的數據結構從簡單的opt1:sometext, 擴展到opt1:{text:sometext, nextpoint:2}, 這樣，您就可以以相對簡單的方式展示和遍歷您的新游戲。您只需要能夠執行 JSON 即可從此處繼續。


使用代碼示例，嘗試玩以下游戲的迷你版！


const sales = [

    {

        action: "Salesman Chad wants to talk!",

        opt1: {

            text: "Tell him you're not interested",

            nextpoint: 1,

        },

        opt2:  {

            text: "Hear him out",

            nextpoint: 2,

        },

    },

    {

        action: "He has a rebuttal for that! 'Sir, a classy man like you needs this car!'",

        opt1: {

            text: "We're not even at a dealership!",

            nextpoint: 0,

        },

        opt2: {

            text: "Ooo a new car",

            nextpoint: 2,

        }

    },

    {

        action: "Ssssoooooooo, what kind of TV service do you have?",

        opt1: {

            text: "Tell him your landlord pays for it",

            nextpoint: 1,

        },

        opt2: {

            text: "Tell him you don't watch much TV",

            nextpoint: 0,

        }

    }

];


function applyPoint(next) {

    const point = sales[next];

    $('#action-text').text(point.action);

    $('#option-1').text(point.opt1.text);

    $('#option-2').text(point.opt2.text);

    $('#option-1').attr('data-nextpoint', point.opt1.nextpoint);

    $('#option-2').attr('data-nextpoint', point.opt2.nextpoint);

}


$('#option-1').click(function(e) {

    applyPoint($(this).attr('data-nextpoint'));

});


$('#option-2').click(function(e) {

    applyPoint($(this).attr('data-nextpoint'));

});


applyPoint(0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

    <section class="main-hub">

        <div id="image-box">

            <img id="opponent" src="img/salesman-chad.png">

        </div>

        <div id="text-box">

            <h1 id="action-text"></h1>

        </div>

        <div id="options">

            <div id="option-1"></div>

            <div id="option-2"></div>

        </div>

    </section>

</body>

如您所見，小說本身const sales作為一個簡單的 JSON 對象數組存儲在 中。在函數中applyPoint()，我們從故事的當前點移動到故事的新點?？刂七@兩個選項的按鈕是 jQuery 語法，$('#option-1').click(function(e) {...})同樣適用于#option-2.

定義完所有這些后，我通過以下方式簡單地從初始起點開始游戲/小說： applyPoint(1);。


查看完整回答
反對 回復 2023-03-18
?
慕桂英3389331

TA貢獻2036條經驗 獲得超8個贊

這個解決方案包括幾個概念（除了數據存儲），這些概念可以使開發更復雜的游戲更容易推理。


<body>

? ? <section class="main-hub">

? ? ? ? <div id="image-box">

? ? ? ? ? ? <img id="opponent" src="img/salesman-chad.png">

? ? ? ? </div>

? ? ? ? <div id="text-box">

? ? ? ? ? ? <h1 id="action-text"></h1>

? ? ? ? </div>

? ? ? ? <div id="options">

? ? ? ? ? ? <div id="option-1"></div>

? ? ? ? ? ? <div id="option-2"></div>

? ? ? ? </div>

? ? </section>

</body>

const sales = [

? ? {

? ? ? ? action: "Salesman Chad wants to talk!",

? ? ? ? opt1: {

? ? ? ? ? ? text: "Tell him you're not interested",

? ? ? ? ? ? nextpoint: 1,

? ? ? ? },

? ? ? ? opt2:? {

? ? ? ? ? ? text: "Hear him out",

? ? ? ? ? ? nextpoint: 2,

? ? ? ? },

? ? },

? ? {

? ? ? ? action: "He has a rebuttal for that! 'Sir, a classy man like you needs this car!'",

? ? ? ? opt1: {

? ? ? ? ? ? text: "We're not even at a dealership!",

? ? ? ? ? ? nextpoint: 0,

? ? ? ? },

? ? ? ? opt2: {

? ? ? ? ? ? text: "Ooo a new car",

? ? ? ? ? ? nextpoint: 2,

? ? ? ? }

? ? },

? ? {

? ? ? ? action: "Ssssoooooooo, what kind of TV service do you have?",

? ? ? ? opt1: {

? ? ? ? ? ? text: "Tell him your landlord pays for it",

? ? ? ? ? ? nextpoint: 1,

? ? ? ? },

? ? ? ? opt2: {

? ? ? ? ? ? text: "Tell him you don't watch much TV",

? ? ? ? ? ? nextpoint: 0,

? ? ? ? }

? ? }

];


const state = {

? index: 0,

? data: sales,

? get current() {

? ? return this.data[this.index]

? }

};


const ui = {

? action: document.querySelector('#action-text'),

? left: document.querySelector('#option-1'),

? right: document.querySelector('#option-2')

};


const update = (nextpoint) => {

? state.index = nextpoint;

? render();

};


const render = () => {

? ui.action.innerText = state.current.action;

? ui.left.innerText = state.current.opt1.text;

? ui.right.innerText = state.current.opt2.text;

};


ui.left.addEventListener('click', () => update(state.current.opt1.nextpoint));

ui.right.addEventListener('click', () => update(state.current.opt2.nextpoint));


render();

我添加的第一件事是游戲狀態對象。這實際上可以是任何東西，但將游戲狀態保存在可訪問區域（例如變量或變量集）而不是 DOM 中通常是個好主意。您可以想象添加patience、一個score值、一個timer、inventory、npcs或任何其他可能代表游戲的東西。index對于我們的案例，我們可能只需要對話中的當前信息，也許是所有dialog信息，然后是當前派生的對話值，這樣查找起來更容易。它實際上可以是讓您的生活更簡單的任何東西。


const state = {

? index: 0,

? data: sales,

? get current() {

? ? return this.data[this.index]

? }

};

接下來是更新方法。這可以被認為是我們游戲中的一個步驟。它負責獲取我們當前的游戲狀態和一些輸入和/integrating或導出下一個狀態。更新函數通常以固定間隔調用，比如每秒 60 次，但對于這款游戲，我們實際上只需要響應用戶。在更復雜的游戲中，更新函數調用會處理許多子系統，例如物理、動畫、游戲邏輯等。出于我們的目的，當我們收到用戶的新決定時，我們的游戲就會“開始”。


const update = (nextpoint) => {

? state.index = nextpoint;

? render();

};

代碼的最后一部分只是渲染當前的游戲狀態。渲染函數從字面上看當前狀態并確保 UI 反映這些值。該ui對象僅允許我以語義方式組織 ui 元素，這不是必需的。


如果你過去做過任何網絡編程，你可能會發現這與 MVC 或反應式 ui 框架非常相似。數據單向流動。


查看完整回答
反對 回復 2023-03-18
  • 2 回答
  • 0 關注
  • 138 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號