编辑器  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. Android程序员接下来的路该如何走？

    随着“5G”(第五代移动通信技术)商用进程越来越快,各个芯片和终端厂商们都已经开始布局准备,想必智能手机会是消费者最先能够接触到5G的重要终端,而和其相辅相生的移动互联网也势必会有新的发展. 但是和行 ...

  2. 在C#一个程序中，将一个窗体中的数据传送到另一个窗体

    使用多个窗体搭建的程序,需要用到窗体间的数据传递,常用两种方法: 方法一 1,进入子窗体的Designer.cs,将子窗体中的私有控件控件定义为public 2.在主窗口程序Form1.cs中将子窗口 ...

  3. 链表实现比较高效的删除倒数第k项

    最近写链表不太顺,无限的段错误.今天中午写的链表删除倒数第k项,用的带尾节点的双向链表,感觉已经把效率提到最高了,还是超时,改了很多方法都不行,最 终决定看博客,发现原来是审题错了,阳历给的是以-1结 ...

  4. TestNG（十四） 线程测试

    package com.course.testng.thread; import org.testng.annotations.Test; public class multiThread { @Te ...

  5. Python基础（十一）

    今日主要内容 补充:三目运算 f-strings 迭代器 生成器 补充:三目运算 三目运算(三元运算)结构: 表达式1 if 条件表达式 else 表达式2 c = a if a > b els ...

  6. CSS3动画animation认识，animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  7. Mybatis源码解析，一步一步从浅入深（一）：创建准备工程

    Spring SpringMVC Mybatis(简称ssm)是一个很流行的java web框架,而Mybatis作为ORM 持久层框架,因其灵活简单,深受青睐.而且现在的招聘职位中都要求应试者熟悉M ...

  8. java数据结构——哈希表（HashTable）

    哈希表提供了快速的插入操作和查找操作,每一个元素是一个key-value对,其基于数组来实现. 一.Java中HashMap与Hashtable的区别: HashMap可以接受null键值和值,而Ha ...

  9. Unity-遇到的问题小总结

    1. event trigger后面显示不了对应的方法 原因:我是直接把脚本拖拽进去的,这是没有实例化的,拖拽进去的应该是挂载这个脚本的GameObject就可以了 2.制作prefeb 将场景中的单 ...

  10. 数据结构之二叉树篇卷三 -- 二叉树非递归遍历（With Java)

    Nonrecursive Traversal of Binary Tree First I wanna talk about why we should <code>Stack</c ...