利用HTML5实现石头剪子布猜拳小游戏



31 123 42



特效描述:利用HTML5实现 石头剪子布 猜拳小游戏,利用HTML5实现石头剪子布猜拳小游戏

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/loading.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

<div class="wap-main">
    <!--动画猜拳区域-->
    <div class="game-content">
        <div class="game-cont">
        </div>
    </div>
    <!--选择石头剪刀布区域-->
    <div class="game-btn">
    </div>
    <!--加载loading-->
    <div class="bg-loading container">
        <div class="vbox">
            <div data-loader='circle-side'></div>
        </div>
    </div>
    <!--提示框-->
    <!--过关提示框-->
    <div class="tips tips-win">
        <div class="tips-bg">
            <div class="tips-content">
                <div class="tips-cont">
                    <h3>恭喜你通过第一关</h3>
                    <p>获得第一关抽奖机会,如选择此时抽奖将无法继续闯关</p>
                </div>
                <!--按钮-->
                <div class="btn">
                    <!--立即抽奖-->
                    <a href="" class="btn-lottery"></a>
                    <!--继续闯关-->
                    <a href="" class="btn-next"></a>
                </div>
            </div>
        </div>
    </div>
    <!--全部过关提示框-->
    <div class="tips tips-win-all">
        <div class="tips-bg">
            <div class="tips-content">
                <div class="tips-cont">
                    <h3>恭喜您,全部通关啦</h3>
                    <p>运气太好了吧!这么好的手气赶快来抽大奖!</p>
                </div>
                <!--按钮-->
                <div class="btn">
                    <!--立即抽奖-->
                    <a href="" class="btn-lottery"></a>
                </div>
            </div>
        </div>
    </div>
    <!--第一关失败-->
    <div class="tips tips-lose">
        <div class="tips-bg">
            <div class="tips-content">
                <div class="tips-cont">
                    <h3>好可惜,闯关失败了!</h3>
                    <p>人生何处不精彩</p>
                    <p>不如来618狂欢趴更多优惠</p>
                    <p>等你来拿!</p>
                </div>
                <!--按钮-->
                <div class="btn">
                    <!--重新开始-->
                    <a href="" class="btn-again"></a>
                </div>
            </div>
        </div>
    </div>
    <!--失败-->
    <div class="tips tips-lose">
        <div class="tips-bg">
            <div class="tips-content">
                <div class="tips-cont">
                    <h3>哎呀,闯关失败了!</h3>
                    <p>别灰心,你仍可以抽取上一关奖励</p>
                </div>
                <!--按钮-->
                <div class="btn">
                    <!--重新开始-->
                    <a href="" class="btn-lottery"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 小游戏 H5游戏 游戏源码 手机游戏 微信游戏 网页游戏 其他游戏 其他h5游戏 其他h5源码游戏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到