HTML5 数字序列猜测小游戏

把预览屏幕拉宽（露出完整的三列数字）来玩这个小游戏。

game

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1809
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// The purpose of the game is to find the largest sequence of numbers before the timer runs out. You are awarded  points based off how close you got to the solution to the sequence. On the bottom, the number on the left is your sequence for that game, and the number on the right is your total points.

function longestSequence(grid) {
	var sequence = [];

// Go through all the numbers in the grid, and find ones that have valid sequences near them
	for (var row = 0; row < grid.length; row++) {
		for (var column = 0; column < grid[row].length; column++) {
			try{
				sequence = numbersAround(row, column, grid, sequence)
			} catch(e) {

}
		}
	}

// With the valid sequences around them, find which one goes the longest
	for (var i = 0; i < sequence.length; i++) {
		try {
			checkNew(sequence[i].row, sequence[i].column, grid, sequence[i])
		} catch (s) {

}
	}

// Find largest path
	var big = 0
	for (var i = 0; i < sequence.length; i++) {
		if (sequence[i].sequenceNumber > big) {
			big = sequence[i].sequenceNumber
		}
	};
	return big;
}

// console.log(longestSequence( 
// 	[[8,2,4,5] 
// 	,[0,7,1,4] 
// 	,[3,7,9,2]
// 	,[4,4,2,7]] 
// 	));
var newGrid = 
[[null,null,null]
,[null,null,null]
,[null,null,null]]
for (var i = 0; i < newGrid.length; i++) {
	for (var y = 0; y < newGrid[i].length; y++) {
		newGrid[i][y] = Math.floor(Math.random(Math.random() * 10) * 10)
		explain = " The grid used was: " + newGrid[i][y]
		document.getElementById(i + "" + y).innerHTML = newGrid[i][y];
	}
}

// -- Global Variables --
console.log("New Array: " + longestSequence(newGrid))
// Largest Sequence
var max = longestSequence(newGrid)
// User sequence'd items
var clicks = 0;
// Last number clicked
var lastNumber = 0;
// Countdown
var timer = setInterval(timer, 1000);
var timerSeconds = 10;
// Points of all the games
var totalPoints = 0;
var gamePoints = 0;
// -- END Global Variables --

// Check to make active, or invalid
	var currentNumber = parseInt(document.getElementById(button).innerHTML)
	var buttonClass = document.getElementById(button)
	if (lastNumber <= currentNumber) {
		// Current Item Class
		if (buttonClass.className == "active") {
			buttonClass.removeAttribute("class");
			clicks -= 1;
		} else {
			buttonClass.className = "active";
			lastNumber = currentNumber;
			clicks += 1;
		}
		document.getElementById("count").innerHTML = clicks;
	} else {
		buttonClass.className = "invalid";
	}
}
}

编译

CSS

/* Snazzy stuff */
.fancy {
	color: white;
	margin: 0 auto;
	font-family: Lato;
	font-size: 5em;
	text-align: center;
}
.shamelessPlug {
	color: #368DDA;
	margin: 0 auto;
	font-family: Lato;
	font-size: 2em;
	text-align: center;
}
a {
	text-decoration: none;
}
body {
	/*background-color: #202020;*/
	background-color: white;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.board {
	width: 75%;
	margin:0 auto;
	text-align: center;
	font-family: Lato;
	font-size: 400%;
}
#timer {
	color: #2ECC71;
}
#count {
	position: relative;
	display: inline-block;
	color: #E74C3C;
}
#message {
	color: #E74C3C;
}
.points {
	position: relative;
	display: inline-block;
	color: #2ECC71;
	margin-left: 25%;
}
.info {
	position: relative;
	display: inline-block;
	width: 25%;
}
span {
	position: relative;
	display: inline-block;
	padding: 15px 20px;
	margin: 20px 10px;
	border-radius: 3px;
	background: #368DDA;
	color: white;
	border: solid 1px
	-moz-box-shadow: #0B64B3 0 6px, #F2F2F2 0 6px 5px;
	-webkit-box-shadow: #0B64B3 0 6px, #F2F2F2 0 6px 5px;
	box-shadow: #0B64B3 0 6px, #F2F2F2 0 6px 5px;
	-moz-transform: translateY(-6px);
	-ms-transform: translateY(-6px);
	-webkit-transform: translateY(-6px);
	transform: translateY(-6px);
	-moz-transition-property: background-color;
	-o-transition-property: background-color;
	-webkit-transition-property: background-color;
	transition-property: background-color;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.active {
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background: white;
	color: #368DDA;
	-moz-box-shadow: 0 0 1px #368DDA;
	-webkit-box-shadow: 0 0 1px #368DDA;
	box-shadow: 0 0 1px #368DDA;
}
.invalid {
	animation:invalid .25s;
	-webkit-animation:invalid .25s;
}
@keyframes invalid
{
	0% {left:4px;}
	10% {left:-4px;}
	30% {left:4px;}
	60% {left:-4px;}
	100% {left:0px;}
}
@-webkit-keyframes invalid /* Safari and Chrome */
{
	0% {left:4px;}
	10% {left:-4px;}
	30% {left:4px;}
	60% {left:-4px;}
	100% {left:0px;}
}
.note {
	position: relative;
	font-size: 100%;
	font-family: Lato;
	width: 25%;
	margin: 5%;
	padding: 5px;
	top: -575px;
	left: 50px;
	border-radius: 3px;
	background: #ecf0f1;
	color: #999;
	-moz-box-shadow: 0 0 1px #999;
	-webkit-box-shadow: 0 0 1px #999;
	box-shadow: 0 0 1px #999;
}

HTML

<div class="board">
		<div id="timer">10</div>
		<div id="message"></div>
		<div class="0">
			<span class="" id="00" onclick="counter('00')">Test</span>
			<span class="" id="01" onclick="counter('01')">Test</span>
			<span class="" id="02" onclick="counter('02')">Test</span>
		</div>
		<div class="1">
			<span class="" id="10" onclick="counter('10')">Test</span>
			<span class="" id="11" onclick="counter('11')">Test</span>
			<span class="" id="12" onclick="counter('12')">Test</span>
		</div>
		<div class="2">
			<span class="" id="20" onclick="counter('20')">Test</span>
			<span class="" id="21" onclick="counter('21')">Test</span>
			<span class="" id="22" onclick="counter('22')">Test</span>
		</div>
		<div class="info">
			<div class="counter" id="count">0</div>
			<div class="points" id="points">0</div>
		</div>
	</div>
	<div class="note">
		<h1>Sequence</h1>
		<h2>A Numbers Game</h2>
		<h3>Beat the Clock!</h3>
		<p>Each board has a sequence of numbers that only I know. Can you find it?</p>
		<p>Start by clicking a number, and trying to create a chain of numbers that are greater than or equal to the one you just clicked. For example, if I start with 0, I then create a sequence of 0->2->4->7->7->9</p>
		<p>On the bottom, the number to the left is the length of your current sequence. On the right is your total score. You are awarded points based off how close you were to my sequence. Good Luck!</p>
	</div>

把预览屏幕拉宽（露出完整的三列数字）来玩这个小游戏。

game

编辑器支持Emmet

快捷键

把预览屏幕拉宽（露出完整的三列数字）来玩这个小游戏。

game

HTML5实现的2048填数字小游戏

HTML5经典数独（sudoku puzzle）益智小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：