笔记练习：《Javascript入门经典（第5版）》page185_15.10_Practice_编写一个应用程序,其中包含练习(1)中的逻辑,要求用户输入两个数字,并显示它们,但-CSDN博客

本文链接：https://blog.csdn.net/nd_rrew/article/details/51131271

5.2 的代码，让目标图像在垂直和水平方向都晃动，而不是简单地从左移到右。同时，要把 Javascript 和 CSS 提取到外部文件。

尝试修改代码，添加第二个目标图像，使其具有不同的运动模式。

代码内容如下：

HTML文件

!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Space Shooter</title>
    <link rel="stylesheet" href="myCSS.cs" type="text/css" />
    <script src="myJS.js"></script>
</head>
<body>
    <div id="range">
        <div id="score"></div>
        <img src="ufo.png" alt="Fire!" id="img1">
        <img src="monster.png" alt="Fire!" id="img2">
    </div>
</body>
</html>

JS 文件

var shots = 0;//射击次数
var scoreE = 0;//UFO得分计数
var scoreM = 0;//怪兽得分计数
var timer1 = null;//计时器
var el = null;
var ml = null;
function moveIt(){
    //是图片活动
    if(parseFloat(el.style.left)>(screen.width - 400))el.style.left = 0;
    el.style.left = parseInt(el.style.left) + 6 + 'px';
    el.style.top = 100 +(80 * Math.sin(parseInt(el.style.left)/30)) + 'px';

    if(parseFloat(ml.style.left)>(screen.width - 400))ml.style.left = 0;
    ml.style.left = parseInt(ml.style.left) + 6 + 'px';
    ml.style.top = 80 +(80 * Math.cos(parseInt(ml.style.left)/80)) + 'px';

    timer1 = setTimeout(moveIt,40);
}
function scoreEUp(){
    scoreE++;
}
function scoreMUp(){
    scoreM++;
}
function scoreBoard(){
    document.getElementById("score").innerHTML = " 射击:" + shots + " UFO得分:" + scoreE + " 怪兽得分:" + scoreM;
}
window.onload = function(){
    el = document.getElementById("img1");
    el.onclick = scoreEUp;
    ml = document.getElementById("img2");
    ml.onclick = scoreMUp;
    document.getElementById("range").onclick = function(){
        shots++;
        scoreBoard();
    }
    scoreBoard();
    el.style.left = '50px';
    ml.style.left = '50px';
    moveIt();
}

CSS 文件

#range {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(space.jpg);
    cursor:crosshair;
    width: 100%;
    height: 300px;
}
#img1 {
    position: absolute;
    border: none;
    left:0px;
    top:100px;
    padding: 10px;
    width: 80px;
    height: 80px;
}
#img2 {
    position: absolute;
    border: none;
    left:0px;
    top:100px;
    padding: 10px;
    width: 100px;
    height: 70px;
}
#score {
    font: 16px normal arial,verdana,sans-serif;
    color: white;
    padding: 10px;
}