编辑器  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. 转载unity编辑器xml数据库插件

    unity编辑器xml数据库插件 注:9月9日更新,其中MyXML.cs中有一句代码写错,查找功能失误,文中已经修改! 注:9月1日更新说明:xml存储结构,因为在用xml之前不知道正规的xml数据结 ...

  2. (1)定义闭合图形抽象类ClosedFigure定义属性:1.形状;2.定义构造方法,给形状赋值;3.定义两个抽象方法:计算面积和计算周长;4.定义一个显示方法:显示图像形状,周长,面积;

    题目显示不全,完整题目描述: (1)定义闭合图形抽象类ClosedFigure定义属性:1.形状:2.定义构造方法,给形状赋值:3.定义两个抽象方法:计算面积和计算周长:4.定义一个显示方法:显示图像 ...

  3. 浅谈DanmakuView

      今天简单介绍一下开源的弹幕引擎---danmakuView   使用之前在build.gradle里面添加下面这一条(目前我使用的工具是AndroidStudio 3.1.2)   impleme ...

  4. hadoop高可用安装和原理详解

    本篇主要从hdfs的namenode和resourcemanager的高可用进行安装和原理的阐述. 一.HA安装 1.基本环境准备 1.1.1.centos7虚拟机安装,详情见VMware安装Cent ...

  5. Spring入门(十三)：Spring MVC常用注解讲解

    在使用Spring MVC开发Web应用程序时,控制器Controller的开发非常重要,虽然说视图(JSP或者是Thymeleaf)也很重要,因为它才是直接呈现给用户的,不过由于现在前端越来越重要, ...

  6. mysql隔离级别的测试

    mysql提供四种隔离级别,以下分别对四种隔离级别进行测试,更加直观清晰的了解.具体的隔离级别以及其他相关介绍见https://www.cnblogs.com/eric-fang/p/11052304 ...

  7. Mybatis源码解析，一步一步从浅入深（二）：按步骤解析源码

    在文章:Mybatis源码解析,一步一步从浅入深(一):创建准备工程,中我们为了解析mybatis源码创建了一个mybatis的简单工程(源码已上传github,链接在文章末尾),并实现了一个查询功能 ...

  8. Mysql高手系列 - 第14篇：详解事务

    这是Mysql系列第14篇. 环境:mysql5.7.25,cmd命令中进行演示. 开发过程中,会经常用到数据库事务,所以本章非常重要. 本篇内容 什么是事务,它有什么用? 事务的几个特性 事务常见操 ...

  9. Asteroids POJ - 3041 二分图最小点覆盖

       Asteroids POJ - 3041 Bessie wants to navigate her spaceship through a dangerous asteroid field in ...

  10. java ThreadLocal使用

    1.源码分析 此处以JDK1.8版本分析 1.1 set方法 /** * Sets the current thread's copy of this thread-local variable * ...