程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长

+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

移动应用开发——作业3

发布于2021-05-30 20:08     阅读(633)     评论(0)     点赞(11)     收藏(3)


题目一:使用Javascript代码编写一个“杭州亚运会倒计时”网页,要求适合于手机上展示。时间能精确到秒,显示的时间格式,可自己定,例如:286天12时36分20秒。
截图和效果说明:
在这里插入图片描述
主要源代码和说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业3.1</title>
    <script type="text/javascript">
        function getTime() {
            var NowTime = new Date();
            var StartTime = new Date('2022/9/10 00:00:00');
            var time = StartTime.getTime() - NowTime.getTime();
            var d=Math.floor(time/1000/60/60/24);
            var h=Math.floor(time/1000/60/60%24);
            var m=Math.floor(time/1000/60%60);
            var s=Math.floor(time/1000%60);
            document.getElementById("day").innerHTML = d + "日";
            document.getElementById("hour").innerHTML = h + "时";
            document.getElementById("minute").innerHTML = m + "分";
            document.getElementById("second").innerHTML = s + "秒";
        }
        setInterval(getTime,1000);  //毫秒转换
    </script>
</head>
<body>
    <h2 style="color: #00d9ff">杭州亚运会倒计时</h2>
    <span style="color: #cf273d">距离开始还有:</span>
    <span id="day"></span>
    <span id="hour"></span>
    <span id="minute"></span>
    <span id="second">初始化中...</span>
</body>
</html>

题目二:使用Javascript代码编写一个手机网页小游戏,要适合手机屏幕上操作,例如:贪吃蛇、五子棋、连连看等。要包含事件编程的代码,游戏功能不要设计得太复杂,关键是使用自己能理解并掌握的代码,对自己编写的代码有详细的解释。
截图和效果说明:
在这里插入图片描述
主要源代码和说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业3.2-贪吃蛇</title>
</head>
<body>
    <canvas id="canva" width="400" height="400" style="background:Black"></canvas>
    <script>
    var line=[42,41];   //贪吃蛇队列
    var spot=43;    //食物点
    var fx=1;  
    var n;  
    var ctx=document.getElementById("canva").getContext("2d");
    function draw(t,c){
        ctx.fillStyle=c;
        ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);   //给点着色
    }
    document.onkeydown=function(e){
        fx=line[1]-line[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n    //获取键盘输入
    };
    !function(){
        line.unshift(n=line[0]+fx);  //头部增减
        if(line.indexOf(n,1)>0 || n<0||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) return alert("游戏结束");  //结束条件
        draw(n,"GREEN");
        if(n==spot){   //吃到食物
            while(line.indexOf(spot=~~(Math.random()*400))>=0);
            draw(spot,"RED");
        }
        else
            draw(line.pop(),"Black");
        setTimeout(arguments.callee,130);
    }();
    </script>
</body>
</html>

原文链接:https://blog.csdn.net/weixin_45102232/article/details/117389268



所属网站分类: 技术文章 > 博客

作者:你说php不行了

链接:http://www.phpheidong.com/blog/article/86785/3420ca296aa43fdc82d4/

来源:php黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)