我如何在javascript中为我的游戏创建一个图像跟随另一个图像

how do i make a image follow another in javascript for my game

本文关键字：图像 一个 另一个 跟随 创建 游戏 javascript 我的      更新时间：2023-09-26

嘿，有人能告诉我如何让僵尸的照片朝着玩家的图像移动吗。所以僵尸图像会以一定的速度向zs.png移动，可能会增加生命值，所以当僵尸接触到玩家时，玩家就会失去生命值

这个游戏是为3ds浏览器，所以它必须是javascript和html

这里还有一个链接到我在链接上运行的页面

有人能给我完整的代码吗？因为我是javascript新手。感谢

这就是我到目前为止所拥有的。

<html>
<head>
<script type='text/javascript'>
// movement vars
var xpos = 100;
var ypos = 100;
var xspeed = 1;
var yspeed = 0;
var maxSpeed = 5;
// boundary
var minx = 0;
var miny = 0;
var maxx = 300;
var maxy = 190;
// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;
function slowDownX()
{
  if (xspeed > 0)
    xspeed = xspeed - 0.5;
  if (xspeed < 0)
    xspeed = xspeed + 0.5;
}
function slowDownY()
{
  if (yspeed > 0)
    yspeed = yspeed - 0.5;
  if (yspeed < 0)
    yspeed = yspeed + 0.5;
}
function gameLoop()
{
  // change position based on speed
  xpos = Math.min(Math.max(xpos + xspeed,minx),maxx);
  ypos = Math.min(Math.max(ypos + yspeed,miny),maxy);
  // or, without boundaries:
  // xpos = xpos + xspeed;
  // ypos = ypos + yspeed;
  // change actual position
  document.getElementById('character').style.left = xpos;
  document.getElementById('character').style.top = ypos;
  // change speed based on keyboard events
  if (upPressed == 1)
    yspeed = Math.max(yspeed - 0.1,-0.1*maxSpeed);
  if (downPressed == 1)
    yspeed = Math.min(yspeed + 0.1,0.1*maxSpeed)
  if (rightPressed == 1)
    xspeed = Math.min(xspeed + 0.1,0.1*maxSpeed);
  if (leftPressed == 1)
    xspeed = Math.max(xspeed - 0.1,-0.1*maxSpeed);
  // deceleration
  if (upPressed == 0 && downPressed == 0)
     slowDownY();
  if (leftPressed == 0 && rightPressed == 0)
     slowDownX();
// loop
  setTimeout("gameLoop()",10);
}
function keyDown(e)
{
  var code = e.keyCode ? e.keyCode : e.which;
  if (code == 38)
    upPressed = 1;
  if (code == 40)
    downPressed = 1;
  if (code == 37)
    leftPressed = 1;
  if (code == 39)
    rightPressed = 1;
}
function keyUp(e)
{
  var code = e.keyCode ? e.keyCode : e.which;
  if (code == 38)
    upPressed = 0;
  if (code == 40)
    downPressed = 0;
  if (code == 37)
    leftPressed = 0;
  if (code == 39)
    rightPressed = 0;
}
</script>
</head>
<body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='red'>
   <!-- The Level -->
   <div style='width:320;height:220;position:absolute;left:0;top:0;background:green;'>
   </div>
   <!-- The Character -->
   <img id='character' src='zs.gif'     style='position:absolute;left:100;top:100;height:30;width:20;'/>
</body>
</html>

编辑：更新了一些代码块以使它们真正工作（！），添加了关于将脚本放在哪里的注释，并包括一个jsFiddle

jsFiddle-Link

编辑2:不要只放left:100;top:100;height:30;width:20;，因为它不是有效的CSS，很多浏览器都会被它卡住。在每个数字后面加px可以得到left:100px;top:100px;height:30px;width:20px;。

一点研究会有很大帮助。

如何检测两个div是否接触jquery？

JS/jQuery 中的绑定箭头键

jquery animate.css

您几乎肯定希望使用jQuery来完成您正在做的工作。

尝试以下操作：

$(document).ready(function(){
    $(document).keydown(function(e){
        var c = $("#character");
        if (e.keyCode === 37) { 
            // left arrow pressed
            c.css("left","-=10px"); // subtract 10px from the character's CSS 'left' property, although you probably want some system to add a limit to this value
        }else if(e.keyCode === 38) {
            // up arrow pressed
            c.css("top","-=10px"); // subtract 10px from the character's CSS 'up' property
        }else if(e.keyCode === 39) {
            // right arrow pressed
            c.css("left","+=10px"); // add 10px to the character's CSS 'left' property
        }else if(e.keyCode === 40) {
            // down arrow pressed
            c.css("top","+=10px"); // add 10px to the character's CSS 'top' property
        }
        return false;
    });
});

这允许角色使用箭头键移动。

使僵尸图像移动有点困难。首先，在文档中添加以下div标签：

<div id="zombie" style="position:absolute;top:10px;left:10px;"><img src="YOUR_ZOMBIE_IMAGE.gif" /></div>

然后，在$(document).ready(function(){行上方添加以下JavaScript：

var zombieFrequency = 1000; // how long (in milliseconds) it should take the zombie to move to the character's position
var easeType = "swing"; // change this to "linear" for a different kind of zombie animation

最后，将以下内容添加到$(document).ready(function(){块中：

setInterval(function(){
    var c = $("#character");
    $("#zombie").animate({"left":c.css("left"),"top":c.css("top")},zombieFrequency,easeType);
},zombieFrequency);

这应该会使僵尸每0.6秒（600毫秒=0.6秒）移动到角色的位置，尽管我自己还没有测试过。

或者，你可以考虑使用CSS转换，尽管我怀疑它们在任天堂3DS上是否能顺利运行（甚至得到支持）。

请特别注意

此外，您不能将指向脚本和内部脚本的链接放在同一个<script>标记中，如下所示：

<script src="//ajax.googleapis.com/libs/jquery/1.10.2/jquery.min.js">
    // some more scripting
</script>

它们必须是分开的，就像这样：

<script src="//ajax.googleapis.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    // some more scripting
</script>

另请注意，根据W3规范，建议决定使用单引号'或双引号"。大多数人使用双引号。

单引号与双引号（'；vs"）

相关文章：