JS原创小游戏旋转方块（源码）

最新推荐文章于 2025-06-13 10:20:30 发布

qq_38071004

最新推荐文章于 2025-06-13 10:20:30 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：游戏

本文链接：https://blog.youkuaiyun.com/qq_38071004/article/details/79403904

本文介绍了一款使用JavaScript编写的原创小游戏，游戏规则涉及两个可旋转的方块，玩家需要在点击后使右侧方块恢复与左侧相同的颜色布局。随着游戏进程，方格数量会增加，提供自定义或随机题目的选项。文中分享了页面代码、样式表和js文件的关键部分，包括初始化、方格创建、点击事件处理和游戏状态检查等。鼓励读者尝试代码并探索更多玩法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、介绍

游戏规则：

有两个大方块，由n*n的小方格组成，初始都为黑色，点击方块会在黑白间切换颜色，左边的方块用于自定义题目，右边方块则需要点击后获得与左边相同的图形，另外右边的方块每次点击后会顺时针旋转90度，你需要在脑海中将旋转后的方块复原，否则或许两图相同，但右图经过旋转，所以不过关。每次过关后方格数量会增加（当然题目是自定义的，所以难度还是自己决定，也可以使用随机数的方式获得一个初始题目）

源码：

页面代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>the same</title>
        <!--引入样式表和js文件-->
        <link rel="stylesheet" type="text/css" href="css/game.css"/>
        <script type="text/javascript" src="js/game.js" ></script>
    </head>
    <body>
        <!--左边方块-->
        <div id="ep_div">
            <!--方块用js向table中添加-->
            <table border="1 solid black" cellspacing="2" id="ep">
            </table>
        </div>
        <!--右边方块-->
        <div id="td_div">
            <table border="1 solid black" cellspacing="2" id="td">
            </table>
        </div>
        <!--一些提示信息，不重要-->
        <