【H5游戏】-用js实现无聊到令人发指的游戏抽【奥特曼】卡牌，打怪兽啦-CSDN博客

本文链接：https://blog.csdn.net/qq_27185879/article/details/128937340

专栏简介
💒个人主页 📰专栏目录点击上方查看更多内容	📖心灵鸡汤📖 人生中，有些事情是我们可以掌控的，把握得好，我们会拥有更多的成功机会，即使失败，也不会怨天尤人。	不定时分享各种H5小游戏，欢迎订阅！收藏！

奥特曼打怪兽

🌝怪兽大举入侵，继续奥特曼前去消灭，时间有限，快去派出奥特曼前去打怪兽吧

请添加图片描述

游戏需求

上划类小游戏，在有限的时间内，每上划一次得一分。

👇核心玩法👇

1️⃣.限时，当时间结束时游戏结束。
2️⃣.计分规则，抽一个卡牌得一分。
3️⃣.重玩规则，时间结束。

👇界面原型👇

1️⃣.开始界面。开始操作。
2️⃣.游戏界面。倒计时，得分
3️⃣.游戏结束页面。重玩儿。

👇成品演示👇

请添加图片描述

游戏开发

下面就总结下实现过程。

1.游戏素材准备

在这里插入图片描述

以上素材作用如下👇

作用	图片
首页背景图	index_bg.jpg
游戏背景图	game_bg.jpg
开始按钮	start.jpg
重玩儿按钮	restart.jpg
结束背景图	result_bg.png
卡牌图集	01.png-05.png
卡牌盒子图	box.png

2.代码实现

1.首页创建

创建index.html

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
<title>奥特曼</title>
<style>
        canvas {
            width: 100%;
            height: 100%;
        }
</style>
<body>
<canvas id="canvas"></canvas>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/createjs-2013.12.12.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
        $(function () {
            Main.initStage();
            $("#canvas").bind("click", function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        });
    </script>
</html>

2.创建容器，加载相应图片

//初始化
Main.initStage = function () {
    Main.stage = new createjs.Stage("canvas")
    createjs.Touch.enable(Main.stage);
    Main.stage.width = canvas.width = Main.width;
    Main.stage.height = canvas.height = Main.height;
    createjs.Ticker.addEventListener("tick", this.stage);
   //创建容器
   var container = new createjs.Container();
   //添加首页背景
   var indexBg = new createjs.Bitmap("images/index_bg.jpg");
   container.addChild(indexBg);
   //添加开始按钮
   var startBtn = new createjs.Bitmap("images/start.png");
   startBtn.x = 200;
   startBtn.y = 370;
   container.addChild(startBtn);
   Main.stage.addChild(container);    
 
};

效果如下
在这里插入图片描述

3.首页创建出来后，然后就该为【开始】按钮添加点击事件了

   startBtn.addEventListener("click",
   function () {
        //开始游戏
      Main.startGame()
   });

2.游戏初始化

1.卡牌初始化

Main.initCards = function () {
    for (var b = 0; b < Main.cardMax; b++) {
        var lst=["images/01.png","images/02.png","images/03.png","images/04.png","images/05.png"]
        var url = lst[Math.floor((Math.random()*lst.length))];
        var c = new createjs.Bitmap(url);
        c.regX = 50;
        c.regY = 68;
        c.x = 200;
        c.y = 550;
        Main.cardArr[b] = c;
        Main.stage.addChild(c);
        c.visible = !1
    }
};

2.结束游戏

//结束游戏
Main.endGame = function (b) {
    Main.endContainer = new createjs.Container();
    Main.stage.addChild(Main.endContainer)
    var d = Main.endContainer;
    d.alpha = !0;
    //结果背景图
    var resultBg = new createjs.Bitmap("images/result_bg.png");
    resultBg.x = 35;
    resultBg.y = 60;
    d.addChild(resultBg);
    //重玩儿按钮
    var restart = new createjs.Bitmap("images/restart.png");
    restart.x = 200;
    restart.y = 700;
    //结果文本
    var resultText = new createjs.Text("", " bold 35px Arial Black", "#000000");
    resultText.x = 100;
    resultText.y = 290;
    var resultTextVal = "你一共抽到了" + Main.nowScore + "个奥特曼，\n快去打小怪兽吧！";
    resultText.text = resultTextVal
    d.addChild(resultText);
};

3.结束界面

1.效果展示
在这里插入图片描述

源码下载

源码下载
🙊营业公告🙊	源码获取 🔗
🕣工作日:早8:30-晚5:30
📢非工作日期间将无法访问，可在👇下方留言👇获取源码