15puzzle

タイルを動かして、1-15の順番に並べるゲームで、各数字に割り当てるx座標y座標をMathfloorのwidth,heightで割って、配列しています。var moveCountの数字を動かすことによって、ゲームの難易度を変更します。

reference
clientX Property:returns the horizontal coordinate (according to the client area) of the mouse pointer when a mouse event was triggered.The client area is the current window.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>15puzzle</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	</style>
</head>
<body>
	<canvas id="stage" width="280" height="280">
		Canvas not supported ...
	</canvas>
	<script>
		(function(){
			'use strict';

			var canvas = document.getElementById('stage');
			var context;
			var image;
			var IMAGE_URL = '15puzzle.png';
			var tiles = [];
			var ROW_COUNT = 4;
			var COL_COUNT = 4;
			var PIC_WIDTH = 280;
			var PIC_HEIGHT = 280;
			var TILE_WIDTH = PIC_WIDTH / COL_COUNT;
			var TILE_HEIGHT = PIC_HEIGHT / ROW_COUNT;
			var UDLR = [
				[ 0, -1],
				[ 0, 1],
				[ -1, 0],
				[ 1, 0],
			];
			var moveCount = 3;

			function initTiles(){
				var row, col;
				for (row = 0; row < ROW_COUNT; row++){
					tiles&#91;row&#93; = &#91;&#93;;
					for (col = 0; col < COL_COUNT; col++){
						tiles&#91;row&#93;&#91;col&#93; = row * COL_COUNT + col;
					}
				}
				tiles&#91;ROW_COUNT - 1&#93;&#91;COL_COUNT - 1&#93; = -1;
			}

			function drawPuzzle(){
				var row, col;
				var sx, sy;
				var dx, dy;

				for (row = 0; row < ROW_COUNT; row++){
					for (col = 0; col < COL_COUNT; col++){
						dx = col * TILE_WIDTH;
						dy = row * TILE_HEIGHT;
						if (tiles&#91;row&#93;&#91;col&#93; === -1){
							context.fillStyle = '#eeeeee';
							context.fillRect(dx, dy, TILE_WIDTH, TILE_HEIGHT);
						}else {
						sx = (tiles&#91;row&#93;&#91;col&#93; % COL_COUNT) * TILE_WIDTH;
						sy = Math.floor((tiles&#91;row&#93;&#91;col&#93; / ROW_COUNT)) * TILE_HEIGHT;
				
						context.drawImage(image, sx, sy, TILE_WIDTH, TILE_HEIGHT, dx, dy, TILE_WIDTH, TILE_HEIGHT);
						}
						
					}
				}
	
				/*context.drawImage(image, 0, 0);*/
			}

			function checkResult(){
				var row, col;
				for (row = 0; row < ROW_COUNT; row++){
					for (col = 0; col < COL_COUNT; col++){
						if (row === ROW_COUNT -1 && col === COL_COUNT -1){
							return true;
						}
						if (tiles&#91;row&#93;&#91;col&#93; !== row * COL_COUNT + col){
							return false;
						}
				}
			}

			}
			function moveBlank(count){
				var blankRow, blankCol;
				var targetPosition;
				var targetRow, targetCol;

				blankRow = ROW_COUNT -1;
				blankCol = COL_COUNT -1;

				while(true){
				targetPosition = Math.floor(Math.random() * UDLR.length);
				targetRow = blankRow + UDLR&#91;targetPosition&#93;&#91;1&#93;;
				targetCol = blankCol + UDLR&#91;targetPosition&#93;&#91;0&#93;;
				if(targetRow < 0 || targetRow >= ROW_COUNT){
					continue;
				}
				if(targetCol < 0 || targetCol >= COL_COUNT){
					continue;
				}
				tiles[blankRow][blankCol] = tiles[targetRow][targetCol];
				tiles[targetRow][targetCol] = -1;
				blankRow = targetRow;
				blankCol = targetCol;
				if(!--count){
					break;
				}
				} 
			}

			if (!canvas.getContext){
				alert('canvas not supported ...');
				return
			}
			context = canvas.getContext('2d');

			image = document.createElement('img');
			image.src = IMAGE_URL;
			image.addEventListener('load', function(){
				initTiles();
				moveBlank(moveCount);
				drawPuzzle();
			});

			canvas.addEventListener('click', function(e){
				var x, y;
				var rect;
				var row, col;
				var i;
				var targetRow, targetCol;
				rect = e.target.getBoundingClientRect();
				x = e.clientX - rect.left;
				y = e.clientY - rect.top;
				row = Math.floor(y / TILE_HEIGHT);
				col = Math.floor(x / TILE_WIDTH);
				if (tiles[row][col] === -1){
					return;
				}
				 for (i = 0; i < UDLR.length; i++) {
       			 targetRow = row + UDLR&#91;i&#93;&#91;1&#93;;
      			  targetCol = col + UDLR&#91;i&#93;&#91;0&#93;;
      			  if (targetRow < 0 || targetRow >= ROW_COUNT) {
      		  	 	 continue;
     			   }
     			  if (targetCol < 0 || targetCol >= COL_COUNT) {
     		     	 continue;
    			    }
					if (tiles[targetRow][targetCol] === -1) {
         			 tiles[targetRow][targetCol] = tiles[row][col];
         			 tiles[row][col] = -1;
       				   drawPuzzle();
       				   if (checkResult()){
       				   	alert('Game Clear!')
       				   }
						break;
					}
				}
			});
		})();
	</script>
</body>
</html>

神経衰弱

レベルに合わせて、配列を作成し、CSSでflipし、judgeして、正しければ次のレベルに移行します。

-reference
Emmet Toggle Comment: ctr + shift + /
CSS3 backface-visibility Property: The backface-visibility property defines whether or not an element should be visible when not facing the screen.This property is useful when an element is rotated, and you do not want to see its backside.
first-child:is used to select the specified selector, only if it is the first child of its parent.
.textContent:ノードとその子孫のテキスト内容を取得、または設定
.children:Get the children of each element in the set of matched elements, optionally filtered by a selector.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Get same number</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			margin: 0;
			background: #00d4f0;
			text-align: center;
			font-family: Arial, sans-serif;
			color: #fff;
		}
		#stage{
			margin: 80px auto 30px;
			width: 600px;
		}
		.card-container {
			margin: 0 10px 20px 0;
			cursor: pointer;
			display: inline-block;
			width: 50px;
			height: 60px;
			font-size: 24px;
			font-weight: bold;
			line-height: 60px;
			position: relative;
			perspective: 100px;
		}
		.card {
			width: 100%;
			height: 100%;
			position: absolute;
			transform-style: preserve-3d;
			transition: transform .8s;
		}
		.card.open {
			transform: rotateY(180deg);
		}
		.card-back, .card-front {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 5px;
			position: absolute;
			backface-visibility: hidden;
		}
		.card-back{
			background: #03a9f4;
		}
		.card-front{
			background: #fff;
			color: #333;
			transform: rotateY(180deg);
		}
		#btn {
			margin: 0 auto;
			width: 200px;
			padding: 10px;
			background: #0af;
			border-radius: 5px;
			cursor: pointer;
			opacity: 0;
			transition: opacity .5s;
		}
		#btn.visible{
			opacity: 1;
		}
	</style>
