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

Posted 2023-05-08

技术标签:

【中文标题】我如何在 javascript 中为我的游戏制作图像跟随另一个图像【英文标题】：how do i make a image follow another in javascript for my game 【发布时间】：2013-08-10 00:54:59 【问题描述】：

嘿，谁能告诉我如何让僵尸图片向玩家图片移动。所以僵尸图像会以一定的速度向 zs.png 移动，并且可能会增加生命值，所以当僵尸接触玩家时，玩家会失去生命值

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

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

有人可以给我完整的代码吗，因为我是 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>

【问题讨论】：

更改按键的顶部或左侧位置 how do i make a image follow another in javascript的可能重复 【参考方案1】：

编辑：更新了一些代码块以使其实际工作（！），添加了关于放置脚本的位置的注释并包含了一个 jsFiddle

jsFiddle Link

编辑 2： 不要只输入 left:100;top:100;height:30;width:20;，因为它不是有效的 CSS，许多浏览器会阻塞它。在每个数字后添加px 以获得left:100px;top:100px;height:30px;width:20px;。

一点点研究大有裨益。

How to detect if two divs touch with jquery?

Binding arrow keys in 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 秒（600ms = 0.6s）移动到角色的位置，虽然我自己没有测试过。

或者，您可以考虑使用 CSS 过渡，尽管我怀疑它们在 Nintendo 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 spec 决定使用任一单引号' 或双引号"。大多数人使用双引号。

Single vs Double quotes (' vs ")

【讨论】：

谢谢，但我试过了，它没有用我把它放在这个页面上link，它没有用。我已经更新了大部分代码，并在我的 jsFiddle 中对其进行了测试（请参阅答案顶部的链接），它绝对适合我。另外，请特别阅读“特别注意这一点”部分，因为您犯了这个错误！那么javascript中没有办法做到这一点吗？因为我需要像这样的运动LINK也是边界所以你不能走出关卡我建议您在尝试制作游戏之前先尝试制作一些更简单的 JavaScript 项目。在没有 Flash 的情况下制作 HTML + JavaScript 游戏已经是一项不错的成就，对于 JavaScript 新手来说，我不会推荐它。如果您无法弄清楚如何防止某个值在达到某个限制后增加（使用 if...else 语句），那么您可能需要考虑先更深入地学习 JavaScript。

以上是关于我如何在 javascript 中为我的游戏制作图像跟随另一个图像的主要内容，如果未能解决你的问题，请参考以下文章

如何在 javascript 中为我的可拖动对象设置“边界”区域？

在 JavaScript 中为我的牌组生成卡片时出现随机错误

如何在我的蛇游戏中为我的蛇的身体部位使用不同的图像？（Python、Pygame、Snake）

如何在通知内容扩展中为我的自定义视图应用自定义字体/颜色和半透明背景？

我们如何让 NSTimer 在 iOS 中为我的音频播放器在后台运行

在 pyqtgraph 中为条形图设置渐变颜色