cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>
	偉大なる 
	<br>
	<span id="colorDisplay">RGB</span> 
	<br>
  色当てゲーム
</h1>

<div id="stripe">
	<button id="reset"></button>
	<span id="message"></span>
	<button class="mode">Easy</button>
	<button class="mode selected">Hard</button>
</div>

	<div id="container">
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
            
          
!
            
              body {
	background-color: #232323;
	margin: 0;
}

.square {
	width: 30%;
	background: purple;
  padding-bottom: 30%;
  float: left;
  margin: 1.66%;
  transition: background .6s;
}

#container {
  margin: 20px auto;
  max-width: 600px;
}

h1 {
  text-align: center;
  font-weight: normal;
  color: white;
  background: #fcac40;
  margin: 0;
  text-transform: uppercase;
  padding: 20px 0;
}

#colorDisplay {
  font-size: 160%;
}

#message {
  display: inline-block;
  width: 20%;
}

#stripe {
  background: white;
  height: 30px;
  text-align: center;
  color: black;
}

.selected {
  color: white;
  background: #fcac40;
}

button {
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  text-transform: upppercase;
  height: 100%;
  font-weigth: 700;
  color: #000;
  letter-spacing: 1px;
  font-size: inherit;
  transition: all .3s;
}

button:hover {
  color: white;
  background: #fcac40;
}
            
          
!
            
              'use strict';
// 変数を定義
var numSquares = 6;
var colors = [];
var pickedColor;
var squares = document.querySelectorAll(".square");
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
var modeButtons = document.querySelectorAll(".mode");
	
// 初期化
init();

function init(){
	setupModeButtons();
	setupSquares();
	reset();
}

function setupModeButtons(){
	for(var i = 0; i < modeButtons.length; i++){
		modeButtons[i].addEventListener("click", function(){
      // modeの2つの要素に対してクラスを削除して、あとからthisで受け取ったものに対してselectedを付与している。
			modeButtons[0].classList.remove("selected");
			modeButtons[1].classList.remove("selected");
			this.classList.add("selected");
      //StringオブジェクトがEasyと完全一致だったら3、それ以外だったら6を格納する
			this.textContent === "Easy" ? numSquares = 3: numSquares = 6;
			reset();
		});
	}
}

function setupSquares(){
	for(var i = 0; i < squares.length; i++){
  // 何番目の資格をクリックしたか取得する
		squares[i].addEventListener("click", function(){
			// クリックした背景色を変数に格納
			var clickedColor = this.style.background;
			// クリックしたスクエアの背景色とピックした色を比較する
			if(clickedColor === pickedColor){
				messageDisplay.textContent = "正解!";
				resetButton.textContent = "もう一度挑戦"
				changeColors(clickedColor);
				h1.style.background = clickedColor;
			} else {
				this.style.background = "#232323";
				messageDisplay.textContent = "もう一枚!"
			}
		});
	}
}



function reset(){
	colors = generateRandomColors(numSquares);
	// 配列から新しい色を当てはめる
	pickedColor = pickColor();
	// 初期化のタイミングでスクエアにマッチした色をcolorDisplayの背景にしたい
	colorDisplay.textContent = pickedColor;
	resetButton.textContent = "違う色で挑戦"
	messageDisplay.textContent = "";
	// スクエアの色をすべて変える。
	for(var i = 0; i < squares.length; i++){
		if(colors[i]){
			squares[i].style.display = "block"
			squares[i].style.background = colors[i];
		} else {
			squares[i].style.display = "none";
		}
	}
	h1.style.background = "#fcac40";
}

resetButton.addEventListener("click", function(){
	reset();
})

function changeColors(color){
	for(var i = 0; i < squares.length; i++){
		squares[i].style.background = color;
	}
}

function pickColor(){
	var random = Math.floor(Math.random() * colors.length);
	return colors[random];
}

// randomColor関数を呼び出して配列にいれる
function generateRandomColors(num){
	var arr = []
	for(var i = 0; i < num; i++){
		arr.push(randomColor())
	}
	return arr;
}

// rgbの値を慣用表現で作成している
function randomColor(){
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + ", " + g + ", " + b + ")";
}


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console