</head>
<body>
	<div id="stage">
	</div>
	<div id="btn">Next Stage?</div>
	<script>
	(function(){
		var cards = [],
		    level = 2,
		    flipCount = 0,
		    correctCount = 0,
		    firstCard = null,
		    secondCard = null;
		    btn,
		    stage;

		  btn = document.getElementById('btn');
		  stage = document.getElementById('stage');

		init();

		function init(){

			correctCount = 0;
			btn.className = '';

			while(stage.firstChild) stage.removeChild(stage.firstChild);

			for (var i = 1; i <= level; i++){
				cards&#91;cards.length&#93; = createCard(i);
				cards&#91;cards.length&#93; = createCard(i);
			}

			while (cards.length){
				var pos = Math.floor(Math.random() * cards.length);
				stage.appendChild(cards.splice(pos, 1)&#91;0&#93;);
			}
		}

		function createCard(num){
			var inner,
				card,
				container;

			inner = '<div class="card-back">?</div><div class="card-front">*</div>';

			card = document.createElement('div');
			card.className = 'card';
			card.innerHTML = inner.replace('*', num);

			container = document.createElement('div');
			container.className = 'card-container';
			container.appendChild(card);
			card.addEventListener('click', function(){
				flipCard(this);
			});

			return container;
		}

		function flipCard(card){
			if (firstCard !== null && secondCard !== null){
				return;
			}

			if (card.className.indexOf('open') === -1){
				card.className = 'card open';
			} else {
				return;
			}
			flipCount++;
			if (flipCount % 2 === 1) {
				firstCard = card;
			} else {
				secondCard = card;
				setTimeout(function(){
					judge();
				}, 900);
			}
		}

		function judge(){
			if (firstCard.children[1].textContent === secondCard.children[1].textContent){
				correctCount++;
				//console.log(correctCount);
				if (correctCount === level){
					btn.className = 'visible';
				}
			} else {
				firstCard.className = 'card';
				secondCard.className = 'card';
			}
			firstCard = null;
			secondCard = null;
		}

		btn.addEventListener('click', function(){
			level++;
			init();
		});
	})();
	</script>
</body>
</html>

数押しゲーム

addEventListener(‘click’, function(){}で、クリックごとに、btn inactiveのクラスを追加していってます。数字の初期値はランダム、時間はsetTimeoutで、現在時間からスタート時間を引いています。

reference
appendChild(): method appends a node as the last child of a node.
Tip: If you want create a new paragraph, with text, remember to create the text as a Text node which you append to the paragraph, then append the paragraph to the document.
Document.createElement() :method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn’t recognized. In a XUL document, it creates the specified XUL element. In other documents, it creates an element with a null namespace URI.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Run Time for Button touch</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background: #e0e0e0;
			font-family: Arial, sans-serif;
			text-align: center;
			color: #0088cc;
			font-size: 16px;
		}
		#scoreArea{
			text-shadow: 0 1px 0 rgba(255, 255,255, 0.5);
			margin: 30px auto;
		}
		#scoreText{
			font-weight: bold;
			font-size: 24px;
		}
		#startButton{
			margin: 30px auto;
			width: 180px;
			border-radius: 5px;
			box-shadow: 0 4px 0 #e91b0c;
			background: #f44336;
			color: #fff;
			cursor: pointer;
			padding: 7px;
		}
		#startButton:hover{
			opacity: 0.8;
		}
		#startButton.pushed{
			margin-top: 32px;
			box-shadow: 0 2px 0 #e91b0c;
		}
		.btn {
			position: relative;
			display: inline-block;
			width: 30px;
			padding: 7px;
			border-radius: 5px;
			box-shadow: 0 4px 0 #0088cc;
			color: #fff;
			background: #00aaff;
			cursor: pointer;
			margin-bottom: 10px;
		}
		.btn.hidden:after{
			content: '?';
			position: absolute;
			top: 0;
			left: 0;
			width: 30px;
			padding: 7px;
			border-radius: 5px;
			background: #00aaff;
		}
		.btn + .btn {
			margin-left: 10px;
		}
		.btn.inactive {
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<div id="scoreArea">Your Score: <span id="scoreText">0.0</span></div>
	<div id="board">
		<!--<div class="btn">0</div>
		<div class="btn">1</div><br>
		<div class="btn">2</div>
		<div class="btn">3</div> -->
	</div>
	<div id="startButton" class="pushed">START</div>
	<script>
	(function(){
		'use strict';
		var size = 3;
		var currentNum = 0;
		var startTime;
		var timerId;

		var board = document.getElementById('board');
		var scoreText = document.getElementById('scoreText');
		var startButton = document.getElementById('startButton');

		initBoard();

		startButton.addEventListener('click', function(){
			initBoard();
			var btns = document.getElementsByClassName('btn');
			for (var i = 0; i < btns.length; i++){
				btns&#91;i&#93;.className = 'btn';
			}
			currentNum = 0;
			startTime = Date.now();
			if(timerId !== null) clearTimeout(timerId);
			runTimer();
		});

		startButton.addEventListener('mousedown', function(){
			this.className = 'pushed';
		});

		startButton.addEventListener('mouseup', function(){
			this.className = '';
		});


		function runTimer(){
			scoreText.innerHTML = ((Date.now() - startTime) / 1000).toFixed(2);
			timerId = setTimeout(function(){
				runTimer();
			}, 10);
		}

			function createButton(num){
				var button;
				button = document.createElement('div');
				button.className = 'btn hidden';
				button.innerHTML = num;
				button.addEventListener('click', function(){
					if ((this.innerHTML - 0) === currentNum){
						this.className = 'btn inactive';
						currentNum++;
					}
					if (currentNum == size * size){
						clearTimeout(timerId);
					}
				});
				return button;
			}

			function initBoard(){
			var buttons = &#91;&#93;;

			while (board.firstChild){
				board.removeChild(board.firstChild);
			}

			for (var i = 0; i < size * size; i ++){
				buttons.push(createButton(i));
			}
			while (buttons.length){
				var button = buttons.splice(Math.floor(Math.random() * buttons.length), 1);
				board.appendChild(button&#91;0&#93;);
				if (buttons.length % size === 0){
					board.appendChild(document.createElement('br'));
				}
			}
		}
	})();
	</script>
</body>
</html>

タイピングゲーム

fromCharCodeとkeyCodeで、タイピングのcharacterを取得し、予め用意された配列とマッチするか判定しています。マッチしていれば、位置文字ずつ”_”に文字を変換し、残りの文字をsubstring()で取得します。タイマーは、setTimeout()で1000ミリ秒ごとに減らしていき、0になったら、alert()を表示させます。

リフェレンス
fromCharCode() Method:converts Unicode values into characters.
Note: This is a static method of the String object, and the syntax is always String.fromCharCode().
substring():extracts the characters from a string, between two specified indices, and returns the new sub string.
setTimeout():calls a function or evaluates an expression after a specified number of milliseconds.
Tip: 1000 ms = 1 second.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>タイピングゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
		padding-top: 40;
		font-family: 'Courier New', sans-serif;
		text-align: center;
	}
	#target {
		font-size: 48px;
		letter-spacing: 3px;
	}
	.info {
		color: #ccc;
	}
	</style>
