javascript - 如何制作小游戏的计数器？

标签 javascript html css counter

我想为我的迷你网络元素做一个游戏，我遇到了这些代码来帮助我做一个游戏，这个游戏的目标是将正确的图片匹配到正确的位置(在这种情况下是北方，中、南)。我得到了验证工作，我想知道当最后一张图片被放入正确的框中时是否可以创建一个提示框。另外我还有一个计时器，我想知道是否可以在用户完成游戏时在提示上打印时间。我只允许使用 HTML、CSS 和 JavaScript。 

//Timer//
var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();
//End of Timer//

//Start Game//
// add event handler
var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();



// inner variables
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');

// preventDefault (stops the browser from redirecting off to the text)
function cancel(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  return false;
}

// update event handlers
function updateDataTransfer() {
    dragItems = document.querySelectorAll('[draggable=true]');
    for (var i = 0; i < dragItems.length; i++) {
        addEvent(dragItems[i], 'dragstart', function (event) {
            event.dataTransfer.setData('obj_id', this.id);
            return false;
        });
    }
}

// dragover event handler
addEvent(dropAreas, 'dragover', function (event) {
    if (event.preventDefault) event.preventDefault();

    // little customization
    this.style.borderColor = "#fff";
    return false;
});

// dragleave event handler
addEvent(dropAreas, 'dragleave', function (event) {
    if (event.preventDefault) event.preventDefault();

    // little customization
    this.style.borderColor = "#ccc";
    return false;
});

// dragenter event handler
addEvent(dropAreas, 'dragenter', cancel);

// 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";
    }, 500);

    return false;
});

//End of Game//
/* Page layout styles */
*{
    margin:0;
    padding:0;
}

.Game-border{
	height:40px;
	width:100%;
	background-image:url('../../Media/Main/mbg2.png');
}
/*Timer*/
.timer{
	height:auto;
	width:25%;
	border-radius: 5px;
	border: 7px solid #3e8bc6;
	font-size:2.5em;
	letter-spacing:5px;
	text-align:center;
	margin:1% auto;
	padding:1.5% 2% 1.5% 2%;
	background-color:black;
	color:white;
	text-shadow: 0 0 5px yellow;
	
}


/*End-Timer*/

/* Photo Gallery styles */
.gallery {
    margin: 3% auto 4%;
    width: 840px;

}

.gallery a {
    display: inline-block;
    height: 135px;
    margin: 10px;
    opacity: 1;
    position: relative;
    width: 180px;
	height:135px;

    -khtml-user-drag: element;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.gallery a img {
    border: 8px solid #fff;
    border-bottom: 20px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    /* CSS3 Box Shadow */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}

/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:hover img {
    z-index: 5;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    /* CSS3 transform rules */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a.hidden {
    height: 0;
    margin: 0;
    opacity: 0;
    width: 0;
}
.albums {
    margin: 40px auto 0;
    overflow: hidden;
    width: 840px;
}
.album {
	text-align:center;
    border: 3px dashed #64a2d1;
	font-size:1.2em;
    float: left;
    margin: 10px;
    min-height: 100px;
    padding: 10px;
    width: 220px;
	color:white;
	text-shadow: 0 0 2px yellow;
    /* CSS3 transition rules */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}
.album a {
    display: inline-block;
    height: 56px;
    margin: 15px;
    opacity: 1;
    position: relative;
    width: 75px;

    -khtml-user-drag: element;
    -webkit-user-drag: element;
    -khtml-user-select: none;
    -webkit-user-select: none;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.album a img {
    border: 4px solid #fff;
    border-bottom: 10px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition rules */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    /* CSS3 Box Shadow */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}
<article class="timer">
			<h1 class="realtimer"><time>00:00:00</time></h1>
		</article>
		
		<!-- End-Timer -->
		
        <div class="albums">
            <div class="album" id="drop_1" droppable="true"><h2>North</h2></div>
            <div class="album" id="drop_2" droppable="true"><h2>Centre</h2></div>
            <div class="album" id="drop_3" droppable="true"><h2>South<h2></div>
        </div>
        <div style="clear:both"></div>
		
        <div class="gallery">
            <a id="1" draggable="true" data-drop-to="drop_1"><img src="../Media/Game/1.jpg"></a>
            <a id="2" draggable="true" data-drop-to="drop_3"><img src="../Media/Game/2.jpg"></a>
            <a id="3" draggable="true" data-drop-to="drop_3"><img src="../Media/Game/3.jpg"></a>
            <a id="4"  draggable="true" data-drop-to="drop_1"><img src="../Media/Game/4.jpg"></a>
            <a id="5"  draggable="true" data-drop-to="drop_2"><img src="../Media/Game/5.jpg"></a>
            <a id="6" draggable="true" data-drop-to="drop_2"><img src="../Media/Game/6.jpg"></a>
            <a id="7"  draggable="true" data-drop-to="drop_1"><img src="../Media/Game/7.jpg"></a>
            <a id="8"  draggable="true"data-drop-to="drop_3"><img src="../Media/Game/8.jpg"></a>
            <a id="9" draggable="true" data-drop-to="drop_1"><img src="../Media/Game/9.jpg"></a>
            <a id="10"  draggable="true" data-drop-to="drop_2"><img src="../Media/Game/10.jpg"></a>
            <a id="11"  draggable="true" data-drop-to="drop_1"><img src="../Media/Game/11.jpg"></a>
            <a id="12"  draggable="true" data-drop-to="drop_3"><img src="../Media/Game/12.jpg"></a>
        </div>

最佳答案

尝试更新以下部分:

// 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;
});

在 DOM 元素被替换后，我添加了下面的代码用于在 drop 事件上的提示(根据您的喜好自定义)。

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

Working Fiddle here .

关于javascript - 如何制作小游戏的计数器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31319826/

上一篇：html - 如何让 CSS 正确对齐标题​​？

下一篇：android - 在某些手机中以整页显示的 Jquery 移动应用程序标题

相关文章：

javascript - jPlayer javascript 事件触发器仅适用于第一首歌曲

html - 如何轻松覆盖 Bootstrap CSS

html - 如何保持图像位置直到图像加载

html - 如何在Firefox 和IE 中显示滚动条？

javascript - 如何在 javascript 中获取元素的背景颜色？

css - 如何让 <select> 显示内联？

javascript - 使用 javascript 进行多项选择测验

javascript - jQuery:如何在循环中附加数组项？

javascript - 逻辑问题，求算法

html - 更改 css 网格以包含固定高度的标题

©2024 IT工具网  联系我们