Javascript 你如何让一个图像降落在平台上？_Javascript_Css_Html

Javascript 你如何让一个图像降落在平台上？

javascript css html

Javascript 你如何让一个图像降落在平台上？,javascript,css,html,Javascript,Css,Html,我的问题是，如何将图像放置在所示的红色平台上？我下面有我的代码，说明到目前为止是如何设置的。我真的知道任天堂是怎么让马里奥开心的，这太疯狂了看起来比看起来容易还是只有我？我的CSS文件 body { background-color: #000; color: #FF0; } #BG { position: absolute; top: 10px; left: 10px; }

我的问题是，如何将图像放置在所示的红色平台上？我下面有我的代码，说明到目前为止是如何设置的。我真的知道任天堂是怎么让马里奥开心的，这太疯狂了看起来比看起来容易还是只有我？

我的CSS文件

body {
        background-color: #000;
        color: #FF0;        
}

#BG {
        position: absolute;
        top: 10px;
        left: 10px;        
}        
#MmEnu {
        position: absolute;
        top: 10px;
        left: 10px;        
}
#mainDis {
        position: absolute;
        top: 13px;
        left: 15px;                
}

#land01 {
        position: absolute;
        top: 250px;
        left: 350px;
}

#land00 {
        position: absolute;
        top: 120px;
        left: 250px;
}

我的索引文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>GENERATION CUBE-X</title>
<head>

<link rel = "stylesheet" type = "text/css" href = "css/gencubex.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src = "class/loadImages.js"></script>
<script src = "class/myvis.js"></script>
<script src = "class/mainMenu.js"></script>
<script src = "class/display.js"></script>
<script src = "class/theGame.js"></script>
<script src = "class/landThis.js"></script>

</head>
<body onLoad = "MAINM(), myvisible()">    

<div id = "BG"> 
<img src = "images/bg.png" width = "1023" height = "395" />
</div>
<div id = "MmEnu">
<img src = "images/mainMenu.png" width = "1023" height = "395" />
</div>
<div id = "mainDis">
<img src = "images/display.png" width = "900" height = "60" />
</div>

<div id = "land00">

</div>
<div id = "land01">

</div>


</body>
</html>

将您的元素定位为绝对位置（就像您所做的那样），并在

元素上使用。getBoundingClientRect（）

获取元素（红色平台）的位置，然后将您的图像1px放在红色平台上方。太棒了！谢谢，我会试试看。：）这花了我一辈子的时间lol@SNLippold，任天堂没有使用HTML+CSS+JS制作马里奥；）他们用了什么？它是C、C++、C++的某种形式吗？

var cTAdd = 0;
var setThis = 1;
function landT() {
        setThis = setTimeout(landT, 500);

        cTAdd = Math.floor(Math.random() * 100 + 1);

        var block00 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 25) {
                block00.src = "images/sep2.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
                block00.src = "images/sep1.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
                block00.src = "images/platform00.png";
        }

        document.getElementById("land01").appendChild(block00);

        var block01 = document.createElement("img");

        if (cTAdd > 0 && cTAdd < 25) {
                block01.src = "images/platform00.png";
        }
        if (cTAdd > 25 && cTAdd < 50) {
                block01.src = "images/sep2.png";
        }
        if (cTAdd > 50 && cTAdd < 100) {
                block01.src = "images/sep1.png";
        }

        document.getElementById("land00").appendChild(block01);


}

var thisSet = 1;
function moveLand() {

        thisSet = setTimeout(moveLand, 40);
        moveBlock1 = moveBlock1 - 10;
        document.getElementById("land00").style.left = moveBlock1 + "px";
        document.getElementById("land01").style.left = moveBlock1 + "px";                
}

var getPlatF1POSX = 0;
var getPlatF1POSY = 0;
var addVar = 0;
var addVar2 = 0;
var addVar3 = 0;
function loadGame() {
        document.getElementsByTagName("DIV")[4].style.visibility = "visible";
        addEventListener('mousemove', getData, false);
        addEventListener('keydown', movePlayer, false);
        addEventListener('keyup', stopPlayer, false);
        movePlat();
}

function getData(gData) {

}

var thisThis = 1;
var moveBlock1 = 350;
var stLandT = 0;
function movePlat() {

}

function movePlayer(mPlayer) {
        switch (mPlayer.keyCode) {
                case 39:
                        if (stLandT == 0) {
                                setThis = setTimeout(landT, 500);
                                thisSet = setTimeout(moveLand, 40);
                                stLandT = 1;
                        }
                break;

                case 38:

                break;
        }
}

function stopPlayer(sPlayer) {
        switch (sPlayer.keyCode) {
                case 39:
                        clearTimeout(setThis);
                        clearTimeout(thisSet);
                        stLandT = 0;
                break;
        }
}