</head>
<body>
	<p id="target"></p>
	<p class="info">
		Letters count: <span id="score"></span>
		Miss count: <span id="miss"></span>
		Remaining Time: <span id="timer"></span>
	</p>
	<script>
	(function(){
		'use strict';

		var words = [
		'java',
		'python',
		'ruby',
		'go',
		'c',
		'javascript',
		'cobol',
		'php',
		];
		var currentWord;
		var currentLocation;
		var score;
		var miss;
		var timer;
		var target = document.getElementById('target');
		var scoreLabel = document.getElementById('score');
		var missLabel = document.getElementById('miss');
		var timerLabel = document.getElementById('timer');
		var isStarted;
		var timerId;

		function init(){
			currentWord = 'click to start';
			currentLocation = 0;
			score = 0;
			miss = 0;
			timer = 7;
			target.innerHTML = currentWord;
			scoreLabel.innerHTML = score;
			missLabel.innerHTML = miss;
			timerLabel.innerHTML = timer;
			isStarted = false;
		}
		
		init();

		function updateTimer(){
			timerId = setTimeout(function(){
				timer--;
				timerLabel.innerHTML = timer;
				if (timer <= 0){
					// alert('game over');
					var accuracy = (score + miss) === 0 ? '0.00' : (score / (score + miss) * 100).toFixed(2);
					alert(score + ' letters, ' + miss + ' miss!' +  accuracy + ' % accuracy');
					clearTimeout(TimerId);
					init();
					return;
				}
				updateTimer();
			}, 1000);
		}

		function setTarget(){
			currentWord = words&#91;Math.floor(Math.random()* words.length)&#93;;
			target.innerHTML = currentWord;
			currentLocation = 0;
		}

		window.addEventListener('click', function() {
			if (!isStarted){
				isStarted = true;
				setTarget();
				updateTimer();
			}
			
		});

		window.addEventListener('keyup', function(e) {
			if (!isStarted){
				return;
			}
			if (String.fromCharCode(e.keyCode) ===
				currentWord&#91;currentLocation&#93;.toUpperCase()){
				currentLocation++;
				var placeholder = '';
				for (var i = 0; i < currentLocation; i++){
					placeholder += '_';
				}
				target.innerHTML = placeholder + currentWord.substring(currentLocation);
				score++;
				scoreLabel.innerHTML = score;
				if (currentLocation === currentWord.length){
					setTarget();
				}
			} else {
				miss++;
				missLabel.innerHTML = miss;
			}
		});
	})();
	</script>
