您还未登录。 登录 或 立即注册
欢迎您,游客!
阅览本站更多精彩内容请 登录 或 立即注册
Linux
Linux 发表于 2021-3-29 21:52:18
提示:该广告来自 Google。本站不对广告的真实性、合法性做保障,请自行甄别。常见问题
http://misa.1919810.work/
源码:
<!DOCTYPE html>
<html lang="zh">
        <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">
                <title></title>
                <style type="text/css">
                        .w {
                                width: 5rem;
                                height: 10rem;
                                position: relative;
                                top: 0;
                                left: 50%;
                                transform: translateX(-2.5rem);
                                border: #0000FF solid .01rem;

                        }

                        .ball {
                                width: 0.6rem;
                                height: 0.3rem;

                                background: url(img/1.png) center;
                                background-size: cover;
                                position: absolute;
                                bottom: 0.2rem;
                                left: 50%;
                                transform: translateX(-0.15rem);
                        }

                        .but_box {
                                display: flex;
                                justify-content: space-around;
                                align-items: center;
                                width: 7rem;
                                height: 1rem;
                                position: relative;
                                bottom: -0.5rem;
                                left: 50%;

                                transform: translateX(-3.5rem);
                                border: greenyellow 0.02rem solid;
                        }

                        .newBall {
                                width: 0.3rem;
                                height: 0.3rem;
                                border-radius: 50%;
                                background-color: blue;
                                position: absolute;
                                opacity: 1;
                               
                        }

                        button {
                                height: 0.5rem;
                        }

                        .sco {


                                color: red;
                                font-size: 0.56rem;
                                position: absolute;
                                bottom: 0rem;
                                left: 50%;
                                transform: translateX(-0.28rem);
                        }
                </style>
        </head>
        <body>
                <div class="w">
                        <div class="ball">
                        </div>
                </div>
                <div class="but_box">
                        <!-- <button class="add">加速</button> -->
                        <button class="left">左</button>
                        <button class="cut">停止</button>
                        <button class="right">右</button>
                </div>
                <div class="sco">0</div>
        </body>
        <!-- <script src="js/rem.js" type="text/javascript" charset="utf-8"></script> -->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
                //rem.js
                ! function(n) {
                        var e = n.document,
                                t = e.documentElement,
                                i = 720,
                                d = i / 100,
                                o = "orientationchange" in n ? "orientationchange" : "resize",
                                a = function() {
                                        var n = t.clientWidth || 320;
                                        n > 720 && (n = 720);
                                        t.style.fontSize = n / d + "px"
                                };
                        e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
                }(window);
                $('.left').click(function() {

                        $('.ball').stop().animate({
                                left: '0.15rem'
                        }, 2000)
                })
                $('.right').click(function() {

                        $('.ball').stop().animate({       
                                left: '4.85rem'
                        }, 4000)
                })
                $('.cut').click(function() {
                        $('.ball').stop()
                })
                //随机生成掉落小球
                const arr = []
                var sco = 0
                var i = 0
                var w = 0.6
                function bron() {
                        const x = Math.random() * 450 + 0.15;
                        arr.push(Math.round(x))
                        $(".w").append('<div class=' + "newBall" + i + '></div>');
                        $('.newBall' + i).css({
                                'left': arr[i] / 100 + "rem",
                                'width': '0.3rem',
                                'height': '0.3rem',
                                'borderRadius': '50%',
                                'background': 'url(img/2.png) center',
                                'background-size': 'cover',
                                'position': 'absolute'
                        }).animate({
                                'top': '9.5001rem'
                        }, 4000, function() {
                                a = i - 1
               
                                if ($('.newBall' + a).position().top == $('.ball').position().top && $('.newBall' + a).position().left >= $(
                                                '.ball').position().left - 15 && $('.newBall' + a).position().left <= $('.ball').position().left + 30) {
                                        sco = sco + 10
                                        $('.sco').text(sco)
                                        i = i - 1
                                        arr.pop()
                                        $('.newBall' + a).remove()
                                        w=w+0.01
                                        $('.ball').css({
                                                "width":w+"rem"
                                        })
               
                                } else {
                                alert("真可惜")
                                }
               
                        }, )
                        i++
                        if (i >= 10 || sco >= 200) {
                                clearInterval(collide)
                                alert('游戏结束,难易程度可调节')
                        }
                }
                var collide = setInterval(bron, 4100)
        </script>
