Question

嘿，有人可以告诉我如何拍摄僵尸向玩家形象移动的图片。所以僵尸图像会以一定的速度向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>

Answer 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>

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

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过渡，但我怀疑它们在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>

另外，根据{{{}，建议您决定使用单引号' 或双引号" 3}}。大多数人都使用双引号。

W3 spec

我如何使图像跟随另一个javascript为我的游戏

1 个答案:

特别注意这个！