</body>
</html>

テーブルのソート

ソート・並び替えは、一旦、表示を全て消して、配列の中身を並び替えて再表示しています。ソートの関数はarr.sort(function(a, b){});を使います。
並び替え関数

function compare(a, b) {
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

リフェレンス:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>テーブルのソート機能</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<style>
	</style>
</head>
<body>
	<table>
	<thead>
		<tr>
			<th data-type="string">Name</th>
			<th data-type="string">Team</th>
			<th data-type="number">Score</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>murakami</td>
			<td>orange</td>
			<td class="score">35</td>
		</tr>
		<tr>
			<td>Kuriyama</td>
			<td>orange</td>
			<td class="score">5</td>
		</tr>
		<tr>
			<td>murata</td>
			<td>Yellow</td>
			<td class="score">77</td>
		</tr>
		<tr>
			<td>sakurai</td>
			<td>green</td>
			<td class="score">68</td>
		</tr>
		<tr>
			<td>midokura</td>
			<td>yellow</td>
			<td class="score">48</td>
		</tr>
		<tr>
			<td>kimoto</td>
			<td>green</td>
			<td class="score">97</td>
		</tr>
	</tbody>
	</table>
	<div>
	</div>
	<script src="js/main.js">
	</script>
</body>
</html>

js.main.js

(function(){
	'use strict';

	 var ths = document.getElementsByTagName('th');
	 var sortOrder = 1;

	 function rebuildTobody(rows){
	 		var tbody = document.querySelector('tbody');

	 		while(tbody.firstChild){
	 			tbody.removeChild(tbody.firstChild);
	 		}
	 		var i;
	 		for(i = 0; i < rows.length; i++){
	 			tbody.appendChild(rows[i]);
	 		}
	 	}

	 	function updateClassName(th){
			var k;
	 		for(k = 0; k < ths.length; k++){
	 		ths[k].className = '';
	 		}
	 		th.className = sortOrder === 1 ? 'asc' : 'desc';
	 	}

	 	function compare(a, b, col, type){
	 			var _a = a.children[col].textContent;
	 			var _b = b.children[col].textContent;
	 			if (type === "number"){
	 			_a = _a * 1;
	 			_b = _b * 1;
	 			}
	 			else if (type === "string") {
	 			_a = _a.toLowerCase();
	 			_b = _b.toLowerCase();
	 			}
	 			if (_a < _b){
	 				return -1;
	 			}
	 			if (_a > _b) {
	 				return 1;
	 			}
	 			return 0;
	 	}

	 	function sortRows(th){
	 		var rows = Array.prototype.slice.call(document.querySelectorAll('tbody > tr'));
	 		var col = th.cellIndex;
	 		var type = th.dataset.type;

	 		rows.sort(function(a, b){
	 			return compare(a, b, col, type) * sortOrder;
	 		});
	 		return rows;
	 	}

	 	function setup(){
	 		var i;
	 		for (i = 0; i < ths.length; i++){
	 		ths[i].addEventListener('click', function(){
	 		var rows;
	 		rows = sortRows(this);
	 		rebuildTobody(rows);	 		
	 		updateClassName(this);
	 		sortOrder *= -1;
	 	});
	  }
	}
	 	setup();
})();

css/styles.css

body {
	font-size: 16px;
	font-family: Verdana, sans-serif;
}
table {
	width: 540px;
	margin: 20px auto;
	border-collapse: collapse;
}
th, td {
	width: 180px;
	box-sizing: border-box;
	border: 1px solid #e9eae8;
	padding: 8px 20px;
}
tbody tr:nth-child(odd){
	background: #f8f8f8;
}
.score {
	text-align:right;
}
th {
	cursor: pointer;
}

th:after {
	content: '\f0dc';
	font-family: FontAwesome;
	font-size: 12px;
	color: #ccc;
	float: right;
	padding-top: 4px;
	font-weight: normal;
}

th.asc:after {
	content: '\f0de';
	font-family: FontAwesome;
	color: #000;
}
th.desc:after {
	content: '\f0dd';
	font-family: FontAwesome;
	color: #000;
}

単語帳

表と裏をdocument.getElementByIdで、divタグのidから呼び出しています。CSS3でカードflipはtransform: rotateY(180deg);と表現します。

リフェレンス
KeyCode:The KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key.

keyup:Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

コード

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>単語帳</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
		margin: 0;
		background: #e0e0e0;
		text-align: center;
		font-family: Verdana, sans-serif;
		color: #fff;
	}
	#btn {
		width: 200px;
		margin: 0 auto;
		padding: 7px;
		border-radius: 5px;
		background: #00aaff;
		box-shadow: 0 4px 0 #0088cc;
		cursor: pointer;
	}
	#btn:hover{
		opacity: 0.8;
	}
	#card {
		margin: 60px auto 20px;
		width: 400px;
		height: 100px;
		cursor: pointer;
		font-size: 38px;
		line-height: 100px;
		perspective: 100px;
		transform-style: preserve-3d;
		transition: transform .8s;
	}
	#card-front, #card-back {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 5px;
		position: absolute;
		backface-visibility: hidden;
	}
	#card-front {
		background: #fff;
		color: #333;
	}
	#card-back {
		background: #00aaff;
		transform: rotateY(180deg);
	}
	.open {
		transform: rotateY(180deg);
	}
	</style>
