H5遊戲開發：惡魔抽卡 （新）

DataBroker發表於2020-10-24
H5遊戲開發

文章目錄


今天我教大家如何開發一個簡易的抽卡遊戲
[後期正在持續更改準備改天上傳原始碼]

開發環境需求

（1）所使用的的編輯器： vscode
（2）語言 ： html + css + js


它的名字叫做：

	惡魔抽卡

請原諒我是放蕩不羈的惡魔，命運在於自己手中，一開始只是概率的問題

在這裡插入圖片描述

遊戲規則

惡魔值的作用，惡魔值是你活在這個遊戲世界裡面的生命值，如果惡魔值耗盡，背景馬上變得刺眼，只能gameover

（1）點選按鈕後，開始從一組卡組中抽去卡牌，卡組中的卡牌是隨機分佈的，每次點選按鈕後出一張卡牌並翻開正面向玩家展示，如果是厄運卡牌，玩家被淘汰；
（2）如果是好運卡牌，玩家繼續抽卡，抽卡只有抽到機會卡才能擁有免遭一次淘汰的機會。
如果成功抽完卡組中的卡牌，恭喜你，遊戲勝利，你是絕對歐皇，
否則，自己檢視最下面的惡魔值，少則反省，多則歡喜。ok ?

前端三步驟

第一步：html+css;
第二步：js;
第三步: 找bugs T^T;

開始行動 >>>

第一步：html+css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入自定義css檔案 -->
    <link rel="stylesheet" href="cardsGame.css">
    <title>惡魔抽卡</title>
</head>

<body>
    <div class="container">
        <div id="cardShow">卡牌展示區域</div>
        <div id="startButton">開始抽卡</div>
        <div id="countArea">
            <ul>
                <li>已抽卡次數：0</li>
                <li>機會卡：0</li>
                <li>惡魔值：0</li>
            </ul>
        </div>
    </div>
    <script src="cardsGame.js"></script>
</body>

</html>

先寫html程式碼再定義樣式，效果如下，目前只有字：
在這裡插入圖片描述

第二步，現在開始寫css程式碼，定義元素樣式:

body {
    background-color: black;
    padding: 0;
    margin: 0;
}

.container {
    width: 400px;
    height: 576px;
    border: 1px solid white;
    border-radius: 6px;
    margin: auto;
    margin-top: 50px;
}

/* 卡牌展示區域 */
#cardShow {
    display: block;
    width: 320px;
    height: 400px;
    margin: auto;
    margin-top: 20px;
    border-radius: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url('./img/evil0.jpg');
    animation: pictureChange ease 10s infinite;
}

@keyframes pictureChange{
    0%{
        transform: rotateY(0deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    100%{
        transform: rotateY(0deg);
    }
}
/* 定義開始按鈕樣式 */
#startButton {
    display: block;
    float: left;
    width: 96px;
    height: 30px;
    margin-top: 20px;
    margin-left: 37%;
    border-radius: 9px;
    background-color: rgb(165, 165, 165);
    color: black;
    font-size: 15px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

/* 定義滑鼠移動到開始按鈕上時按鈕的樣式 */
#startButton:hover {
    background-color: rgb(59, 59, 59);
    color: rgb(255, 255, 255);
}

/* 統計區域 */
#countArea {
    display: block;
    float: left;
    width: 230px;
    height: 70px;
    margin-left: 86px;
    margin-top: 26px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 12px;
    background-color: rgb(102, 102, 102);
    color: aliceblue;
}
#countArea ul {
    margin-left: -40px;
    text-align: center;
    list-style: none;
}
#countArea ul li{
    margin-top: -6px;
    line-height: 24px;
    font-size: 16px;
}

現在好看多了，效果如下：

第三步，現在開始寫js程式碼，通過點選按鈕改變卡牌和抽卡記錄的資料：

var starButton = document.getElementById('startButton');
var cardShow = document.getElementById('cardShow');
var Li = document.getElementById('countArea').getElementsByTagName('li');
var countAready = 0;//定義抽卡次數
var countChange = 0;//定義機會卡
var evilIndex = 0;//定義惡魔值
var meeting = true;//定義一個閥值，遇到淘汰卡為假，沒遇到為真，為後面裁決玩家是否被淘汰的判斷程式碼提供資訊

starButton.onclick = function () {
    // 隨機數決定抽卡的卡號和惡魔值，惡魔值=卡號=i
    i = Math.floor(Math.random() * 10);
    cardShow.style.backgroundImage = 'url(./img/evil' + i + '.jpg)';
    countAready++;//每點選一次就記錄一次抽卡次數
    // 更據隨機數i和是否遇見淘汰卡meeting來決定玩家資料
    if (i == 1) {
        meeting = false;
    }
    else if (i == 5 && meeting != false) {
        countChange++;
        evilIndex += i;
        alert('恭喜獲得機會卡牌');
    } else if (countChange > 0 && meeting == false) {
        countChange--;
        evilIndex -= i;
        meeting = true;
        alert('遺憾的是，這是張淘汰卡;幸運的是因為機會卡的庇佑，你只是失去的惡魔值為' + evilIndex + '，而不會被淘汰');
    } else if (countChange <= 0 && meeting == false) {
        meeting = true;
        alert('很抱歉，你是個悲哀的惡魔，不幸抽中淘汰卡，孤獨的你將面對關閉的地獄大門!最後你獲得的惡魔值為' + evilIndex);
        for (var z = 0; z < Li.length; z++) {
            Li[z].style.visibility = 'hidden';
            starButton.style.visibility = 'hidden';
            cardShow.style.backgroundImage = 'url(./img/gameover.jpg)';
            document.body.style.backgroundColor = 'red';
        }
    } else {
        evilIndex += i;
    }

    //改變玩家資料
    Li[0].innerHTML = '已抽卡次數：' + countAready;
    Li[1].innerHTML = '機會卡：' + countChange;
    Li[2].innerHTML = '惡魔值：' + evilIndex;
}

遊戲點選後效果：
在這裡插入圖片描述

第四步，接下來寫最後一步，也就是解決bugs

這個地方就不寫了，bug需要玩了才能發現，注意，是bugs（複數哦！），後續大家參考更改吧！這是一個簡單的抽卡運氣類小遊戲demo

相關文章