编辑器  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. rpm简单使用

    rpm描述:利用源码包编译成rpm时,会去指定安装好这个包的位置本质:解压,然后拷贝到相关的目录,然后执行脚本 vstpd-3.0.2-9.el7.x86_64.rpm 包名 版本 release 架 ...

  2. java8新特性使用

    一.接口的默认方法(允许接口有非抽象方法)Java 8允许我们给接口添加一个非抽象的方法实现,只需要使用 default关键字即可,这个特征又叫做扩展方法,示例如下: 代码如下: interface ...

  3. asp.net core 使用HttpClientFactory Polly实现熔断降级

    前言 在++NET Core2.1++后也是增加更新了很多东西,当然HttpClientFactory更新中的一部分.虽然说HttpClient这个实现了disposable,但使用它的时候用usin ...

  4. Bytectf-几道web总结

    1.EZcms 这道题思路挺明确,给了源码,考点就是md5哈希扩展+phar反序列化 首先这道题会在上传的文件目录下生成无效的.htaccess,从而导致无法执行上传的webshell,所以就需要想办 ...

  5. C++类拷贝控制 深拷贝 浅拷贝

    普通类型对象之间的复制很简单,而类对象与普通对象不同,类对象内部结构一般较为复杂,存在各种成员变量,这篇文章将帮你理清C++类对象的拷贝方式 拷贝构造函数,拷贝赋值运算符 首先我们简单了解下默认的拷贝 ...

  6. C. Anadi and Domino

    题目链接:http://codeforces.com/contest/1230/problem/C C. Anadi and Domino time limit per test: 2 seconds ...

  7. nested exception is java.lang.NoClassDefFoundError: javax/xml/soap/SOAPElement

    JavaSE 8 includes package java.xml.soap.JavaSE 9 moved package javax.xml.soap to the module java.xml ...

  8. MySQL中对字段内容为Null的处理

    使用如下指令,意思就是 select IFNULL(jxjy,0) AS jxjy from yourTable ifnull(a,b) 意思是指:如果字段a为null,就等于b if( sex = ...

  9. RxSwift 入门

    ReactiveX 是一个库,用于通过使用可观察序列来编写异步的.基于事件的程序. 它扩展了观察者模式以支持数据.事件序列,并添加了允许你以声明方式组合序列的操作符,同时抽象对低层线程.同步.线程安全 ...

  10. 挖穿各大SRC的短信轰炸

    今天给大家分享一个短信轰炸绕过的姿势,大疆.百度.腾讯等等src都有用此方法绕过的案例. 给大家看一下 这里就不给大家截图了,在src中提交的截图都没有打码,这里放出来不太方便. 这里就只举出大疆的例 ...