首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript小游戏2

JavaScript小游戏2

作者头像
Lemon黄
发布2019-10-29 18:19:12
4760
发布2019-10-29 18:19:12
举报
文章被收录于专栏:Lemon黄Lemon黄

用一个JS小游戏来练习下JS的相关知识

创建HTML文件

创建视图文件game1.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>小游戏</title>  
</head>
<body>
<div id="d1" >
    <input id="input" type="button" value="来呀,点我呀!" onclick="mv()"/>
</div>
</body>
</html>

添加CSS样式 这类就没有定义外部的样式css文件,之间在页面中head->style标签中写入:

<style type="text/css">
        #d1
        {
            width: 160px;
            height:160px;
            background-color: #66ffff;
            border: 2px solid yellow;
            border-radius:10px 10px 10px 10px ;
            box-shadow: 2px 2px 10px #cccccc;
            position: absolute;
            top: 0%;
            left: 0%;
            right:86%;
            bottom:86%;


        }
        #input{
            margin-top:45px;
            margin-left: 30px;
            width: 101px;
            height: 68px;
            background-color: #66ffff;
            color: #ffffff;
            font-weight: 700;
            border: 0px;
        }
    </style>

添加Js 代码 同理,JS代码也写在game1.html文件中:

<script type="text/javascript">
        var number=1;
        function mv(){

            if (number==1){
                mv2();
                number=2;
            }
            else if(number==2){
                mv3();
                number=3;
            }
            else if(number==3){
                mv4();
                number=4;
            }
            else if(number==4){
                mv1();
                number=1;
            }
        }
        function mv1(){

            document.getElementById('d1').style.left=0+"%";
            document.getElementById('d1').style.right=88+"%";
            document.getElementById('d1').style.top=0+"%";
            document.getElementById('d1').style.bottom=76+"%";


        }

        function mv2()
        {
            document.getElementById('d1').style.left=88+"%";
            document.getElementById('d1').style.right=0+"%";
            document.getElementById('d1').style.top=0+"%";
            document.getElementById('d1').style.bottom=76+"%";
        }
        function mv3()
        {
            document.getElementById('d1').style.top=76+"%";
            document.getElementById('d1').style.bottom=0+"%";
            document.getElementById('d1').style.left=88+"%";
            document.getElementById('d1').style.right=0+"%";
        }
        function mv4()
        {
            document.getElementById('d1').style.bottom=0+"%";
            document.getElementById('d1').style.left=0+"%";
            document.getElementById('d1').style.top=76+"%";
            document.getElementById('d1').style.right=88+"%";
        }

    </script>

运行效果:

最后

附上完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>小游戏</title>
    <script type="text/javascript">
        var number=1;
        function mv(){

            if (number==1){
                mv2();
                number=2;
            }
            else if(number==2){
                mv3();
                number=3;
            }
            else if(number==3){
                mv4();
                number=4;
            }
            else if(number==4){
                mv1();
                number=1;
            }
        }
        function mv1(){

            document.getElementById('d1').style.left=0+"%";
            document.getElementById('d1').style.right=88+"%";
            document.getElementById('d1').style.top=0+"%";
            document.getElementById('d1').style.bottom=76+"%";


        }

        function mv2()
        {
            document.getElementById('d1').style.left=88+"%";
            document.getElementById('d1').style.right=0+"%";
            document.getElementById('d1').style.top=0+"%";
            document.getElementById('d1').style.bottom=76+"%";
        }
        function mv3()
        {
            document.getElementById('d1').style.top=76+"%";
            document.getElementById('d1').style.bottom=0+"%";
            document.getElementById('d1').style.left=88+"%";
            document.getElementById('d1').style.right=0+"%";
        }
        function mv4()
        {
            document.getElementById('d1').style.bottom=0+"%";
            document.getElementById('d1').style.left=0+"%";
            document.getElementById('d1').style.top=76+"%";
            document.getElementById('d1').style.right=88+"%";
        }

    </script>
    <style type="text/css">
        #d1
        {
            width: 160px;
            height:160px;
            background-color: #66ffff;
            border: 2px solid yellow;
            border-radius:10px 10px 10px 10px ;
            box-shadow: 2px 2px 10px #cccccc;
            position: absolute;
            top: 0%;
            left: 0%;
            right:86%;
            bottom:86%;
        }
        #input{
            margin-top:45px;
            margin-left: 30px;
            width: 101px;
            height: 68px;
            background-color: #66ffff;
            color: #ffffff;
            font-weight: 700;
            border: 0px;
        }
    </style>
</head>
<body>

<div id="d1" >
    <input id="input" type="button" value="来呀,点我呀!" onclick="mv()"/>
</div>

</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-10-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Lemon黄 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档