javascript - 为什么即使在使用 css 添加背景图像后我的图像仍然不可见？

问题描述

我正在尝试构建一个类似于蛇游戏的游戏，除了它是鲨鱼和鱼。我编写了一个程序，它的工作原理与我想要制作的游戏完全一样，但是当我尝试使用图像而不是鲨鱼和鱼的背景颜色时，它们就变得不可见了。我引用了我为此编写的代码。请建议如何将代表鲨鱼和鱼的事物的背景颜色更改为他们的图像。图片与代码文件位于同一文件夹中。

编辑：我在网上托管了图像，但它们仍然不可见....

如果我的代码中有任何错误，请原谅，因为我不是很擅长编程...

//constants n variables
let inputdir = {x: 0, y: 0};
const eatsound = new Audio('eat.wav');
const gosound = new Audio('gameover.wav');
const movesound = new Audio('move.wav');
const musicsound = new Audio('music.mp3');
let speed = 5;
let score = 0;
let lastPaintTime = 0;
let sharkarr = [
    {x: 13, y: 15}
]
fish = {x: 6, y: 7};


//game functions
function main(ctime) {
    window.requestAnimationFrame(main);
    //console.log(ctime)
    if((ctime - lastPaintTime)/1000 < 1/speed){
        return;
    }
    lastPaintTime = ctime;
    gameEngine();
}

function isCollide(sharkarr) {
    if(sharkarr[0].x >= 18*2 || sharkarr[0].x <= -18 || sharkarr[0].y >= 18*2 || sharkarr[0].y <= -18){
        return true;
    }
}

function gameEngine(){
    // updating fish, shark
    if(isCollide(sharkarr)){
        gosound.play();
        musicsound.pause();
        inputdir = {x: 0, y: 0};
        setTimeout(() => {
            alert("GAME OVER!");
        }, 2000);
        sharkarr = [{x: 13, y: 15}];
        musicsound.play();
        score = 0;
        scoreBox.innerHTML = "Score: " + score;
    }

    //fish eaten = score+ + fish moved
    if(sharkarr[0].y === fish.y && sharkarr[0].x === fish.x){
        eatsound.play();
        score += 1;
        scoreBox.innerHTML = "Score: " + score
        let a = 1;
        let b = 18;
        fish = {x: Math.round(a + (b - a)*Math.random()), y: Math.round(a + (b - a)*Math.random())}
    }

    //moving shark
    for (let i = sharkarr.length - 2; i>=0 ; i--){
        //const element = array[i];
        sharkarr[i+1] = {...sharkarr[i]};
    }

    sharkarr[0].x += inputdir.x;
    sharkarr[0].y += inputdir.y;
    
    // display shark
    board.innerHTML = "";
    sharkarr.forEach((e, index)=>{
        sharkelement = document.createElement('div');
        sharkelement.style.gridRowStart = e.y;
        sharkelement.style.gridColumnStart = e.x;

        if(index === 0){
            sharkelement.classList.add('shark')
        }
        else{
            sharkelement.classList.add('shark');
        }
        board.appendChild(sharkelement);
    })
    // display food
    fishelement = document.createElement('div');
    fishelement.style.gridRowStart = fish.y;
    fishelement.style.gridColumnStart = fish.x;
    fishelement.classList.add('fish');
    board.appendChild(fishelement);
}


//main logic
window.requestAnimationFrame(main);
window.addEventListener('keydown', e =>{
    inputdir = {x: 0, y: 1} //starts the game
    movesound.play();
    musicsound.play();
    switch (e.key) {
        case "ArrowUp":
            //console.log("ArrowUp");
            inputdir.x = 0;
            inputdir.y = -1;
            break;
        case "ArrowDown":
            //console.log("ArrowDown");
            inputdir.x = 0;
            inputdir.y = 1;
            break;
        case "ArrowLeft":
            //console.log("ArrowLeft");
            inputdir.x = -1;
            inputdir.y = 0;
            break;
        case "ArrowRight":
            //console.log("ArrowRight");
            inputdir.x = 1;
            inputdir.y = 0;
            break;
        
        default:
            break;
    }
})

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: blue;
}

.body{
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#bg{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

#title{
    color: white;
    border: 2px solid white;
    width: 98%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: absolute;
    top: 1%;
    text-align: center;
    background-color: green;
    font-size: medium;
}

#scoreBox{
    color: white;
    border: 2px solid white;
    width: 98%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    position: absolute;
    bottom: 1%;
    text-align: center;
    background-color: green;
    font-size: medium;
}

#board{
    width: 98%;
    height: 85%;
    display: grid;
    grid-template-rows: repeat(18, 1fr);
    grid-template-columns: repeat(18, 1fr);
    border: 10px solid red;
}

.shark{
    background-color: #fff;
    background-image: url('https://postimg.cc/dDBdCsP4');
    background-repeat: no-repeat;
}

.fish{
    background-color: yellow;
    background-image: url('https://postimg.cc/SYNnd9FV');
    background-repeat: no-repeat;
}

<!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>Eat The Fish</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="body">
        <video id="bg" autoplay loop muted>
            <source src="bg.mp4">
        </video>
        <div id="title">EAT THE FISH!!!</div>
        <div id="scoreBox">Score: 0</div>
        <div id="board"></div>
    </div>
</body>
<script src="index.js"></script>
</html>

标签： javascripthtmlcssimage

javascript - 为什么即使在使用 css 添加背景图像后我的图像仍然不可见？

问题描述

解决方案

推荐阅读