<!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. 花了半个小时基于 ChatGPT 搭建了一个微信机器人

    相信大家最近被 ChatGPT 刷屏了,其实在差不多一个月前就火过一次,不会那会好像只在程序员的圈子里面火起来了,并没有被大众认知到,不知道最近是因为什么又火起来了,而且这次搞的人尽皆知. 想着这么火 ...

  2. springboot FilterRegistrationBean 拦截器的使用

    1.创建一个filter package com.ruoyi.weixin.user.interator; import com.ruoyi.common.utils.SecurityUtils; i ...

  3. CMAKE添加库

    1.因为pthread不是C标准库,需要链接 2.在CMakeLists.txt里添加: FIND_PACKAGE(Threads  REQUIRED) TARGET_LINK_LIBRARIES($ ...

  4. Cesium给3dtileset中的每个瓦片添加一个billboard/label(六)

    2023-01-14 改了下思路,直接根据点击的位置转换为世界坐标系再添加label console.log(`鼠标点击位置为:${click.position}`); var cartesian = ...

  5. vue ie11 缺少 ':' html

    IE11 用vue 出现这错 怎么处理啊 ,用的html页做的 ,没用脚手架这类的东西 vue本身在没有babel做降级的情况下没法在IE上跑的,配个babel,还有polyfill这两个加上就好了 ...

  6. NameError: name '_name_' is not defined

    if _name_ == '_main_': 错误的原因可能是name是双下划线.(明显下面的下划线要长一点) if __name_ == '_main__':

  7. 使用vscode编辑markdown

    目录 markdown在vscode中的使用 标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 列表 图片 表格 网址 代码 文本样式 引用 目录 vscode中使用的插件推荐 截图工 ...

  8. net core 依赖注入DI

    控制反转:Inversion Of Control,简称 IOC,是面向对象中的一种设计原则,调用者不自己new实例,而是交给容器去创建,可以减轻代码的耦合度. 依赖注入:Dependency Inj ...

  9. ChatGPT Java客户端，OpenAi的Java版本SDK已完成，请火速接入。

    已经支持OpenAI官方的全部api,有bug欢迎朋友们指出,互相学习. 源码地址:https://github.com/Grt1228/chatgpt-java 不对之处欢迎指正. 注意:由于这个接 ...

  10. Tensorflow 1.X 在windows上的安装

    参考:https://blog.csdn.net/weixin_42326479/article/details/105539110 pip install -i https://pypi.douba ...