我有一个HTML，在这个HTML中我创建了一个pacman游戏。在这个游戏中，我的pacman正在吃一个黄色背景的div。但我希望我的pacman吃图像而不是div。例如在第一个div食物-1我想放置图像abc1.jpg和食物-2 div我的图像应该是abc2.jpg等等。我尽我所能但是不能这样做。请帮助我实现这一目标。
这是我的代码。
pakman.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<div class="food food-1"></div>
<div class="food food-2"></div>
<div class="food food-3"></div>
<div class="food food-4"></div>
<div class="food food-5"></div>
<div class="food food-6"></div>
<div class="food food-7"></div>
<div class="food food-8"></div>
<div class="food food-9"></div>
<div class="food food-10"></div>
<div class="food food-11"></div>
</div>
</body>
</head>
</html>
我的css文件是
pac.css
body {
width:100%;
height:100%;
background:black;
overflow:hidden;
margin:0;
padding:0;
}
.display {
height:120px;
width:600px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
border-top:6px solid #2121de;
border-bottom:6px solid #2121de;
margin:0 auto;
margin-top:-66px;
margin-left:-300px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay {
position:absolute;
z-index:999;
top:0;
left:0;
height:100%;
width:0;
background:black;
-moz-animation: eat 5s linear infinite;
-webkit-animation: eat 5s linear infinite;
animation: eat 5s linear infinite;
}
.pacman {
position:absolute;
z-index:1000;
top:50%;
margin-top:-50px;
width: 100px;
height: 100px;
background-color:yellow;
border-radius: 100%;
}
.pacman-mask {
width: 100px;
height: 100px;
margin-left:1px;
overflow:hidden;
border-radius: 100%;
position:relative;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border-box;
}
.pacman-inner {
position:absolute;
top:50%;
right:0;
margin-top:-50px;
width: 100px;
height: 100px;
}
.pacman-inner:after {
display:block;
position:absolute;
top:50px;
left:-50px;
content:" ";
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid black;
-moz-animation: border 0.25s linear infinite;
-webkit-animation: border 0.25s linear infinite;
animation: border 0.25s linear infinite;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.pacman-real {
-moz-animation: move 5s linear infinite;
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.pacman-mirror {
-moz-animation: move2 5s linear infinite;
-webkit-animation: move2 5s linear infinite;
animation: move2 5s linear infinite;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pacman-mirror .pacman-inner:after {
-moz-animation-delay:0.25s ;
-webkit-animation-delay:0.25s ;
animation-delay: 0.25s;
}
.circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.food {
background-color:#ffb897;
width:10px;
height:10px;
position:absolute;
top:50%;
margin-top:-5px;
margin-left:-5px;
}
.food-1 {
left:50px;
}
.food-2 {
left:100px;
}
.food-3 {
left:150px;
}
.food-4 {
left:200px;
}
.food-5 {
left:250px;
}
.food-6 {
left:300px;
}
.food-7 {
left:350px;
}
.food-8 {
left:400px;
}
.food-9 {
left:450px;
}
.food-10 {
left:500px;
}
.food-11 {
left:550px;
}
.food-12 {
left:600px;
}
@-moz-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@-webkit-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@-moz-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@-webkit-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@-moz-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@-webkit-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@-moz-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
@-webkit-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
@keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
答案 0 :(得分：2)
应该像更改div和img代码并添加src属性一样简单：
<img src="http://www.gatewayvancouver.com/new/images/detail_dot_blue.gif" class="food food-1"/>
请参阅最左边的一个：https://jsfiddle.net/4xLu5szz/5/
答案 1 :(得分：1)
“使用图片代码”
示例：
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
代码HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="pac.css" />
<body>
<div class="display">
<div class="overlay"></div>
<div class="pacman pacman-real">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
</div>
<div class="pacman pacman-mirror">
<div class="pacman-mask">
<div class="pacman-inner"></div>
</div>
<div id="circle"></div>
</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTVAbva29vJgnTKwTJmda-Rvod1hxx0NyCV_m9eeSNXJotaBD-" class="food food-1"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMR5x8vDhDIz7ydtIsCGjOg8HY30fCfW-eEFsI7kydkv93yQJq " class="food food-2"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKovb82eqcasgtuu1vNMcQrwmno1ebHR6_OGhQKN2Ahq2edADr" class="food food-3"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5xr4UoU50LojizDjBXPiWodrHzKALt_AwQvWbRyZuu5j-itGZ" class="food food-4"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlP6-Z7AX4P-0HCFN2RCiBMQo-H6ljKWBX84DN-Jl92tzRPiCnww " class="food food-5"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_D8ibrS1OwZKqeHeA_8jl4dFcWPqHAPZ9hUdClrvDZvyhaFID" class="food food-6"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwib9lxt-zKm9NOqIJzRR8UOCiIv03si25pS3x5_iuJejoaZLv" class="food food-7"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvjZH6-vKtV-s2W5cgXTnchAgS9TYAcXj7U48XE_MNxJRe56vS" class="food food-8"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcJSD2u8YexpOp1GL3STmhrYt0LnTDy2o9YhfICu2DX0QCpCIn " class="food food-9"/>
<img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdzRd944Fdkw4_fDcmmSH__EqJbItKn9tNoFLu906ZNxxSPvmMdA" class="food food-10"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSY6Z0MZA7eRpyMln8oWWszO-uDAI5be3omIn0BhmB1YNEXH80tg " class="food food-11"/>
</div>
</body>
</head>
</html>
CSS：
body {
width:100%;
height:100%;
background:black;
overflow:hidden;
margin:0;
padding:0;
}
.display {
height:120px;
width:600px;
position:absolute;
top:50%;
left:50%;
overflow:hidden;
border-top:6px solid #2121de;
border-bottom:6px solid #2121de;
margin:0 auto;
margin-top:-66px;
margin-left:-300px;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.overlay {
position:absolute;
z-index:999;
top:0;
left:0;
height:100%;
width:0;
background:black;
-moz-animation: eat 5s linear infinite;
-webkit-animation: eat 5s linear infinite;
animation: eat 5s linear infinite;
}
.pacman {
position:absolute;
z-index:1000;
top:50%;
margin-top:-50px;
width: 100px;
height: 100px;
background-color:yellow;
border-radius: 100%;
}
.pacman-mask {
width: 100px;
height: 100px;
margin-left:1px;
overflow:hidden;
border-radius: 100%;
position:relative;
-moz-background-clip:border;
-webkit-background-clip:border;
background-clip:border-box;
}
.pacman-inner {
position:absolute;
top:50%;
right:0;
margin-top:-50px;
width: 100px;
height: 100px;
}
.pacman-inner:after {
display:block;
position:absolute;
top:50px;
left:-50px;
content:" ";
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid black;
-moz-animation: border 0.25s linear infinite;
-webkit-animation: border 0.25s linear infinite;
animation: border 0.25s linear infinite;
-moz-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.pacman-real {
-moz-animation: move 5s linear infinite;
-webkit-animation: move 5s linear infinite;
animation: move 5s linear infinite;
}
.pacman-mirror {
-moz-animation: move2 5s linear infinite;
-webkit-animation: move2 5s linear infinite;
animation: move2 5s linear infinite;
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.pacman-mirror .pacman-inner:after {
-moz-animation-delay:0.25s ;
-webkit-animation-delay:0.25s ;
animation-delay: 0.25s;
}
.circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
.food {
background-color:#ffb897;
width:20px;
height:20px;
position:absolute;
top:50%;
margin-top:-5px;
margin-left:-5px;
}
.food-1 {
left:50px;
}
.food-2 {
left:100px;
}
.food-3 {
left:150px;
}
.food-4 {
left:200px;
}
.food-5 {
left:250px;
}
.food-6 {
left:300px;
}
.food-7 {
left:350px;
}
.food-8 {
left:400px;
}
.food-9 {
left:450px;
}
.food-10 {
left:500px;
}
.food-11 {
left:550px;
}
.food-12 {
left:600px;
}
@-moz-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@-webkit-keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@keyframes border {
0% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
50% {
margin-left:50px;
border-left:0 solid transparent;
border-right:0 solid transparent;
}
100% {
margin-left:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
}
@-moz-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@-webkit-keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@keyframes move {
0% {
left:-100px;
}
50% {
left:600px;
}
100% {
left:600px;
}
}
@-moz-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@-webkit-keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@keyframes move2 {
0% {
left:-100px;
}
50% {
left:-100px;
}
100% {
left:600px;
}
}
@-moz-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
@-webkit-keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}
@keyframes eat {
0% {
width:0;
margin-left:0;
}
50% {
width:600px;
margin-left:0;
}
100% {
width:0;
margin-left:600px;
}
}