移动应用开发——作业3-php黑洞网

本站消息

站长简介/公众号

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

你说php不行了

2202

文章

931218

访问

+关注

分类

暂无分类

日期归档

2024-11(1)

移动应用开发——作业3

发布于2021-05-30 20:08 阅读(786) 评论(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