<!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. ES简介

    https://www.bbsmax.com/A/E35pW7LEJv/ 1 什么是ES ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式的全文搜索引擎,其对外服务是基 ...

  2. 怎么在GridView中限制显示字数

    三种方法可以实现,前两种是C#代码实现(原理一样),第三种是CSS实现. 1.cs代码中:GridView的RowDataBound中对想做处理的项做Remove()字符串截取. 2.aspx页面中: ...

  3. JZOJ 7685. 【2022.10.06冲剌NOIP2022模拟】奇怪的函数（function）

    \(\text{Solution}\) 观察到关于 \(x\) 的函数在 \(n\) 个操作之后一定是这样的: 一段水平直线加上一段斜率为 \(1\) 的直线再加上一段水平直线 于是线段树维护这个分段 ...

  4. js获取时间戳的方法

    js获取时间戳的方法 转载脚本之家: https://www.jb51.net/article/77066.htm 转载博客园八英里: https://www.cnblogs.com/deepalle ...

  5. Windows 注册表是什么

    注册表的概念 历史发展 在 Windows 3.x 操作系统中,注册表是一个极小文件,其文件名为 Reg.dat,里面只存放了某些文件类型的应用程序关联,大部分的设置是被放在 win.ini.syst ...

  6. docker .net core3.1 Dockerfile

    安装步骤和core 2.x 一样 看之前的随笔:Docker配置dotnet core项目 直接看Dockerfile FROM mcr.microsoft.com/dotnet/core/aspne ...

  7. ascii编码常用字符的十进制对照表

  8. SVN提交到服务器退回至指定版本(撤销操作)

    一.撤销已提交内容如果不小心把修改错误的文件提交到服务器上去了 可对其进行复原(指定单个文件撤销) 解决方法: 查看修改的日志 查看错误提交的文件 可以查看到这个文件改了什么 复原此版本作出的修改 然 ...

  9. eclipse项目转idea项目

    背景:用习惯了idea再去用eclipse实在用的不习惯,于是将老的eclipse项目导入到eclipse,网上有很多教程,看了很多博客都不行,一直报错,各种报错,现在终于好了,我们一起来看看怎么将e ...

  10. Vulnhub:CK-00靶机

    kali:192.168.111.111 靶机:192.168.111.196 信息收集 端口扫描 nmap -A -v -sV -T5 -p- --script=http-enum 192.168. ...