H5游戏开发：恶魔抽卡（新）

最新推荐文章于 2023-12-02 15:06:02 发布

梦境工程师-335

最新推荐文章于 2023-12-02 15:06:02 发布

阅读量938

点赞数

分类专栏：前端作品大集合文章标签： 1024程序员节游戏 js css html

本文链接：https://blog.csdn.net/qq_41136216/article/details/109266735

版权

前端作品大集合专栏收录该内容

23 篇文章 18 订阅

订阅专栏

文章目录

今天我教大家如何开发一个简易的抽卡游戏
[后期正在持续更改准备改天上传源码]

开发环境需求

（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

梦境工程师-335

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
H5游戏开发：恶魔抽卡（新）

文章目录开发环境需求游戏规则前端三步骤第一步：html+css第二步，现在开始写css代码，定义元素样式:第三步，现在开始写js代码，通过点击按钮改变卡牌和抽卡记录的数据：第四步，接下来写最后一步，也就是解决bugs今天我教大家如何开发一个简易的抽卡游戏开发环境需求（1）所使用的的编辑器： vscode（2）语言： html + css + js它的名字叫做：恶魔抽卡请原谅我是放荡不羁的恶魔，命运在于自己手中，一开始只是概率的问题游戏规则恶魔值的作用，恶魔值是你活在这个游戏世界
复制链接

扫一扫