javascript - 在一个简单的 Javascript 视频游戏中设置 backgroundImage

问题描述

所以我正在尝试构建一个基于js的视频游戏。但是我遇到了一个问题：如何将背景图像制作为游戏区？

PS： backgroundImage 已经指定了 CSS 条件：

body {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

这是代码：

<body onload="startGame()">
    <script>
        var myGamePiece;
        function startGame() {
            myGameArea.start();
            myGamePiece = new component(30, 30, "red", 10, 120)}
    </script>

来源：https ://www.w3schools.com/graphics/tryit.asp?filename=trygame_controllers_keys

标签： javascripthtmlcss

当您使用画布时，您可以这样做：

加载图像：

const background = new Image();
const onload = startGame;
background.src = "bg.jpg";

绘制背景：

context.drawImage(background, 0, 0, canvas.width, canvas.height);

演示

javascript - 在一个简单的 Javascript 视频游戏中设置 backgroundImage

问题描述

解决方案

推荐阅读