jQuery写经典游戏：锅打灰太狼

最新推荐文章于 2022-06-18 00:33:41 发布

finedayforu

最新推荐文章于 2022-06-18 00:33:41 发布

阅读量816

点赞数

本文链接：https://blog.csdn.net/finedayforu/article/details/104154609

版权

没看源代码，可能思路有些不一样，还做了如下优化：

1、增加了音效增加了狼儿钻回洞里的动画。

2、计分规则

3、设置了combo系统，连续5个combo 时间+10S

4、打小灰灰会减分减时间

5、挂到了我的个人服务器上，可以去以下网址体验以下：

锅打灰太狼

6、需要优化的部分：

①、如果游戏中把鼠标换成平底锅就更好了

②、CSS部分刚开始不会用text.shadow属性，自己硬生生做的阴影，好傻 /：笑哭

③、前期没想好，没有完全按照面向对象的思维做，如果重新做一次，会先创建“狼”的类，在类中写属性和方法。

源码如下：

HTML部分：

        <!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">
    <link rel="icon" href="images/logo.png" type="image/x-ico">
    <title>锅打灰太狼</title>
    <link rel="stylesheet" href="huitailang.css">
    <script
        src='https://code.jquery.com/jquery-1.12.4.js'
        integrity='sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU='
        crossorigin='anonymous'>
    </script>
    <script src="huitailang.js"></script>
    <script
        src='https://code.jquery.com/jquery-1.12.4.js'
        integrity='sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU='
        crossorigin='anonymous'>
    </script>
</head>
<body>
    <div class="content">
        
        <span class="score">0</span>
        <div class="timebarbg">
            <div class="timebar"></div>
            <span></span>
        </div>
        <div class="combo">
            <span class="combo1">COMBO×</span>
            <span class="combo2">COMBO×</span>
            <span class="combo3">0</span>
            <span class="combo4">0</span>
        </div>
        <button class="start">开始游戏</button>
        <div class="over">
            <div></div>
            <button class="restart">重新开始</button>
            <p class="over1">游戏结束</p>
            <p class="over2">游戏结束</p>
            
        </div>
        <div class="help">游戏规则</div>
        <div class="rules">
            <div>
                <p>
                    游戏规则
                </p>
                <span>X</span>
                <p>
                    1.鼠标点击灰太狼使用平底锅;<br>
                    2.只许敲打灰太狼,不许殴打小灰灰.每次殴打灰太狼+10分;每次误伤小灰灰-10分;<br>
                    3.时间倒计时60秒,时间耗尽游戏结束;<br>
                    4.连续敲打灰太狼形成Combo,5次combo奖励10秒,积分+20;<br>
                    5.每次敲打小灰灰扣5秒;<br>
                    6.U are OK to go!Have fun!~<br>
                </p>
            </div>
        </div>
    </div>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/open.mp3" autoplay loop></audio>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/start.mp3" id="startAudio"></audio>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/hbeat.mp3" id="hbeatAudio"></audio>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/xbeat.mp3" id="xbeatAudio"></audio>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/openlang.mp3" id="hopenAudio" autoplay></audio>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/combo.mp3" id="comboAudio"></audio>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/over.mp3" id="overAudio"></audio>
    <audio src="http://www.dh70.top/jQuery/huitailang/sounds/timeSub.mp3" id=

最低0.47元/天解锁文章

finedayforu

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery写经典游戏：锅打灰太狼

没看源代码，可能思路有些不一样，还做了如下优化： 1、增加了音效增加了狼儿钻回洞里的动画。 2、计分规则 3、设置了combo系统，连续5个combo 时间+10S 4、打小灰灰会减分减时间 5、挂到了我的个人服务器上，可以去以下网址体验以下：锅打灰太狼 6、需要优化的部分： ①、如果游戏中...
复制链接

扫一扫