</html>

评分

参与人数 2金币 +20 收起 理由
小米小爱同学 + 10
HIMlaoS_Misa + 10 好活

查看全部评分

帖子地址: 

这个家伙很懒,什么都没有写~
提示:该广告来自 Google。本站不对广告的真实性、合法性做保障,请自行甄别。常见问题
Linux
 楼主| Linux 发表于 2021-3-29 21:53:34

点评

好恶毒的Linux系统(bushi  详情 回复 发表于 2021-3-29 21:57
这个家伙很懒,什么都没有写~
孙仲康
孙仲康 发表于 2021-3-29 21:57:46
Linux 发表于 2021-3-29 21:53
https://bbs.mlbbs.top/t/1094/1

这事起因

好恶毒的Linux系统(bushi
这个家伙很懒,什么都没有写~
HIMlaoS_Misa
HIMlaoS_Misa 发表于 2021-3-29 22:28:21
好活
这个家伙很懒,什么都没有写~
回复

使用道具 举报

小米小爱同学
小米小爱同学 发表于 2021-3-30 18:29:43
啊泽!!!
这个家伙很懒,什么都没有写~
回复

使用道具 举报

HIMlaoS_Misa
HIMlaoS_Misa 发表于 2021-4-2 17:41:28
我吐槽一下,我到现在都不知道这玩意是怎么玩的

点评

按一下“左”会使misa一直向左运动 按“停止”会使misa停止运动 按一下“右”会使misa一直向右运动 这个游戏难到炸的原因是我碰撞检测没做对 另外,在最初写这个游戏时(大概几个月前),我不知道怎么设置长按,所以  详情 回复 发表于 2021-4-2 18:22
这个家伙很懒,什么都没有写~
Linux
 楼主| Linux 发表于 2021-4-2 18:22:42
HIMlaoS_Misa 发表于 2021-4-2 17:41
我吐槽一下,我到现在都不知道这玩意是怎么玩的

按一下“左”会使misa一直向左运动
按“停止”会使misa停止运动
按一下“右”会使misa一直向右运动

这个游戏难到炸的原因是我碰撞检测没做对
另外,在最初写这个游戏时(大概几个月前),我不知道怎么设置长按,所以就做了一键运动的机制。最近把它完善了一下,前面的代码没碰,所以就做成这样了ouo
有时间帮我改一下,我找机会扔服务器上

点评

我也知道是左右移动,我的意思是游戏机制不明显  详情 回复 发表于 2021-4-2 18:42
这个家伙很懒,什么都没有写~
HIMlaoS_Misa
HIMlaoS_Misa 发表于 2021-4-2 18:42:58
Linux 发表于 2021-4-2 18:22
按一下“左”会使misa一直向左运动
按“停止”会使misa停止运动
按一下“右”会使misa一直向右运动

我也知道是左右移动,我的意思是游戏机制不明显

点评

本来就是信息技术课上摸鱼写的,没考虑游戏机制问题( 找时间重做一个  详情 回复 发表于 2021-4-2 18:46
这个家伙很懒,什么都没有写~
Linux
 楼主| Linux 发表于 2021-4-2 18:46:11
HIMlaoS_Misa 发表于 2021-4-2 18:42
我也知道是左右移动,我的意思是游戏机制不明显

本来就是信息技术课上摸鱼写的,没考虑游戏机制问题(
找时间重做一个
这个家伙很懒,什么都没有写~
提示:该广告来自 Google。本站不对广告的真实性、合法性做保障,请自行甄别。常见问题
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

提示:该广告来自 Google。本站不对广告的真实性、合法性做保障,请自行甄别。常见问题

小黑屋|站点文档|购买充值|MisaLiu个人论坛 ( 鄂ICP备 备你妈的案 )|Sitemap

GMT+8, 2021-12-8 23:20 , Processed in 0.145841 second(s), 21 queries , Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表