<>1.课程大纲

* if语句的基本用法
* 判断真假
* ==表示是否相等
<>2.1 if语句

* if语句:用来做条件判断。
* if语句的语法结构,如下所示: if(①){ ② }
*
if关键字后面有一对小括号,小括号后面是一对大括号,①处放置判断条件,②处放置的是条件成立后执行的代码。

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

*
使用if语句,判断是否为true。如果isFit为true,则执行if大括号里的语句,代码如下
var isFit = true; if(isFit){ alert("输出为True"); }
* 执行结果

* 如果答案正确,分数加1 声明变量 score表示分数,声明变量 answer表示答案,如果答案正确分数加1,使用if语句判断分数是否加1,代码如下:
var score =10; var answer = true; if(answer){ score = score + 1; } alert("分数" +
score);
* 代码执行结果如下

* 从上述代码可以看出,变量可以作为if语句的判断条件
<>2.2 表达式判断真假

* 声明两个变量a、b并分别赋值,请看下列代码: var a = 10; var b = 20;
* (大于)>、(小于)<的作用:比较两个数的大小
* a<b相当于10<20结果为true
* a>b相当于10>20结果为false
* (大于等于)>=、(小于等于)<=的作用:一个数是否大于等于另一个数/一个数是否小于等于一个数。a >=
b相当于a>b或者a==b,其中有一个表达式为真,a>=b的结果为true,如果两个表达式都为假,a>=b的结果为 false。
* a<=b相当于a<b或者a==b,其中有一个表达式为真,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"); }
* 执行结果

* 用if语句判断两个变量是否相等,需要先声明两个变量,代码如下 var i = 8; var j = 10; if(i == j){ alert(
"变量i和j相等"); }
* 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)
*
以上代码实现了让背景和飞机向下移动,①处让背景每隔10亳秒重新绘制一次,②处是每隔10亳秒背景向下移动1像素,③处让飞机图片每隔10亳秒重新绘制一次,④处是每隔10亳秒飞机向下移动3像素.
* 请看下图,背景图片的高度是852,通过两张背景图片坐标y值的变化,可以使两张背景图片连续交替出现,从而达到背景连续移动的效果

*
根据上述图示两张图片同步移动,当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)
* 分别绘制两张连续的背景让两张背景交替循环,①、②当图片坐标超出852时,让坐标重新回到-852位置,循环往复,便实现背景一直移动的效果。

技术
©2020 ioDraw All rights reserved
被裁半年后成功进入阿里定级P7,他是咋做到的?Java面试简历中犯的这些错,是不是也影响到了你年薪百万?JAVA面试题-Mysql数据库shardingsphere实例应用开业了!SpaceX首次正式商业载人发射升空,一文详解事件来龙去脉Django的defer和only方法详解python画桃心表白成为架构师,也不算是件难事!程序员常见逻辑题笔试题Javascript入门阶段——if语句