</head>
<body>
	<div id="card">
		<div id="card-front"></div>
		<div id="card-back"></div>
	</div>
	<div id="btn">NEXT</div>
	<script>
	(function(){
		'use strict'

		var words = [
			{'en': 'read', 'ja':'読む'},
			{'en': 'write', 'ja':'書く'},
			{'en': 'eat', 'ja':'食べる'},
			{'en': 'run', 'ja':'走る'},
			{'en': 'walk', 'ja':'歩く'}
		];

		var card = document.getElementById('card');
		var cardFront = document.getElementById('card-front');
		var cardBack = document.getElementById('card-back');
		var btn = document.getElementById('btn');

		card.addEventListener('click', function(){
			flip();
		});
		btn.addEventListener('click', function(){
			next();
		});

		function next(){
			if (card.className === 'open') {
				card.addEventListener('transitioned', setCard);
				flip();
			} else {
				setCard();
			}

		}

		function setCard(){
			var num = Math.floor(Math.random() * words.length);
			cardFront.innerHTML = words[num]['en'];
			cardBack.innerHTML = words[num]['ja'];
			card.removeEventListener('transitioned', setCard);
		}

		setCard();

		window.addEventListener('keyup', function(e){
			if (e.keyCode === 70){
				flip();
			} else if (e.keyCode === 78){
				next();
			}
		});

		function flip(){
			card.className = card.className === '' ? 'open' : '';
		}
	
	})();
	</script>
