编辑器  Sublime Text 3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">

//灯的宽度
const LIGHTWIDTH = 40;
//灯的高度
const LIGHTHEIGHT = 40;
//行数
const ROWCOUNT = 10;
//列数
const COLCOUNT = 10;
//灯打开的颜色
const ONCOLOR = 'yellow';
//灯关闭的颜色
const OFFCOLOR = 'black';
//游戏关卡
var gameLevel = 1;

//创建容器标签
var wrapper = document.createElement('div');
wrapper.style.width =LIGHTWIDTH * COLCOUNT +'px';
wrapper.style.height = LIGHTHEIGHT * ROWCOUNT +'px';
//把容器标签添加到 body 标签里
document.body.appendChild(wrapper);

//循环创建灯
for (let i = 1; i <= COLCOUNT * ROWCOUNT;i++){
let light = document.createElement('div');
light.id = i;
light.style.width = LIGHTWIDTH + 'px';
light.style.height = LIGHTHEIGHT + 'px';
light.style.backgroundColor = OFFCOLOR;
light.style.float = 'left';
light.style.border = '1px solid gray';
light.style.boxSizing = 'border-box';
light.onclick = thisClick; //调用函数的时候会通过 this 传递标签

wrapper.appendChild(light);
}

//代码绑定点击事件的处理函数
function thisClick(){
lightClick(this);
}
var lightOnCount = 0;
//灯的点击函数
function lightClick(light){ //light 被点击的标签
//把当前点击的灯进行开关
turnlight(light);
//当前标签所在行数
var row = Math.ceil(parseInt(light.id) / 10);
//开关上下左右的灯

//左边
//通过当前被点击的标签的 id 找到坐标的标签的 id
var leftId = parseInt(light.id) - 1;    //parseInt 把 lightid 值装换成整数后再装换
var leftRow = Math.ceil(parseInt(leftId) / 10);
if (row == leftRow){//如果当前标签的行数等于左边标签的行数，左边标签是有效的标签
//通过 id 找到左边的标签
var leftLight = document.getElementById(leftId);//document 表示整个html中的文档
//调用开关灯函数改变标签的背景颜色
turnlight(leftLight);
}

//右边
var rightId = parseInt(light.id) +1;
var rightRow = Math.ceil(parseInt(rightId) / 10);
if(row == rightRow){
var rightlight = document.getElementById(rightId);
turnlight(rightlight);
}

//上边
var upId = parseInt(light.id) -10;
if(upId > 0){
var uplight = document.getElementById(upId);
turnlight(uplight);
}

//下边
var downId = parseInt(light.id) +10;
if(downId <= 100){
var townlight = document.getElementById(downId);
turnlight(townlight);
}
if(lightOnCount ==0){
alert('u win');
gameLevel++;
getLevel();
}

}

//开关灯函数
function turnlight(light){
//如果标签的背景颜色是 yellow
if (light.style.backgroundColor == 'yellow'){
//把标签的背景色改成 black
light.style.backgroundColor = 'black';
lightOnCount--;
}else{
//否则把标签的背景颜色改成 yellow
light.style.backgroundColor = 'yellow';
lightOnCount++;
}
}
function getLevel(){

//生成游戏关卡
for (let i = 0; i < gameLevel; i++){
//产生一个随机的 id
//Math.floor( Math.random() * 100 + 1;
var randomId = Math.floor( Math.random() *COLCOUNT *ROWCOUNT) + 1;
var randomlight = document.getElementById(randomId);
lightClick(randomlight);
// console.log(randomId);
}

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

heml 分为 head + body
head元信息（关于信息的信息） body内容

JavaScript 重要文件 dom    bom
dom document object modale => html document
bom brower object modale => 浏览器 window

函数定义：关键字 函数名 参数列表 函数体

注：不是很全 能力有限 请谅解！

如何用js做关灯游戏的更多相关文章

  1. 用JS做关灯游戏（初级）

    这是一个很有意思的游戏,可以试着玩下. <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. 带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验

    今日内容 使用JQuery完成页面定时弹出广告 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果 使用JQuery完成省市联动效果 使用JQuery完成下列列表左右选择 使用J ...

  3. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  4. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

  5. 用纯JS做俄罗斯方块 - 简要思路介绍（1）

    大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...

  6. JS开发HTML5游戏《神奇的六边形》（二）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  7. JS开发HTML5游戏《神奇的六边形》（四）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  8. JS开发HTML5游戏《神奇的六边形》（三）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  9. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

随机推荐

  1. 计算2个GPS坐标的距离

    本文转自 http://blog.csdn.net/ztp800201/article/details/44676867 Java 计算两个GPS坐标点之间的距离 1. Lat1 Lung1 表示A点 ...

  2. python根据搜索词下载百度图片

    # coding=utf-8 """根据搜索词下载百度图片""" import re import urllib import os def ...

  3. 6、二叉树树（java实现）

    1.创建树的节点 public class Node { public Object data; //存储数据 public Node leftChild; //左子树指针 public Node r ...

  4. 前端黑魔法：webworker动态化，无需JS文件创建worker

    前言 前几天,我和一位知乎网友讨论这个问题的时候,觉得这非常有意思,所以写了这篇文章作为记录 本文的思路和项目代码来源于知友 @simon3000,我加以修饰以更符合理解的需求.   本文所用代码已经 ...

  5. 前端 页面加载完成事件 - onload，五种写法

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  6. Day 10 用户的提权，用户组的创建删除

    1.如何为用户设定密码,又如何修改密码? 2.用户的创建流程? [扩展了解] 3.用户组如何管理? 4.普通用户无权限怎么办? 切换身份 or 提权? su 切换用户 sudo 提权   5.为用户添 ...

  7. cocos meta 文件git显示

    是如果提交meta文件后,并且大家是用git来做版本控制的话,CCC可能会在打开时自动修改meta(即使你是刚从最新版本拉下来的),这个问题的原因是git在windows和linux不同系统间换行符不 ...

  8. Spotlight性能监控工具的配置及使用

    这是我离线整理资料里的内容,大概是2012年时候开始使用此性能监控工具的,直到至今,接触到几个性能监控工具里,还是美国quest公司生产的Spotlight此产品相对比较牛! 我也不知道现在发展到能支 ...

  9. Spring 梳理 - 开启并配置 Spring MVC 的方法

    传统web.xm中配置两个上下文+两个context对应的xml+两个上下文bean分别手动配置 传统web.xm中配置两个上下文+两个context对应的xml+<mvc:annotation ...

  10. linux下mysql数据库操作命令

    1:启动服务 service mysqld start (5.0版本是mysqld) service mysql start (5.5.7版本是mysql) 2:停止服务 service mysqld ...