<!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. Spring Boot启动时执行初始化操作三种方法分享

    @PostConstruct对于注入到Spring容器中的类,在其成员函数前添加@PostConstruct注解,则在执行Spring beans初始化时,就会执行该函数.但由于该函数执行时,其他Sp ...

  2. Django中需要修改配置

    Django需要修改配置 1.修改templates中的路径配置: TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.Django ...

  3. VeryCapture V1.8.9.5 中文版安装使用教程

    VeryCapture简介 VeryCapture中文版是一款实用的屏幕捕捉工具.VeryCapture最新版持将图钉在桌面.这个功能可以方便图片对比,在写论文或者写文章时比较方便.VeryCaptu ...

  4. IIS服务器SSL证书安装 (pfx文件不能直接运行时)

    在证书控制台下载IIS版本证书,下载到本地的是一个压缩文件,解压后里面包含.pfx文件是证书文件,pfx_password.txt是证书文件的密码. 友情提示: 每次下载都会产生新密码,该密码仅匹配本 ...

  5. P21_事件传参与数据同步

    事件绑定 在事件处理函数中为 data 中的数据赋值 通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下: 事件传参 小程序中的事件传参 ...

  6. Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs‘TypeError: Cannot read proper

    出现问题: 问题如题,出现场景:vscode运行npm命令 解决办法: 有的友友说安装nodejs时用管理员身份安装,右键没找到最后删掉了此文件即可. 这个文件缓存了之前的配置与现在安装的nodejs ...

  7. HTML5基本网页结构以及标签的改变

    转载csdn:https://blog.csdn.net/z983002710/article/details/76300327

  8. c语言以及高级语言中的float到底是什么以及IEEE754

    对内存里float4字节的好奇 初学计算机都要学那个什么二进制十进制什么补码 反码那些玩意儿哈,由于最近要做一个单片机往另外一个单片机发数据的需求,直接c语言指针 然后float4字节传过去不就得了吗 ...

  9. CSS nth-child

    前言 nth-child 伪类选择器非常地好用,所以必须得掌握它,能够为我们简化不少的 CSS 代码.比如选择前 n 行元素.选择后 n 行元素.选择奇偶行元素.选择 n 倍元素等.其语法本文不说,请 ...

  10. ISE_14.7_Windows10安装

    直接下载安装会报如下错误: There was an unexpected error executing Import ISE Virtual Appliance 解决方案 1.阅读xilinx手册 ...