</body>
</html>

スロットマシーン

classNameにactive、inactiveをつけて、opacityを変えます。また、addEventListenerで、クリックされた際に、Math.floor(Math.random() * (n + 1))で、ランダムな数値を取得し、配列に返し、それぞれの数字が一致するか、チェックして、opacityを変えます。実際のスロットは、もう少し複雑な設定方法だと思いますが、原理としては近いものがあるのではないでしょうか。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Slot Machine</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		body {
			background: #e0e0e0;
			font-family: Arial, sans-serif;
			text-align: center;
			font-size: 16px;
			margin-top: 30px;
		}
		.panel {
			display: inline-block;
			width: 60px;
			padding: 7px;
			border-radius: 5px;
			margin-bottom: 15px;
			color: #00aaff;
			font-weight: bold;
			font-size: 32px;
			line-height: 64px;
			background: #fff;
		}
		.panel + .panel {
			margin-left: 10px;
		}
		.panel.unmatched {
			opacity: 0.5;
		}
		.btn {
			display: inline-block;
			width: 60px;
			padding: 7px;
			border-radius: 5px;
			margin-bottom: 15px;
			color: #fff;
			box-shadow: 0 4px 0 #0088cc;
			background: #00aaff;
			cursor: pointer;
		}
		.btn + .btn {
			margin-left: 10px;
		}
		.btn.inactive{
			opacity: 0.5;
		}
		#spinButton {
			margin: 0 auto;
			width: 240px;
			padding: 7px;
			border-radius: 5px;
			color: #fff;
			box-shadow: 0 4px 0 #e91b0c;
			background: #f44336;
			cursor: pointer;
		}
		#spin.inactive{
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<div>
	  <div class="panel" id="panel0">?</div>
	  <div class="panel" id="panel1">?</div>
	  <div class="panel" id="panel2">?</div>
	</div>
	<div>
		<div class="btn inactive" id="btn0">STOP</div>
		<div class="btn inactive" id="btn1">STOP</div>
		<div class="btn inactive" id="btn2">STOP</div>
	</div>
	<div id="spinButton">SPIN</div>
	<script>
		(function(){
			'use strict';

			var panels = ['1', '3', '5', '7'];
			var timers = [];
			var results = [];
			var stopCount = 0;
			var isPlaying = false;

			var panel0 = document.getElementById('panel0');
			var panel1 = document.getElementById('panel1');
			var panel2 = document.getElementById('panel2');
			var btn0 = document.getElementById('btn0');
			var btn1 = document.getElementById('btn1');
			var btn2 = document.getElementById('btn2');
			var spinButton = document.getElementById('spinButton');

			spinButton.addEventListener('click', function(){
				if (isPlaying) return;
				isPlaying = true;
				this.className = 'inactive';
				btn0.className = 'btn';
				btn1.className = 'btn';
				btn2.className = 'btn';
				panel0.className = 'panel';
				panel1.className = 'panel';
				panel2.className = 'panel';

				runSlot(0, panel0);
				runSlot(1, panel1);
				runSlot(2, panel2);
			});

			function runSlot(n, panel){
				panel.innerHTML = panels[Math.floor(Math.random() * panels.length)];
				timers[n] = setTimeout(function(){
					runSlot(n, panel)
				}, 50);
			}

			btn0.addEventListener('click', function(){
				stopSlot(0, panel0, this);
			});
			btn1.addEventListener('click', function(){
				stopSlot(1, panel1, this);
			});
			btn2.addEventListener('click', function(){
				stopSlot(2, panel2, this);
			});

			function stopSlot(n, panel, btn){
				if (!isPlaying || results[n] !== undefined) return;
				btn.className = 'btn inactive';
				clearTimeout(timers[n]);
				results[n] = panel.innerHTML;
				stopCount++;

				if (stopCount === 3){
					checkResults();

					isPlaying = false;
					timers = [];
					results = [];
					stopCount = 0;
					spintButton.ClassName = '';
				}
			}

			function checkResults(){
				if (results[0] !== results[1] && results[0] !== results[2]) {
						panel0.className = 'panel unmatched';
			}
				if (results[1] !== results[0] && results[1] !== results[2]) {
						panel1.className = 'panel unmatched';
			}
				if (results[2] !== results[0] && results[2] !== results[1]) {
						panel2.className = 'panel unmatched';
			}
		}
		})();
	</script>
