标签：添加 function ref rgb pad container ima 目录 padding
********************
作者： 张启卫
时间： 2017年5月26号
功能： 实现一个猜颜色的小游戏
********************
第一步：新建项目目录
colorGame.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>猜颜色游戏</title> <link rel="stylesheet" href="colorGame.css"> </head> <body> <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> </html>
ColorGame.css
body { background: #232323; } .square { width: 30%; background: purple; padding-bottom: 30%; float: left; margin: 1.6%; } #container { margin: 0 auto; max-width: 600px; }
实现效果图：
第二步：使用js代码变更颜色
colorGame.js
var colors = [ "rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)", "rgb(255, 255, 0)", "rgb(255, 255, 255)", "rgb(0, 0, 0)" ]; var squares = document.querySelectorAll(".square"); for(var i = 0; i < squares.length; i++) { squares[i].style.backgroundColor = colors[i]; }
在colorGame.html中添加标题与引用js
<script type="text/javascript" src="colorGame.js"></script>
第三步：修改标题
colorGame.html
<h1>猜<span id="colorDisplay">RGB</span>颜色游戏</h1>
colorGame.js
var pickedColor = colors[3]; var colorDisplay = document.getElementById("colorDisplay"); colorDisplay.textContent = pickedColor;
第四步：与pickedColor进行比较
for(var i = 0; i < squares.length; i++) { // 添加初始化颜色 squares[i].style.backgroundColor = colors[i]; // 添加点击事件 squares[i].addEventListener("click", function() { // 保存点击方块的颜色 var clickedColor = this.style.backgroundColor; // 与选择的颜色进行比较 if(clickedColor === pickedColor) { alert("正确"); } else { alert("Wrong!"); } });
第五步：当选中的颜色正确时，将所有方块都改成那个颜色
function changeColors(color) { // 循环遍历所有方块 // 将所有方块颜色修改成color for (var i = 0; i < squares.length; i++) { squares[i].style.backgroundColor = color; } }
第六步：将颜色变成随机变量
function pickColor() { // pick 一个随机数 // 返回随机生成的数 var random = Math.floor(Math.random() * colors.length); return colors[random]; }
第七步：将生成的color颜色变成随机
var colors = generatedRandomColors(6); // var colors = [ // "rgb(255, 0, 0)", // "rgb(0, 255, 0)", // "rgb(0, 0, 255)", // "rgb(255, 255, 0)", // "rgb(255, 255, 255)", // "rgb(0, 0, 0)" // ]; function generatedRandomColors(num) { // 创建一个空数组 // 在数组中添加颜色 // 返回那个数组 var arr = []; for(var i = 0; i < num; i++) { // 得到 random 颜色，添加到数组中 arr.push(ramdomColor()); } return arr; } function ramdomColor() { // pick a red from 0 - 255 // pick a green from 0 - 255 // pick a blue from 0 - 255 var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); // "rgb(r, g, b)" return "rgb(" + r + ", "+ g + ", "+ b +")"; }
每次刷新页面，页面颜色会变。
如果选中正确的颜色，所有颜色都会一样
第八步：添加重新开始的功能
标签：添加 function ref rgb pad container ima 目录 padding
原文地址：http://www.cnblogs.com/elewei/p/6907902.html
