javascript - 如何让这个图像在正确的位置
问题描述
我正在创建一个浏览器游戏,但我的代码有问题。看看这个截图: 截图
当船只面向东方、南方或西方时。它位于正确的网格中:C4。当您将航向切换到北方时,您仍应位于 c4 中,但它会将您置于网格 b4 中。另一个截图:截图
我真的不明白为什么会这样。我可以用 css 把它拉下来,但这会阻止动画被调用。
这是我的代码:
//css
<style>
#myAnimationRight {
background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>right.png");
background-size: cover;
background-repeat: no-repeat;
height:30px;
position:absolute;
width:55px;
top:30px;
left: 1px;
}
#myAnimationLeft {
background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>left.png");
background-size: cover;
background-repeat: no-repeat;
height:30px;
position:absolute;
width:55px;
top:30px;
right: 1px;
}
#myAnimationUp {
background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>up.png");
background-size: cover;
background-repeat: no-repeat;
height:55px;
position:absolute;
width:30px;
bottom:1px;
right: 30px;
}
#myAnimationDown {
background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>down.png");
background-size: cover;
background-repeat: no-repeat;
height:55px;
position:absolute;
width:30px;
top:1px;
right: 30px;
}
</style>
// javascripts
<script>
function myMoveRight() {
var elem = document.getElementById("myAnimationRight");
var pos = 0;
var id = setInterval(frame, 50);
Clock.pause();
function frame() {
if (pos == 105) {
clearInterval(id);
Clock.resume();
keymanager.resume();
} else {
pos++;
elem.style.left = pos + 'px';
keymanager.suspend();
}
}
MoveShip();
}
</script>
<script>
function myMoveLeft() {
var elem = document.getElementById("myAnimationLeft");
var pos = 0;
var id = setInterval(frame, 50);
Clock.pause();
function frame() {
if (pos == 105) {
clearInterval(id);
Clock.resume();
keymanager.resume();
} else {
pos++;
elem.style.right = pos + 'px';
keymanager.suspend();
}
}
MoveShip();
}
</script>
<script>
function myMoveDown() {
var elem = document.getElementById("myAnimationDown");
var pos = 0;
var id = setInterval(frame, 50);
Clock.pause();
function frame() {
if (pos == 105) {
clearInterval(id);
Clock.resume();
keymanager.resume();
} else {
pos++;
elem.style.top = pos + 'px';
keymanager.suspend();
}
}
MoveShip();
}
</script>
<script>
function myMoveUp() {
var elem = document.getElementById("myAnimationUp");
var pos = 0;
var id = setInterval(frame, 50);
Clock.pause();
function frame() {
if (pos == 105) {
clearInterval(id);
Clock.resume();
keymanager.resume();
} else {
pos++;
elem.style.bottom = pos + 'px';
keymanager.suspend();
}
}
MoveShip();
}
</script>
//html / php
<?php
if($shipheading == "E")
{
echo '<div id ="myAnimationRight"></div>';
}
elseif($shipheading == "W")
{
echo '<div id ="myAnimationLeft"></div>';
}
elseif($shipheading == "S")
{
echo '<div id ="myAnimationDown"></div>';
}
elseif($shipheading == "N")
{
echo '<div id ="myAnimationUp"></div>';
}
?>
任何帮助,将不胜感激。
解决方案
推荐阅读
- reactjs - 显示默认浏览器对话框以防止用户返回
- javascript - 使用导入的原始 html 时 v-html 无法按预期工作
- typescript - 打字稿:将对象属性和嵌套对象属性的类型更改为一种类型
- macos - 如何避免每次都发生的github ssh认证问题?
- javascript - 如何在javascript中添加删除按钮以从DOM和数组中删除?
- r - 如何根据r中for循环中的条件计算平均值
- postgresql - 如何使用数据库名称获取 postgres 服务器中每个数据库的死元组?
- python - 使用 Python 请求来使用流 XML 数据的 API
- python - 在 mac m1 上使用非 macOS 版本的 tensorflow
- stream - 正式地说:为什么你不能为 Racket 流编写一个流反向函数,就像你可以为列表编写一个函数一样?