当前位置： 文江博客话题详情

如何使用箭头键移动图像javascript

发布于 2024-12-01 19:25:47 字数 3970 浏览 0 评论 0原文

我最近开始开发一个 JavaScript 小游戏，只是为了好玩。这个想法是你用箭头键（或 awsd 或我不在乎什么）在屏幕上的一个框中控制一个小点。然后，小矩形会在盒子的所有边缘上随机生成，并在盒子上前进。你必须避免与他们接触。事实证明，这个项目比我预想的要困难，而且我无法让这个动作正常工作。如果你能帮助我，那就太好了。另外，请随意接受这个概念以及我迄今为止所做的一切，并用它做任何你想做的事。我很想看看你的结果。下面是我用于生成的代码，没有任何移动脚本。我使用这段代码的基本思想来做动作：

var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 300;  //Ending Location - left
var dest_y = 300;  //Ending Location - top
var interval = 2; //Move 2px every initialization

function moveImage() {
    //Keep on moving the image till the target is achieved
    if(x<dest_x) x = x + interval; 
    if(y<dest_y) y = y + interval;

    //Move the image to the new location
    document.getElementById("ufo").style.top  = y+'px';
    document.getElementById("ufo").style.left = x+'px';

    if ((x+interval < dest_x) && (y+interval < dest_y)) {
        //Keep on calling this function every 100 microsecond 
        //  till the target location is reached
        window.setTimeout('moveImage()',100);
    }
}

主体：

<html>
<head>
    <style type="text/css">
        html::-moz-selection{
            background-color:Transparent;
        }

        html::selection {
            background-color:Transparent;
        }
        img.n {position:absolute; top:0px; width:5px; height:10px;}
        img.e {position:absolute; right:0px; width:10px; height:5px;}
        img.s {position:absolute; bottom:0px; width:5px; height:10px;}
        img.w {position:absolute; left:0px; width:10px; height:5px;}
        #canvas {
            width:300px;
            height:300px;
            background-color:black;
            position:relative;
        }
    </style>
    <script type="text/javascript">
    nmecount=0
        function play(){
            spawn()
            var t=setTimeout("play()",1000);
        }
        function spawn(){
            var random=Math.floor(Math.random()*290)
            var side=Math.floor(Math.random()*5)
            var name=1
            var z=10000
            if (side=1)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 'n');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'left:'+random+'px;');
            nme.onload = moveS;
            document.getElementById("canvas").appendChild(nme);
            }
            if (side=2)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 'e');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'top:'+random+'px;');
            nme.onload = moveW;
            document.getElementById("canvas").appendChild(nme);
            }
            if (side=3)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 's');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'left:'+random+'px;');
            nme.onload = moveN;
            document.getElementById("canvas").appendChild(nme);
            }
            if (side=4)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 'w');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'top:'+random+'px;');
            nme.onload = moveE;
            document.getElementById("canvas").appendChild(nme);
            }
        name=name+1
        }
    </script>
</head>
<body onLoad="play()">
<div id="canvas">
<img id="a" src="1.png" style="position:absolute; z-index:5; left:150px; top:150px; height:10px; width=10px;" />
<button onclick="moveleft()"><</button>
</body>
</html>
原文

I recently began developing a little javascript game, just for fun. The idea was that you controlled a little dot with the arrow keys (or awsd or i don't care what) within a box on the screen. Little rectangles would then randomly spawn on all edges of the box and progress across it. you have to avoid contact with them. The project turned out to be harder than I expected and I couldn't get the movement to work right. If you could help me with that that would be great. also, feel free to take the concept and what little I have done so far and do whatever you want with it. I would be interested to see your results. Below is the code I used for the spawns without any of the movement scripts. I was using the basic idea of this code to do the movement:

var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 300;  //Ending Location - left
var dest_y = 300;  //Ending Location - top
var interval = 2; //Move 2px every initialization

function moveImage() {
    //Keep on moving the image till the target is achieved
    if(x<dest_x) x = x + interval; 
    if(y<dest_y) y = y + interval;

    //Move the image to the new location
    document.getElementById("ufo").style.top  = y+'px';
    document.getElementById("ufo").style.left = x+'px';

    if ((x+interval < dest_x) && (y+interval < dest_y)) {
        //Keep on calling this function every 100 microsecond 
        //  till the target location is reached
        window.setTimeout('moveImage()',100);
    }
}

main body:

<html>
<head>
    <style type="text/css">
        html::-moz-selection{
            background-color:Transparent;
        }

        html::selection {
            background-color:Transparent;
        }
        img.n {position:absolute; top:0px; width:5px; height:10px;}
        img.e {position:absolute; right:0px; width:10px; height:5px;}
        img.s {position:absolute; bottom:0px; width:5px; height:10px;}
        img.w {position:absolute; left:0px; width:10px; height:5px;}
        #canvas {
            width:300px;
            height:300px;
            background-color:black;
            position:relative;
        }
    </style>
    <script type="text/javascript">
    nmecount=0
        function play(){
            spawn()
            var t=setTimeout("play()",1000);
        }
        function spawn(){
            var random=Math.floor(Math.random()*290)
            var side=Math.floor(Math.random()*5)
            var name=1
            var z=10000
            if (side=1)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 'n');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'left:'+random+'px;');
            nme.onload = moveS;
            document.getElementById("canvas").appendChild(nme);
            }
            if (side=2)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 'e');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'top:'+random+'px;');
            nme.onload = moveW;
            document.getElementById("canvas").appendChild(nme);
            }
            if (side=3)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 's');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'left:'+random+'px;');
            nme.onload = moveN;
            document.getElementById("canvas").appendChild(nme);
            }
            if (side=4)
            {
            var nme = document.createElement('img');
            nme.setAttribute('src', '1.png');
            nme.setAttribute('class', 'w');
            nme.setAttribute('id', name);
            nme.setAttribute('style', 'top:'+random+'px;');
            nme.onload = moveE;
            document.getElementById("canvas").appendChild(nme);
            }
        name=name+1
        }
    </script>
