jQuery css3益智汉诺塔小游戏特效源码下载


jQuery css3益智汉诺塔小游戏特效源码下载
jQuery css3益智汉诺塔小游戏特效源码下载以及益智汉诺塔、小游戏等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

2. HTML代码

		<div class="container">
			<div class="left">
				<div class="ganzi"></div>
				<div class="box-container"></div>
			</div>
			<div class="middle">
				<div class="ganzi"></div>
				<div class="box-container"></div>
			</div>
			<div class="rigth">
				<div class="ganzi"></div>
				<div class="box-container"></div>
			</div>
		</div>
		<div class="control">
			<div class="left">
				<button type="button" class="btn-right">></button>
			</div>
			<div class="middle">
				<button type="button" class="btn-left"><</button>
				<button type="button" class="btn-right">></button>
			</div>
			<div class="right">
				<button type="button" class="btn-left"><</button>
			</div>
		</div>
		<div class="tip">
			规则:将诺塔从第一根柱子移动到第三根,每次移动仅允许小的出现在大的上面,否则移动无效
		</div>
		<div>
			<button id="help">点我试试,帮你走</button>
		</div>
		<script type="text/javascript">
			var config = {
				default_arr: [1, 2, 3],
				step: 0,
				time: 0,
				falg: true,
			}
			var els = document.querySelectorAll('.box-container'),
				left_button = document.getElementsByClassName('btn-right'),
				right_button = document.getElementsByClassName('btn-left'),
				str = ''
			// 初始化
			;(function () {
				for (var i in config.default_arr) {
					str += `<div class="flex-box" style="width:${100 + (config.default_arr[i] - 1) * 20}px"></div>`
				}
				els[0].innerHTML = str
				for (let i = 0, len = left_button.length; i < len; i++) {
					left_button[i].onclick = function () {
						if (els[i].innerHTML == '') {
							return
						}
						move(els[i], els[i + 1])
					}
				}
				for (let i = 0, len = right_button.length; i < len; i++) {
					right_button[i].onclick = function () {
						if (els[i + 1].innerHTML == '') {
							return
						}
						move(els[i + 1], els[i])
					}
				}
			})()
			function move(before_el, after_el) {
				var $before_el = $(before_el).children().eq(0),
					$after_el = $(after_el).children().eq(0),
					before_el_width = $before_el.css('width'),
					after_el_width = $after_el.css('width')
				if (!after_el_width || parseInt(before_el_width) < parseInt(after_el_width)) {
					$($before_el).remove()
					$(after_el).prepend($before_el)
					config.step++
				}
				if (isWin()) {
					alert('天才,你赢了,你只用了' + config.step + '步')
				}
			}
			function isWin() {
				if ($(els[2]).children().length == config.default_arr.length) {
					return true
				} else {
					return false
				}
			}
			function hanoi(n, A, B, C) {
				if (n == 1) {
					move(A, C)
				} else {
					hanoi(n - 1, A, C, B)
					move(A, C)
					hanoi(n - 1, B, A, C)
				}
			}
			function help() {
				var falg = confirm('看你走的这么辛苦,要我帮你完成吗')
				if (falg) {
					config.falg = false
					hanoi(config.default_arr.length, $(els[0]), $(els[1]), $(els[2]))
				}
			}
			document.getElementById('help').onclick = help
		</script>

相关推荐

发表评论

相关文章