canvas+js实现简单的数字华容道小游戏

最新推荐文章于 2025-03-31 16:14:10 发布

前端小黑

最新推荐文章于 2025-03-31 16:14:10 发布

阅读量5.5k

点赞数 1

分类专栏： js+canvas实现小游戏和小应用 JavaScript

本文链接：https://blog.csdn.net/zemprogram/article/details/87553822

版权

数字华容道是个很简单的小游戏，今天就尝试使用canvas+js做个简单的数字华容道小游戏。有关于游戏的具体规则请上网查阅。

一如既往先写个html页面，这里我把游戏的界面水平居中了，这里预留了一个动画，在后面时间跳动的时候使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas,
        #time,
        h1 {
            display: block;
            margin: 10px auto;
            width: 400px;
            text-align: center;
        }
        
        #time {
            font-size: 20px;
            text-align: center;
        }
        #time::after {
            content: "s";
        }
        .animate {
            animation: fontChange 0.4s linear 0s infinite none;
        }
        
        @keyframes fontChange {
            0% {
                transform: rotateX(0deg);
            }
            50% {
                transform: rotateX(90deg);
            }
            100% {
                transform: rotateX(0deg);
            }
        }
    </style>
</head>

<body>
    <h1>数字华容道</h1>
    <canvas id="canvas"></canvas>
    <span id="time">0</span>
    <script src="js/main.js"></script>
</body>

</html>

然后我们要设置canvas的宽高以及绘制方法的操作对象，还设置了一个用以判断当前是否完成游戏的布尔类型变量，这在后面可以用于判断停止计时。

let canvas = document.getElementById('ca

最低0.47元/天解锁文章