Javascript 如何制作迷你游戏的计数器？

我想为我的迷你网络项目制作一个游戏，我遇到了这些代码来帮助我制作一个游戏，这个游戏的目标是将正确的图片匹配到正确的位置（在本例中为北、中、南）。我进行了验证，我想知道当最后一张图片被放入正确的框中时，是否有可能创建一个类似于提示框的对话框。此外，我还有一个计时器，我想知道当用户完成游戏时，是否可以在提示符上打印时间。我只允许使用HTML、CSS和JavaScript

//计时器//
var h1=document.getElementsByTagName（'h1'）[0]，
start=document.getElementById（'start'），
stop=document.getElementById（'stop'），
clear=document.getElementById（'clear'），
秒=0，分钟=0，小时=0，
T
函数add（）{
秒++；
如果（秒>=60）{
秒=0；
分钟++；
如果（分钟>=60）{
分钟=0；
小时++；
}
}
h1.textContent=（小时）（小时>9？小时：“0”+”：“+（分钟）（分钟>9？分钟：“0”+分钟）：“00”）+”：“+（秒>9？秒：“0”+秒）；
定时器（）；
}
函数计时器（）{
t=设置超时（加上1000）；
}
定时器（）；
//计时器结束//
//开始比赛//
//添加事件处理程序
var addEvent=（函数（）{
if（文件增补列表器）{
返回函数（el、类型、fn）{
if（el&&el.nodeName | | el==窗口）{
el.addEventListener（类型，fn，错误）；
}else if（标高和标高长度）{
对于（变量i=0；i

/*页面布局样式*/
*{
保证金：0；
填充：0；
}
.游戏边界{
高度：40px；
宽度：100%；
背景图像：url（'../../Media/Main/mbg2.png'）；
}
/*计时器*/
.计时器{
高度：自动；
宽度：25%；
边界半径：5px；
边框：7px固体#3e8bc6；
字号：2.5em；
字母间距：5px；
文本对齐：居中；
利润率：1%自动；
填充：1.5%2%1.5%2%；
背景色：黑色；
颜色：白色；
文本阴影：0 0 5px黄色；
}
/*结束计时器*/
/*照片集风格*/
.画廊{
利润率：3%至4%；
宽度：840px；
}
a画廊{
显示：内联块；
高度：135px；
利润率：10px；
不透明度：1；
位置：相对位置；
宽度：180px；
高度：135px；
-khtml用户拖动：元素；
/*CSS3阻止选择*/
-moz用户选择：无；
-webkit用户选择：无；
-khtml用户选择：无；
用户选择：无；
/*CSS3转换规则*/
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
}
.a画廊{
边框：8px实心#fff；
边框底部：20px实心#fff；
光标：指针；
显示：块；
身高：100%；
左：0px；
位置：绝对位置；
顶部：0px；
宽度：100%；
z指数：1；
/*CSS3盒大小属性*/
-moz框大小：边框框；
-webkit框大小：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
/*CSS3转换规则*/
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：所有0.5s缓解；
/*CSS3盒影*/
-莫兹盒阴影：2px2p4px444；
-网络工具包盒阴影：2px2p4px444；
-o形盒阴影：2PX2PX4PX#444；
盒影：2px2p4px444；
}
/*自定义CSS3旋转变换*/
.a座：第N名儿童（1）img{
-moz变换：旋转（-10度）；
-webkit变换：旋转（-10度）；
变换：旋转（-10度）；
}
厚颜无耻
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
    if (event.preventDefault) event.preventDefault();

    // get dropped object
    var iObj = event.dataTransfer.getData('obj_id');
    var oldObj = document.getElementById(iObj);

    // validate the placement of the image
    if(this.id !== oldObj.dataset.dropTo) {
        return false;
    }
    // get its image src
    var oldSrc = oldObj.childNodes[0].src;
    oldObj.className += 'hidden';

    var oldThis = this;

    setTimeout(function() {
        oldObj.parentNode.removeChild(oldObj); // remove object from DOM

        // add similar object in another place
        oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';

        // and update event handlers
        updateDataTransfer();

        // little customization
        oldThis.style.borderColor = "#3e8bc6";

    if (document.querySelectorAll('.gallery > a').length < 1) {
        alert('Congratulations!\nTime elapsed:' + hours + ':' + minutes + ':' + seconds);
    }
    }, 500);
    return false;
});

if (document.querySelectorAll('.gallery > a').length < 1) {
        alert('Congratulations!\nTime elapsed:' + hours + ':' + minutes + ':' + seconds);
    }