Javascript入门阶段——if语句

Javascript入门阶段——if语句

朝花夕拾明月夜 2020-11-11 20:11:36 90 收藏 2
分类专栏： JS Level1(入门课程) 文章标签： java javascript 算法 css
版权
1.课程大纲
if语句的基本用法
判断真假
==表示是否相等
2.1 if语句
if语句：用来做条件判断。
if语句的语法结构，如下所示：
if(①){
②
}
1
2
3
if关键字后面有一对小括号，小括号后面是一对大括号，①处放置判断条件，②处放置的是条件成立后执行的代码。

执行流程：当①处的判断条件为真( true )时，执行②处大括号里的代码；当①处的判断条件为假( false )时，不执行②处大括号里的代码，if语句结束。

使用if语句，判断是否为true。如果isFit为true，则执行if大括号里的语句，代码如下

var isFit = true;
if(isFit){
alert(“输出为True”);
}
1
2
3
4
执行结果
1111

如果答案正确，分数加1 声明变量 score表示分数，声明变量 answer表示答案，如果答案正确分数加1,使用if语句判断分数是否加1,代码如下：
var score =10;
var answer = true;
if(answer){
score = score + 1;
}
alert(“分数” + score);
1
2
3
4
5
6
代码执行结果如下
1111
从上述代码可以看出，变量可以作为if语句的判断条件
2.2 表达式判断真假
声明两个变量a、b并分别赋值，请看下列代码：
var a = 10;
var b = 20;
1
2
(大于）>、(小于）<的作用：比较两个数的大小
a<b相当于10<20结果为true
a>b相当于10>20结果为false
（大于等于）＞＝、（小于等于）＜＝的作用：一个数是否大于等于另一个数/一个数是否小于等于一个数。a >= b相当于a>b或者ab，其中有一个表达式为真，a>=b的结果为true，如果两个表达式都为假，a>=b的结果为 false。
a<=b相当于a<b或者ab，其中有一个表达式为真，a>=b的结果为true，如果两个表达式都为假，a>=b的结果为false。
== 号运算符作用：用于判断，判断两个数(变量、表达式)是否相等。a == b相当于10 == 20,其结果为false
!= 运算符的作用：用于判断，判断两个数(变量、表达式)是否不相等。a!=b相当于10!=20,结果为true。
用if语句判断变量是否等于100.
代码如下
var n = 100;
if(n == 100){
alert(“变量的n的值为100”);
}
1
2
3
4
执行结果
21
用if语句判断两个变量是否相等，需要先声明两个变量，代码如下
var i = 8;
var j = 10;
if(i == j){
alert(“变量i和j相等”);
}
1
2
3
4
5
if语句里的代码不会被执行，因为i与j的值不相等，判断条件为假。
2.3 背景连续移动（一）
飞机大战专题课程一(以后会发)实现了背景移动，但是，背景不是连续移动的，背景图片向下移动之后，上面就没有背景图片了，代码如下：
var x1 = 0;
var y1 = 0;
var x = 200;
var y = 0;
setInterval(function(){
①ctx.drawImage(background,x1,y1);
②y1 = y1 + 1;
③ctx.drawImage(enemy,x,y);
④y = y + 3;
},10)
1
2
3
4
5
6
7
8
9
10
以上代码实现了让背景和飞机向下移动，①处让背景每隔10亳秒重新绘制一次，②处是每隔10亳秒背景向下移动1像素，③处让飞机图片每隔10亳秒重新绘制一次，④处是每隔10亳秒飞机向下移动3像素.
请看下图，背景图片的高度是852,通过两张背景图片坐标y值的变化，可以使两张背景图片连续交替出现，从而达到背景连续移动的效果
123
根据上述图示两张图片同步移动，当y1的值増加到852时，y2的值从-852増加到0,这时为了保证图片可以连续移动，若y1的值大于852,要给y1重新赋值为-852;同样的道理，当y2的值为852时，y1的值从-852增加到0,若y2的值大于852时，要给y2重新赋值为-852,如此循环往复便可实现背景图片连续移动的效果。
2.4 实际操作
需要使用语句来对y1值和y2值做判断，还需要声明变量 height，并赋值为背景图片的高度852.具体代码如下
var x1 = 0;
var y1 = 0;
var x = 0;
var y = 0;
var height = 852;
var x2 = 0;
var y2 = -height;
setInterval(function(){
ctx.drawImage(background,x1,y1);
y1 = y1 + 1;
ctx.drawImage(background,x2,y2);
y2 = y2 + 1;
①if(y2>height){
y2 = -height;
}
②if(y1>height){
y1 = -height;
}
ctx.drawImage(enemy,x,y);
y = y + 3;
},10)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
分别绘制两张连续的背景让两张背景交替循环，①、②当图片坐标超出852时，让坐标重新回到-852位置，循环往复，便实现背景一直移动的效果。