<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关灯js版</title>
</head>
<body>
    <script>
        let rowCount = 10;
        let colCount = 10;
        let onColor = 'yellow';
        let offColor = 'black';
        let lightCount = 0;
        let level = 1;
        let lightWidth = 50;
        let lightHeight = lightWidth;
        let lightList = [];
        //游戏初始化
        function init(){
            let wap = document.createElement('div');
            
            wap.style.width = lightWidth * colCount + 'px';
            wap.style.height = lightWidth * rowCount +'px';
            wap.style.border = '1px solid gray';
            wap.style.margin = 'auto';
            wap.classList.add('clear');
            let clearStyle = document.createElement('style');
            clearStyle.innerText = '.clear:after {content :""; display: block; clear: both;}'
            for(i = 0 ; i < 100 ; i++){
                let light = document.createElement('div');
                light.style.width = lightWidth + 'px';
                light.style.height = lightHeight +'px';
                light.style.border ='1px solid lightgray';
                light.style.boxSizing  = 'border-box';
                light.style.backgroundColor = offColor;
                light.style.float = 'left';
                light.id = i;
                light.onclick = myClick;
                //push 从数组后面添加元素
                lightList.push(light);
                wap.appendChild(light);
            }
            document.body.appendChild(clearStyle);
            document.body.appendChild(wap);
        }
        //游戏逻辑
        
        function myClick(){
            findLights(this);
        }
        function findLights(light){
            turnLight(light);
            
            //获取灯的下标
            let index = parseInt(light.id);
            let row = parseInt(index / colCount);
            let upIndex = index - colCount;
            if(upIndex >= 0){
                turnLight(lightList[upIndex]);
            }
            let downIndex = index + colCount;
            if(downIndex < lightList.length){
                turnLight(lightList[downIndex]);
            }
            let leftIndex = index - 1;
            let leftRow = parseInt(leftIndex / colCount);
            if(leftIndex >= 0 && leftRow == row){
                turnLight(lightList[leftIndex]);
            }
            let rightIndex = index + 1;
            let rightRow = parseInt(rightIndex / colCount);
            if(rightRow == row){
                turnLight(lightList[rightIndex]);
            }
            //获胜判断
            if(lightCount == 0){
                alert('u win');
                run();
            }
        }
        function turnLight(light){
            if(light.style.backgroundColor == onColor){
                light.style.backgroundColor = offColor;
                lightCount--;
            }else{
                light.style.backgroundColor = onColor;
                lightCount++;
            }
        }
        function next(level){
            for(let i = 0 ; i < level; i++){
                let randomIndex = parseInt(Math.random() * lightList.length);
                findLights(lightList[randomIndex]); 
            }
        }
        function run(){
            next(level++);
        }
        init();
        run();
    </script>
</body>
</html>

7.29关灯游戏,用script实现的更多相关文章

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

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

  2. 如何用js做关灯游戏

    编辑器  Sublime Text 3 <!DOCTYPE html><html lang="en"><head> <meta chars ...

  3. 【Unity 3D】学习笔记29：游戏的例子——简单的小制作地图

    无论学习.只看不练是坏科学. 因此,要总结回想这怎么生产MMROPG小地图的游戏.于MMROPG游戏类,在游戏世界中行走时导致各地,通常在屏幕的右上角,将有一个区域,以显示当前的游戏场景微缩.在游戏世 ...

  4. IOS 作业项目(1) 关灯游戏 (百行代码搞定)

    1,准备工作,既然要开关灯,就需要确定灯的灯的颜色状态 首先想到的是扩展UIColor

  5. 关灯游戏源码（iOS）

    就是点一下灯 它本身和周围4盏灯会变色 ViewController.m文件 #import "ViewController.h" #import "UIView+cha ...

  6. jQuery网页版五子棋小游戏源码下载

    体验效果:http://hovertree.com/texiao/game/4/ 网页五子棋源代码: <!DOCTYPE html> <html> <head> & ...

  7. lufylegend游戏引擎

    lufylegend游戏引擎介绍:click 这个链接我觉得已经很详细的介绍了这个引擎. 所以以下我只说说一些简单的游戏代码过程. 首先从canvas做游戏叙述起: 这是一个让人很熟悉的简单小游戏,网 ...

  8. 用Phaser来制作一个html5游戏——flappy bird （一）

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  9. drag drop小游戏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. 在基于TypeScript的LayaAir HTML5游戏开发中使用AMD

    在基于TypeScript的LayaAir HTML5游戏开发中使用AMD AMD AMD是"Asynchronous Module Definition"的缩写,意思就是&quo ...

随机推荐

  1. 关于xlrd最新版本不支持.xlsx文件的解决办法

    #卸载已安装的 pip uninstall xlrd #下载对应的版本 pip install xlrd==1.2.0 #卸载已安装的pip uninstall xlrd #下载对应的版本pip in ...

  2. Java-Integer好大一坑，一不小心就掉进去了

    遛马少年,一个代码写的很6的程序员,专注于技术干货分享 最近,在处理线上bug的时候,发现了一个奇怪的现象 业务代码大概是这样的 public static boolean doSth(Integer ...

  3. MySQL-字段约束条件

    1.无符号.零填充 1.unsigned:用在生成表的过程中,表示不取负数,只取正数和0,负数会直接报错,eg:id int unsigned. 2.zerofill:用在生成表的过程中,跟在整形2后 ...

  4. SpringBoot 学习 step.3数据库

    数据库 JPA默认用的是Hibernate. SpringBoot开发WEB应用时,目前菜用较多的是mybatis+mybatis-plus,还有是springboot-data-jpa,jpa默认使 ...

  5. VS Code windows系统C/C++环境配置_添加路径

    1.安装cygwin 2.配置VS Code 按ctrl + shift + p ,选择 c/c++:Edit configuration(json) { "configurations&q ...

  6. JZOJ 4496. 【GDSOI 2016】第一题 互补约数

    \(\text{Problem}\) 求 \[\sum_{i=1}^n \sum_{d|n} \gcd(d, \frac{i}{d}) \] 有 \(n \le 10^{11}\) \(\text{A ...

  7. JZOJ 2020.07.30【NOIP提高组】模拟

    总结 本场比赛很不负责对待 暴力都没怎么打 一个半小时后才开始打题 很悲剧的只有 \(23+11+36=70\) 分 \(T1\) 4300. 装饰大楼 题目 略 思路 很无聊的找规律题 考场弃疗 \ ...

  8. JZOJ 3293. 【SHTSC2013】阶乘字符串

    \(\text{Problem}\) 给定一个由前 \(n\) 个小写字母组成的串 \(S\). 串 \(S\) 是阶乘字符串当且仅当前 \(n\) 个小写字母的全排列(共 \(n!\) 种)都作为 ...

  9. Fastjson Sec

    Fastjson 前置知识 autoType功能 序列化:fastjson在通过JSON.toJSONString()将对象转换为字符串的时候,当使用SerializerFeature.WriteCl ...

  10. CPU持续100%分析并解决

    背景 接到客户电话,说某系统数据库服务器CPU利用率从上午8点开始到现在基本上都是100%的情况,影响到了业务.让给看看是什么原因导致的,怎么紧急处理一下. 现象 查看CPU利用率,确实一直是90%以 ...