【网页设计】打地鼠

最新推荐文章于 2025-03-25 17:32:32 发布

原创最新推荐文章于 2025-03-25 17:32:32 发布 · 928 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#网页设计

web学习（总）同时被 2 个专栏收录

4 篇文章

订阅专栏

web编程实例

3 篇文章

订阅专栏

这篇博客详细介绍了如何使用HTML、JavaScript和CSS技术，从零开始构建一个互动的打地鼠游戏。通过homework.html文件实现页面布局，test.js负责游戏逻辑，而test.css确保了视觉效果和交互体验。读者将学习到网页动态效果的实现方法和前端开发的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

homework.html

<!DOCTYPE>

<html>
    <head>
        <meta charset="utf-8">
        <title>打地鼠</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
        <script type="text/javascript" src="test.js"></script> 
    </head>
    <body onload="create()">
        <div id="title">
            <h1>打地鼠</h1>
            <p>操作说明：用鼠标点击。当前分数是：<span id="score">0</span>分。剩余的时间：<span id="time">0</time>秒。</p>
        </div>
        <div id="list">
            <form>
                请选择难度
                <select id="difficulty" onchange="changeDifficulty();">
                    <option value="hard">Hard</option>
                    <option value="middle">Middle</option>
                    <option value="easy">Easy</option>
                    <option value="relax">Relax</option>
                </select>
                请输入游戏时间：<input type="txt" id="WantTime" value="10">
            </form>
            <button id="begin" type="button" onclick="begin()">开始</button>
            <button id="end" type="button" onclick="stop()">结束</button>
        </div>

        <div id="wrapper">

        </div>

    </body>

</html>

test.js


var difficulty="hard";//难度
var time=500;//间隔事件
var endtime=new Number(10);//结束时间

function changeDifficulty()
{
    difficulty=document.getElementById("difficulty").value;
    switch(difficulty)
    {
        case "hard": time=500;break;
        case "middle": time=800;break;
        case "easy": time=1200;break;
        case "relax": time=2000;break;
    }
}

function create()
{
    var body=document.getElementById("wrapper");;
    //游戏时间更新

    for(var i=0;i<10;i++)
    {
        var line=document.createElement("div");
        line.id="line"+(i+1);
        body.appendChild(line);

        for(var j=1;j<=10;j++)
        {
            var note=document.createElement("div");
            line.appendChild(note);         

            note.id="note"+(i*10+j);

            //css
            note.style.height="30px";
            note.style.width="30px";
            note.style.borderRadius="100%";
            note.style.margin="10px";
            note.style.backgroundColor="#86cab1";
            note.style.display="inline-block";
            note.style.border="1px solid #4fbaeb"

        }
    }

}



var note;//当前随机节点
var timer;//用作关闭的引用
var score=0;//分数
var timing=new Number(0);//计时器

function AddScore()
{
    score++;
    document.getElementById("score").innerHTML=score;
    init();
}

function init()
{
    note.removeEventListener("click",AddScore); 
    note.style.backgroundColor="#86cab1";   
}

function begin()
{
    //更新剩余时间
    endtime=document.getElementById("WantTime").value;

    //随机数生成
    var aim=Math.floor(100*Math.random())+1;
    note=document.getElementById("note"+aim);
    //样式
    note.style.backgroundColor="#ea617f";
    note.addEventListener("click",AddScore);

    //更新计数器
    timing+=time/1000;
    var showtime=new Number();
    showtime=endtime-timing;
    document.getElementById("time").innerHTML=showtime.toFixed(2);

    setTimeout("init()",time);


    timer=setTimeout("begin()",time);
    if(timing>endtime)
    {
        alert("游戏结束！你的得分是 "+score);
        stop();
    }
}

function stop()
{
    timing=0;
    score=0;
    note.style.backgroundColor="#86cab1";   
    clearTimeout(timer);

    document.getElementById("score").innerHTML=score;
    document.getElementById("time").innerHTML=timing;   
}

test.css

#title {
    text-align: center;
}

#list {
    text-align: center;
}


select {
    margin-right: 30px;

}

#wrapper {
    text-align: center;
}