Question

我正在尝试在javascript中学习面向对象的编程，所以我尝试制作一个简单的游戏。我想创造一个移动的角色。 js中有代码：

  function move(event)
    {
var k=event.keyCode; 

var chr = {

    updown : function (){
            var y=0;
            if (k==38) 
                {--y;
            }else if (k==40)
                 {++y;}
            return y; 
        },

    leftright : function (){
        var x=0;
        if (k==37) 
            {--x;
        }else if (k==39) 
            {++x;}
        return x; 
            }


    };

    chrId.style.top = (chr.updown())+"px";
    chrId.style.left = (chr.leftright())+"px";

}

HTML：

    <!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="jumpOPP.css">
<script src="jumpOPP.js"></script>
</head>

<body  onkeydown="move(event)">
<img id="chrId" src="TrackingDot.png" >


</body>
</html>

和CSS：

#chrId {
    position: relative;
    top: 0px;
    left: 0px;
}

当我按住，向下，向左，向右移动时，点只移动一个地方。如何让它一直移动我拿着一些钥匙。我没有使用var char来移动它。我使用了函数move（事件），然后是一个开关，案例38,37,39和40，然后它改变了style.top，但是我无法在一个对象中创建它。

是否可以制作一个对象chr = {objekt movement，life，power ...}然后一个对象ground = {一些代码停止chr}和其他交互对象？有人可以推荐一个很好的教程吗？ :) 谢谢

Answer 1

在这里工作jsfiddle - http://jsfiddle.net/t5ya4j26/

定义范围中的局部变量时总是等于0的错误。因此，为了解决此问题，您必须获取元素的当前left和top，而不是定义x = 0和{ {1}}。

y = 0

Answer 2

我建议你使用<canvas>元素来做这样的事情。但是使用window.setInterval(function, milliseconds)让它反复运行您的移动＆＃39;函数，然后当一个键被释放时，window.onkeyup清除该间隔。

clearInterval(intervalName);

这要求您创建一个新的事件监听器。不要将事件监听器放在正文中，而是使用：

window.onkeydown = function(event) {
    var k = event.which || event.keyCode;  // This adds compatibilty across all browsers
    // Code to be run
}

Answer 3

我知道你正在寻找一个对象中的函数，但是移动一个元素非常简单快捷，我今天就为初学者游戏做了这个：

db.collection.find(
    { "book": "Harry Potter" },
    { "users.Read_it": { "$slice": 1 } }
)

如果您使用像素值移动，％符号可以替换为'px'，而'+ 3'是您希望元素每次执行移动的像素数或百分点数。

通过将“左”更改为“顶部”，可以做同样的事情。

Answer 4

我的代码可能不符合您的喜好，但我只是想证明我是如何解决这个问题的，我确信有数百种更好的方法，但这个似乎给我省了很多麻烦对于很多其他的东西。

希望我能理解这个问题和帮助，对不起，如果我不能：）

<!DOCTYPE html>
<html>

<head>
<meta charset = "utf-8">
<title> MOVEMENT </title>
</head>

<body>
<script type = "text/javascript">
//------------------------------------------------------------------------------
// VARIABLES are set here so they're GLOBAL (everything may access them)
//------------------------------------------------------------------------------

let lock_left = true
let lock_top = true
let lock_right = true
let lock_bottom = true

//------------------------------------------------------------------------------

let html; let htmls
let body; let bodys
let avatar; let avatars

//------------------------------------------------------------------------------

let avatar_x = 0
let avatar_y = 0

//------------------------------------------------------------------------------
// EVERY map will be an object, and every object needs a CREATE function that
// will happen only ONCE and an UPDATE function that will repeat itself
//------------------------------------------------------------------------------

const map_main =
{
    create: function()
        {
            html = document.querySelector( "html" ); htmls = html.style
            body = document.querySelector( "body" ); bodys = body.style
        },

    //--------------------------------------------------------------------------

    update: function()
        {
            htmls.width = "100%"
            htmls.height = "100%"
            htmls.margin = "0"

            bodys.width = "100%"
            bodys.height = "100%"
            bodys.margin = "0"

            bodys.backgroundColor = "rgb( 120, 200, 80 )"
        },
}

//------------------------------------------------------------------------------

const map_avatar =
{
    create: function()
        {
            avatar = document.createElement( "div" ); avatars = avatar.style
            body.appendChild( avatar )
        },

    //--------------------------------------------------------------------------

    update: function()
        {
            avatars.width = "64px"
            avatars.height = "64px"
            avatars.backgroundColor = "rgb( 200, 80, 120 )"

            avatars.position = "absolute"
            avatars.top = avatar_y + "px"
            avatars.left = avatar_x + "px"
        },
}

//------------------------------------------------------------------------------
// BELOW are the 2 main gears of the engine
//------------------------------------------------------------------------------

// EVERY code that only needs to happen once is called here
const master_create = function()
{
    map_main.create()
    map_avatar.create()
}

//------------------------------------------------------------------------------

// EVERYTHING that needs constant updates is called here
const master_update = function()
{
    map_main.update()
    map_avatar.update()

    movement()

    window.requestAnimationFrame( master_update )
}

//------------------------------------------------------------------------------
// BELOW is showing how the keyboard affects the locks
//------------------------------------------------------------------------------

const press = function( pressed )
{
    if( pressed.keyCode === 37 || pressed.keyCode === 69 ) lock_left = false
    if( pressed.keyCode === 38 || pressed.keyCode === 82 ) lock_top = false
    if( pressed.keyCode === 39 || pressed.keyCode === 70 ) lock_right = false
    if( pressed.keyCode === 40 || pressed.keyCode === 68 ) lock_bottom = false
}

//------------------------------------------------------------------------------

const release = function( released )
{
    if( released.keyCode === 37 || released.keyCode === 69 ) lock_left = true
    if( released.keyCode === 38 || released.keyCode === 82 ) lock_top = true
    if( released.keyCode === 39 || released.keyCode === 70 ) lock_right = true
    if( released.keyCode === 40 || released.keyCode === 68 ) lock_bottom = true
}

//------------------------------------------------------------------------------
// BELOW will check the LOCKS and use them to change AVATAR_X and AVATAR_Y
//------------------------------------------------------------------------------

const movement = function()
{
    if( lock_left === false ) avatar_x -= 10
    if( lock_top === false ) avatar_y -= 10
    if( lock_right === false ) avatar_x += 10
    if( lock_bottom === false ) avatar_y += 10
}

//------------------------------------------------------------------------------
// BELOW we call the 2 gears and everything will work
//------------------------------------------------------------------------------

master_create() // will be called only ONCE
master_update() // will repeat forever due to "window.requestAnimationFrame()"

//------------------------------------------------------------------------------
// LISTENERS should go after the engine starts rolling
//------------------------------------------------------------------------------

body.addEventListener( "keydown", press, false )
body.addEventListener( "keyup", release, false )

//------------------------------------------------------------------------------
</script>
</body>

</html>

如何使对象在js中移动？

4 个答案: