Question

我正在制作一个制作自己网站的项目。我正在制作一款游戏，让鲨鱼尽可能多地钓到鱼。 Sofar这是我的html和css代码：

（请全页运行）

＆＃13;

html {
width: 100%;
height: 100%;
}

body {
padding: 0px;
margin: auto;
width: 100%;
height: 80%;
background: url("bubbles.jpg");
background-position: absolute;
}

#main {
width: 100%;
height: 100%;
}


.title {
position: static;
top: 30%;
width: auto;
text-align: center;
background:transparent;
background-color:transparent;
background-image:transparent;
}

#button {
border: none;
padding: 4px 9px;
color: white;
background-color: #555555;
font-size: 100%;
}


.settings { 
text-align: left;
font-size: 150%;
}


#audio {
font-size: 16px;
}

#amount {
font-size: 16px;
}


#caught {
background-color: white;
padding: 2px;
border: 1px solid black;
width: 100px;
color: white;
font-size: 18px;
color: black;
}

#time {
background-color: white;
padding: 2px;
border: 1px solid black;
width: 100px;
color: white;
font-size: 18px;
color: black;
}

#highscore {
background-color: white;
padding: 2px;
border: 1px solid black;
width: 100px;
font-size: 18px;
color: black;
}

input {
width: 80%;
background-color: light gray;
}
nav {  
height: 125%;   
width: 160px;
border: 2px;
border-right: 2px solid black;
background-color: gray;
color: white;
font-size: 14;
left: 0px;
padding-left: 4px;
float: left;
}


#sharkimage{
width: 170px;
height: 125px;
position: absolute;
top: 81%;
left: 86%
}


#fish1 {
position: absolute;
top: 12%;
left: 15%;

}
#fish2 {
position: absolute;
top: 12%;
left: 20%;

}
#fish3 {
position: absolute;
top: 12%;
left: 25%;

}
#fish4 {
position: absolute;
top: 18%;
left: 20%;

}

#fish5 {
position: absolute;
top: 18%;
left: 25%;

}


.fish {
width: 80px;
height: 60px;
}


footer{
position: absolute;
left: 0%;
top: 97%;
padding-left: 2px;
color: white;
}

＆＃13;

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="look.css">
        <link rel="icon" type="image/gif" href="icon.jpg" >
        <title> Catch the Fish! </title>
    </head>
    <body>
        <div id="main">
            <nav>
                <h1 id="title">CATCH THE FISH!</h1>
                <button id="button">START!</button><br><br>
                <div class="settings">audio</div>
                <select id="audio">
                    <option value="on">ON
                    <option value="off">OFF
                </select><br><br>
                <div class="settings">amount of fish</div>
                <select id="amount">
                    <option value="10">10 FISH
                    <option value="15">15 FISH
                    <option value="20">20 FISH
                    <option value="25">25 FISH
                </select><br><br>
                <div class="settings">amount of fish caught</div>
                <div id="caught">game not started</div><br>
                <div class="settings">time</div>
                <div id="time">60</div><br>
                <div class="settings">highscore<br></div>
                <div id="highscore">not finished</div>
            </nav>
            <div id="speelveld">
                <div id="water">
                    <img id="sharkimage" src="https://placehold.it/120x80/00aaaa/fff/?text=shark" />             
                    <div id="fish1">    <img class="fish" src="https://placehold.it/120x80/00aaaa/fff/?text=Fish" />   </div>
                    <div id="fish2">    <img class="fish" src="https://placehold.it/120x80/00aaaa/fff/?text=Fish" /> </div>
                    <div id="fish3">    <img class="fish" src="https://placehold.it/120x80/00aaaa/fff/?text=Fish" /> </div>
                    <div id="fish4">    <img class="fish" src="https://placehold.it/120x80/00aaaa/fff/?text=Fish" /> </div>
                    <div id="fish5">    <img class="fish" src="https://placehold.it/120x80/00aaaa/fff/?text=Fish" /> </div>
                </div>
            </div>
        </div>
    <footer>
        C.G. Nijhuis
    </footer>
</body>
</html>

＆＃13;

现在我想尝试让我的鲨鱼图像跟随Javascript中的鱼。我真的希望这个工作，但我不知道从哪里开始。有人能帮助我吗？

Answer 1

您可以按照鼠标指针生成图像，

＆＃13;

div {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}
img {
  position: absolute;
}

＆＃13;

<div onmousemove="moveImg(event)">
<img src='http://via.placeholder.com/100/&text=Shark' id='shark' />
</div>

<script>
function moveImg(event) {
    var x = event.clientX;
    var y = event.clientY;
    var shark = document.getElementById("shark");
    shark.style.left = x+'px';
    shark.style.top = y+'px';
}
</script>

＆＃13;

Answer 2

您甚至不需要JavaScript！您可以使用CSS更改光标本身！

div.class-name {
  cursor: url(images/my-cursor.png), auto;
}

我从没想过要这么说，但是，如果您愿意，可以使用Gimp创建一个光标图像，并在其下方放置另一个图像，然后使用CSS将光标更改为该图像。

更新：：

然后使用此CSS：

div.class-name {
  cursor: url(images/cat-mouse.png), auto;
}

在javascript中以一定速度跟踪鼠标光标的图像

2 个答案: