Question

我按照Derek Banas的YouTube教程创建了俄罗斯方块游戏。但是，当我在Google Chrome浏览器中打开HTML文件（“ Tetris.html”）时，它只会打开一个空白页面，没有其他内容。

我曾尝试更新Chrome，但是我拥有最新版本。我也尝试过打开旧的HTML文件，没有问题。我的CSS，JS和HTML文件位于同一文件夹中。

HTML文件（“ Tetris.html”）：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">       
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>JavaScript Tetris</title>
        <link rel="stylesheet" type="text/css" href="mainstyle.css">
        <script src="TetrisBasic.js"></script>
    </head>
    <body>
        <canvas id='my-canvas'></canvas>
    </body>
</html>

CSS文件（“ mainstyle.css”）：

body {
    text-align: center;
    background: #fff;
}
#my-canvas {
    background: #fff;
    margin-left: 10px;
    margin-top: 10px;
}

我不包括我的JS文件（“ TetrisBasic.js”），因为我认为它没有任何问题。告诉我是否应该这样做。

Answer 1

为空白，因为您的画布没有颜色。 CSS中提供的颜色是#fff。因此，如果您希望在页面中看到画布，则需要更改背景或为＃my-canvas类添加一些边框颜色。那样的东西：

#my-canvas {
    background: #000;
    margin-left: 10px;
    margin-top: 10px;
}

打开HTML文件时为空白页

1 个答案: