2
私自身のサイトを作るプロジェクトに取り組んでいます。私は、サメができるだけ多くの魚を捕まえるようにするゲームを作っています。 SOFARこれは私のHTMLとCSSのコードです：javascriptで特定の速度でマウスカーソルをたどる画像
（フルページで実行してください）
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;
}<!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>今、私は試してみて、私のサメの画像はJavascriptで魚をたどるようにしたいです。私は本当にこれが働きたがっているが、私はどこから始めるべきか分からない。誰か助けてくれますか？
を画像フォローマウスポインタを作ることができますか？それを見てみましょう：[画像をマウスポインタに従わせる]（http://stackoverflow.com/questions/7143806/make-an-image-follow-mouse-pointer） – AlexG