<!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. 使用Addressables.LoadAssetAsync<Asset>(target)加载unity资源，不止是gameobject

    要声明的方法: public static async Task<string> ReadJsonData(string target){  TextAsset jsonDataObjec ...

  2. Zookeeper01 简介和单机安装使用

    1 zookeeper几个关键的东西 1.1 数据结构-节点 /a/b/c 节点 包含了目录和文件的特性(名称类似目录,本身又类似文件携带数据) 1.2 节点分类 永久/临时|有序/无须 特点一:节点 ...

  3. OpenMP Sections Construct 实现原理以及源码分析

    OpenMP Sections Construct 实现原理以及源码分析 前言 在本篇文章当中主要给大家介绍 OpenMP 当中主要给大家介绍 OpenMP 当中 sections construct ...

  4. 另类数据获取法-eax法

    有些基址非常难追 所以我们用一个另类的方法来追一下 复杂的汇编代码 ------------------ call 0x****** mov esi,eax; mov ***, dword ptr d ...

  5. Spring Boot Hello World 基于 IDEA 案例详解

    一.Spring Boot 是什么 世界上最好的文档来源自官方的<Spring Boot Reference Guide>,是这样介绍的: Spring Boot makes it eas ...

  6. 使用一个文件集中管理你的 Nuget 依赖版本号

    在 .net 7 以前,项目对于 nuget 依赖项的版本依赖散落与解决方案的各个角落.这导致升级维护和查看的时候都比较麻烦.在 .net 7 中,你可以使用一个文件来集中管理你的 Nuget 依赖版 ...

  7. Jquery 点击弹窗，将弹窗内容赋值到各个项demo

    <div class="qb"> <div class="box"> <div class="qtt f_16 fbd& ...

  8. css小技巧【让背景最少是屏幕高度】【让三个字和四个字左右对齐】

    怎么让背景最少是屏幕高度 min-height: 100vh; 怎么让三个字和四个字左右对齐 text-align-last: justify;

  9. javascript的布尔运算符

    布尔运算符分为四种: 取反运算符(!) 且运算符(&&) 或运算符(||) 三元运算符( ? 表达式1 : 表达式2 ) 取反运算符(!) 用于将任何值转换为布尔值后再变为相反值,即t ...

  10. java double/float转BigDecimal,精度问题

    double/float 转BigDecimal,会有精度问题.所以需要转String类型,然后再转BigDecimal