-1

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

1 回答 1

0

编辑：更新了一些代码块以使它们真正起作用（！），添加了有关放置脚本的位置的注释并包括了一个 jsFiddle

jsFiddle 链接

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

一点点研究就会有很长的路要走。

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

在 JS/jQuery 中绑定箭头键

jQuery动画.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>

另外，建议根据W3 规范决定使用单引号' 还是双引号。大多数人使用双引号。"

单引号和双引号（' vs "）

于 2013-08-08T13:07:42.123 回答