个人中心
gpt4 book ai didi

javascript - 使用Javascript左右摆动图像？

转载 作者：行者123 更新时间：2023-12-03 09:45:55 25 4
gpt4 key购买 nike

我有这个代码，用于一个简单的 UFO 射击游戏。我想尝试让它左右、上下摆动。问题是，到目前为止，我只能让它在上下振荡的同时连续向左循环。我想要发生的是让图像到达屏幕的右侧，然后在到达屏幕后移回左侧，然后移回右侧，等等。

var timer1 = null;
var el = null;
var score = 0;
var shots = 0;

function moveIt() {
  if (parseInt(el.style.left) > (screen.width - 50))
    el.style.left = 0;
  el.style.left = parseInt(el.style.left) + 6 + 'px';
  el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left) / 50)) + 'px';
  timer1 = setTimeout(moveIt, 25);
}

function scoreUp() {
  score++;
}

function scoreboard() {
  document.getElementById("score").innerHTML = "Shots: " + shots + " Score: " + score;
}
window.onload = function() {
  el = document.getElementById("img1");
  el.onclick = scoreUp;
  document.getElementById("range").onclick = function() {
    shots++;
    scoreboard();
  }
  scoreboard();
  el.style.left = '50px';
  moveIt();
}
#range {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(http://i.imgur.com/jmwvwDs.jpg);
  cursor: crosshair;
  width: 100%;
  height: 500px;
}
#img1 {
  position: absolute;
  border: none;
  left: 0px;
  top: 100px;
  padding: 10px;
}
#score {
  font: 16px normal arial, verdana, sans-serif;
  color: white;
  padding: 10px;
}

感谢任何帮助!

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Space Shooter</title>
        <style>
            #range {
                position:absolute;
                top: 0px;
                left: 0px;
                background: url(http://i.imgur.com/jmwvwDs.jpg);
                cursor: crosshair;
                width: 100%;
                height: 500px;
            }
            #img1 {
                position:absolute;
                border:none;
                left: 0px;
                top: 100px;
                padding: 10px;
            }
            #score {
                font: 16px normal arial, verdana, sans-serif;
                color: white;
                padding: 10px;
            }
        </style>
        <script>
            var timer1 = null;
            var el = null;
            var score = 0;
            var shots = 0;
            function moveIt() {
                if(parseInt(el.style.left) > (screen.width - 50))
                el.style.left = 0;
                el.style.left = parseInt(el.style.left) + 6 + 'px';
                el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left)/50)) + 'px';
                timer1 = setTimeout(moveIt, 25);
            }
            function scoreUp() {
                score++;
            }
            function scoreboard() {
                document.getElementById("score").innerHTML = "Shots: " + shots + " Score: " + score;
            }
            window.onload = function() {
                el = document.getElementById("img1");
                el.onclick = scoreUp;
                document.getElementById("range").onclick = function() {
                    shots++;
                    scoreboard();
                }
                scoreboard();
                el.style.left = '50px';
                moveIt();
            }
        </script>
    </head>
    <body>
        <div id="range">
            <div id="score"></div>
            <img alt="Fire!" id="img1" src="http://imgur.com/wPFsjCj.png" />
        </div>
    </body>
</html>

最佳答案

如果你应用一些基本的数学知识，这种事情就会变得更容易、更简洁。我强烈建议学习如何尽可能多地使用三 Angular 、几何和计算，使用这些东西的方法并不总是显而易见的。

在这里，我将敌人的移动设置为几个三 Angular 函数。

    var timer1 = null;
    var ticks_elapsed = 0;
    //The coordinates you want the thing to circle around.
    var originx = 150;
    var originy = 150;
    //how far you want it to be from the origin as it circles.
    var radius  = 100;
    //how fast you want it to go.  
    var speed = .09;

    var el = null;
    var score = 0;
    var shots = 0;
    function moveIt() {
        ticks_elapsed++;
        el.style.left = (originx + Math.cos(timer1 * speed) * radius) + 'px';
        el.style.top  = (originy + Math.sin(timer1 * speed) * radius) + 'px';
        timer1 = setTimeout(moveIt, 25);
    }
    function scoreUp() {
        score++;
    }
    function scoreboard() {
        document.getElementById("score").innerHTML = "Shots: " + shots + " Score: " + score;
    }
    window.onload = function() {
        el = document.getElementById("img1");
        el.onclick = scoreUp;
        document.getElementById("range").onclick = function() {
            shots++;
            scoreboard();
        }
        scoreboard();
        el.style.left = '50px';
        moveIt();
    }

另一个例子，如果你想给它一个椭圆运动而不是圆形运动，你可以这样做:

el.style.left = (originx + Math.cos(timer1 * speed) * radius) + 'px';
el.style.top  = (originy + Math.sin(timer1 * speed) * radius * .5) + 'px';

0.5 导致半径参数仅在 y 轴上应用 50%，因此对象将在高度仅为宽度的 50% 的椭圆中移动。

我还意识到这只是玩玩，但如果您想做任何更复杂的事情，我强烈建议您学习使用 canvas 元素，尤其是 window.requestAnimationFrame功能，它将使您的所有动画更加流畅。

编辑:噢，好吧，抱歉，我误会了。

在这种情况下，您将需要跟踪对象的行进方向。对于一个基本示例，请将 moveIt 函数替换为:

//define your variables outside of this function
var xspeed = 6;
var yspeed = 6;

//defining these outside of the CSS properties makes it easier to keep track of,
//and we don't have to convert from strings all the time
var x = 0;
var y = 0;

function moveIt() {

    if (x < 0 || x > window.innerWidth)
        xspeed = xspeed * -1; //multiplying it by -1 converts it to its opposite no matter what
    if (y < 0 || y > window.innerHeight)
        yspeed = yspeed * -1;

    x = x + xspeed;
    y = y + yspeed;

    el.style.left = x + 'px';
    el.style.top  = y + 'px';
    timer1 = setTimeout(moveIt, 25);
}

关于javascript - 使用Javascript左右摆动图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31034839/

25 4 0
文章推荐： javascript - 为什么我的 asp 文件上传控件文本框是可点击的？
文章推荐： javascript - 不使用 eval( ) 从表单输入计算数据
文章推荐： javascript - Angular 模块注入(inject)错误
文章推荐： javascript - 如何将脚本挂接到另一个页面？ (javascript)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com