</body>
</html>

font-awesomeのハンバーガー

document.getElementByIdで、アイコンがクリックされた際に、document.body.className = ‘menu-open’とdocument.body.className = ”を返します。なお、font-awesomeはCDNで取得します。

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Top Menu Tab</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: Verdana, sans-serif;
			background: #eee;
			color: #333;
			padding: 8px;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			overflow-x: hidden;
		}
		#cover {
			background: #000;
			opacity: 0.6;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left:0;
			z-index:1;
			display: none;

		}
		#menu {
			z-index:2;
			position: absolute;
			top: 0;
			right: -180px;
			color: #fff;
			background: #4c81e9;
			padding: 8px;
			box-sizing: border-box;
			width: 180px;
			min-height: 100%;
			transition: .4s;
		}

		#show, #hide {
			float: right;
			cursor: pointer;
		}
		body.menu-open {
			overflow-y: hidden;

		}
		body.menu-open #cover {
			display: block;

		}
		body.menu-open #menu {
			right: 0;
			
		}
	</style>
</head>
<body>

	<i class="fa fa-bars" id="show"></i>
		<h1>Hello</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
	<div id="cover"></div>

	<div id="menu">
		<i class="fa fa-times" id="hide"></i>
		<ul>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
		</ul>
	</div>
	<script>
	(function(){
		'use strict';

		var show = document.getElementById('show');
		var hide = document.getElementById('hide');

		show.addEventListener('click', function(){
			document.body.className = 'menu-open'
		});

		hide.addEventListener('click', function(){
			document.body.className = ''
		});
	})();
	</script>
