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

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页