JS简单开发,点灯游戏

 时间:2024-10-14 19:18:18

1、首先我们先写Html代码,该代码很简单,就是一个空的div,其内容由后面的js来填充。

JS简单开发,点灯游戏

3、再看下我们的脚本代码,在页面加载完成时,我们调用create方法,来为div填充所需要的内容。

JS简单开发,点灯游戏

5、在create方法里,有用到row_html方法,该方法主要是生成每行的html,该方法的代码如图

JS简单开发,点灯游戏

7、还有一个关键的逻辑茧盯璜阝就是点击灯的逻辑,简单解析一下这里的逻辑:点击div时,我们通过该div的id,知道该div所在的行和列,根据这个行和列,找出这个div相邻的di即枢潋雳v,(通过行加1,行减1,列加1,列减1等),如果某个div有dark样式(灯灭),我们就去掉这个样式,加上light样式(亮灯),相反就是有light样式,就去掉之,加上dark样式。

JS简单开发,点灯游戏

9、运行页面,我们的点灯游戏就做好了。

JS简单开发,点灯游戏
  • 儿童益智七巧板 如何用七巧板拼一只猫(14)
  • 手机查看百度经验电脑版的方法
  • 莴笋萝卜丝炒蛋
  • 腌西兰花梗怎么做
  • 如何在豆丁网上上传文档
  • 热门搜索
    怒江旅游景点大全 云南旅游风景区 平山县旅游 云南省旅游学校 呼伦贝尔旅游线路 澳门旅游网 宁波旅游社 威海旅游景点介绍 女性旅游 太原旅游团