H5游戏开发：恶魔抽卡

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

梦境工程师-335

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

阅读量722

点赞数

分类专栏：前端作品大集合文章标签： 1024程序员节 javascript css html5 css3

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

版权

文章目录

今天我教大家如何开发一个简易的抽卡游戏

开发环境需求

（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

最低0.47元/天解锁文章

梦境工程师-335

关注

0
点赞
踩
4

收藏

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

今天我教大家如何开发一个简易的抽卡游戏它的名字叫做：恶魔抽卡请原谅我是放荡不羁的恶魔，命运在于自己手中，只是一开始就是概率的问题。游戏规则：点击按钮后，开始从一组卡组中抽去卡牌，卡组中的卡牌是随机分布的，每次点击按钮后出一张卡牌并翻开正面向玩家展示，如果是厄运卡牌，玩家被淘汰；如果是好运卡牌，玩家继续抽卡，抽卡只有抽到机会卡才能拥有免遭一次淘汰的机会。如果成功抽完卡组中的卡牌，恭喜...
复制链接

扫一扫

专栏目录