</body>
</html>

ハンバーガーメニュー

addEventListener:The EventTarget.addEventListener() method registers the specified listener on the EventTarget it’s called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Top Menu Tab</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: Verdana, sans-serif;
		}
		#menu {
			position: absolute;
			top: 0;
			right: 0;
			color: #fff;
			background: #4c81e9;
			box-sizing: border-box;
			width: 180px;
			min-height: 100%;
		}
		#main {
			z-index: 1;
			background: #eee;
			position: absolute;
			top: 0;
			left: 0;
			color: #333;
			padding: 8px;
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			overflow: auto;
			transition: .4s;
		}
		#main.menu-open {
			left: -180px;
		}
		#show {
			float: right;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
			<li>Menu</li>
		</ul>
	</div>
	<div id="main">
		<i class="fa fa-bars" id="show"></i>
		<h1>Hello</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet eius repudiandae aut, dolorum amet beatae distinctio quam, nemo minus, velit quod assumenda. Magnam distinctio fugiat in expedita officiis vitae.</p>
	</div>
	<script>
	(function(){
		'use strict';

		var show = document.getElementById('show');
		var main = document.getElementById('main');

		show.addEventListener('click', function(){
			if (main.className === 'menu-open'){
				main.className = '';
			} else {
				main.className = 'menu-open';
			}
		});
	})();
	</script>
</body>
</html>

クリッカブルタブメニュー

%e7%84%a1%e9%a1%8c

event.preventDefault()
If this method is called, the default action of the event will not be triggered.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Top Menu Tab</title>
	<style>
		body {
			padding:0;
			margin:0;
			font-family: Verdana, sans-serif;
		}
		.container {
			padding: 0;
			margin: 30px auto;
			width: 500px;
			background: #dce0e0;
		}
		ul.menu {
			list-style: none;
			padding: 0;
			margin: 0;
			font-size: 0;
		}
		ul.menu li {
			display: inline-block;
		}
		ul.menu li a {
			display: inline-block;
			font-size: 14px;
			width: 80px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			text-decoration: none;
			padding: 7px;
			color: #333;
		}
		ul.menu li a.active {
			background: #353d3e;
			color: #fff;
		}
		ul.menu li a:not(.active):hover {
			opacity: 0.5;
			transition: .8s;
		}
		.content {
			font-size: 14px;
			padding: 7px 10px;
			line-height: 1.4;
			background: #353d3e;
			color: #fff;
			min-height: 150px;
			display: none;
		}
		.content.active {
			display: block;
		}
	</style>
</head>
<body>
<div class="container">
	<ul class="menu">
		<li><a href="#" data-id="about" class="active  menu_item">About</a></li>
		<li><a href="#" data-id="service" class="menu_item">Service</a></li>
		<li><a href="#" data-id="contact" class="menu_item">Contact</a></li>
	</ul>
	<div class="content active" id="about">
	Lorem1 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
	<div class="content" id="service">
	Lorem2 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
	<div class="content" id="contact">
	Lorem3 ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae eos ab, esse cupiditate doloribus cumque tenetur atque aspernatur, maxime ipsam nemo ipsum quis placeat. Facere ipsam debitis possimus nostrum!
	</div>
<p></p>
<script>
	(function(){
		'use strict'

		var menuItems = document.getElementsByClassName('menu_item');
		var contents = document.getElementsByClassName('content');

		var i;

		for (i=0; i < menuItems.length; i++){
			menuItems&#91;i&#93;.addEventListener('click', function(e){
				e.preventDefault();

				var i;
				for (i=0; i < menuItems.length; i++){
					menuItems&#91;i&#93;.className = 'menu_item';
				}
				this.className = 'menu_item active';

				var i;
				for (i=0; i < contents.length; i++){
					contents&#91;i&#93;.className = 'content';
				}
				document.getElementById(this.dataset.id).className = 'content active';

			});
		}

	})();
</script>
</body>
</html>