</head>
<body onLoad="play()">
<div id="canvas">
<img id="a" src="1.png" style="position:absolute; z-index:5; left:150px; top:150px; height:10px; width=10px;" />
<button onclick="moveleft()"><</button>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

↘人皮目录ツ 2024-12-08 19:25:47

我无法弄清楚你的游戏是关于什么的，所以不知道如何处理该代码。然而，既然你提到你在运动方面遇到了麻烦，我就专门为你编写了一个快速的 JavaScript 运动引擎，包括加速和减速。使用箭头键移动。以下代码代表完整的 HTML 文档，因此请将其复制并粘贴到空白文本文件中并另存为 .html。并确保在与该文件相同的文件夹中有一个名为“1.png”的 10x10 图像。

<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 = 490; // 10 pixels for character's width
var maxy = 490; // 10 pixels for character's width

// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;

function slowDownX()
{
  if (xspeed > 0)
    xspeed = xspeed - 1;
  if (xspeed < 0)
    xspeed = xspeed + 1;
}

function slowDownY()
{
  if (yspeed > 0)
    yspeed = yspeed - 1;
  if (yspeed < 0)
    yspeed = yspeed + 1;
}

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 - 1,-1*maxSpeed);
  if (downPressed == 1)
    yspeed = Math.min(yspeed + 1,1*maxSpeed)
  if (rightPressed == 1)
    xspeed = Math.min(xspeed + 1,1*maxSpeed);
  if (leftPressed == 1)
    xspeed = Math.max(xspeed - 1,-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='gray'>

   <!-- The Level -->
   <div style='width:500;height:500;position:absolute;left:0;top:0;background:black;'>
   </div>

   <!-- The Character -->
   <img id='character' src='1.png' style='position:absolute;left:100;top:100;height:10;width:10;'/>

</body>

</html>

它的工作原理如下：有一个游戏循环，一旦主体加载就会被调用。该游戏循环每 10 毫秒调用一次，以实现流畅的动画。虽然由于运行时速度的原因，它实际上可能不会每 10 毫秒循环一次，但如此低的值将确保帧速率与任何浏览器一样平滑。

在游戏循环中，我们根据对象的当前速度来操纵对象的 x 和 y 位置。简单：将 x 速度添加到 x 位置，将 y 速度添加到 y 位置。然后，我们根据当前的 x 和 y 坐标更改元素的实际位置。

为了操纵 x 和 y 速度，我们使用事件处理程序获取键盘输入。根据按键代码，我们设置一个变量来告诉游戏按键是按下还是按下。根据按键是向下还是向上，我们将对象加速或减速到最大速度。对于更渐进的加速和减速，可以使用浮点值。

通过检查代码，您应该能够了解这个简单引擎的要点。希望这将帮助您实现自己的游戏运动引擎。

I can't figure out what your game is about, and so don't know what to do with that code. However, since you mentioned you were having trouble with movement, I wrote a quick JavaScript movement engine just for you, complete with acceleration and deceleration. Use the arrow keys to move. The following code represents a complete HTML document, so copy and paste it into a blank text file and save as .html. And make sure you have a 10x10 image called '1.png' in the same folder as the file.

<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 = 490; // 10 pixels for character's width
var maxy = 490; // 10 pixels for character's width

// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;

function slowDownX()
{
  if (xspeed > 0)
    xspeed = xspeed - 1;
  if (xspeed < 0)
    xspeed = xspeed + 1;
}

function slowDownY()
{
  if (yspeed > 0)
    yspeed = yspeed - 1;
  if (yspeed < 0)
    yspeed = yspeed + 1;
}

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 - 1,-1*maxSpeed);
  if (downPressed == 1)
    yspeed = Math.min(yspeed + 1,1*maxSpeed)
  if (rightPressed == 1)
    xspeed = Math.min(xspeed + 1,1*maxSpeed);
  if (leftPressed == 1)
    xspeed = Math.max(xspeed - 1,-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='gray'>

   <!-- The Level -->
   <div style='width:500;height:500;position:absolute;left:0;top:0;background:black;'>
   </div>

   <!-- The Character -->
   <img id='character' src='1.png' style='position:absolute;left:100;top:100;height:10;width:10;'/>

</body>

</html>

It works as follows: There is a game loop that gets called as soon as the body loads. This game loop calls itself every 10 millis for smooth animation. While it might not actually loop every 10 millis because of run-time speeds, such a low value will ensure that the frame rate is as smooth as can be for any browser.

Within the game loop we manipulate the x and y position of the object based on its current speed. Simple: add x speed to x position, and y speed to y position. Then, we change the actual position of the element based on the current x and y coordinates.

To manipulate the x and y speeds, we take keyboard input using event handlers. Based on the key code, we set a variable which tells the game if a key is down or up. Based on whether the key is down or up, we accelerate or decelerate the object up to the maximum speed. For more gradual speed-ups and slow-downs, floating point values can be used.

You should be able to get the gist of this simple engine by examining the code. Hopefully this will help you in implementing your own movement engine for the game.

回复 原文
~没有更多了~

关于作者

甩你一脸翔

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文