快捷導(dǎo)航

Javascript新手入門(mén)之字符串拼接與變量的應(yīng)用

更新時(shí)間：2020年12月03日 14:52:17 作者：朝花夕拾明月夜

這篇文章主要給大家介紹了關(guān)于Javascript新手入門(mén)之字符串拼接與變量應(yīng)用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 課程大綱

字符串拼接（+）的學(xué)習(xí)和應(yīng)用
坐標(biāo)變換在飛機(jī)大戰(zhàn)游戲中的應(yīng)用

2.1 字符串的拼接

在JS中使用“+"號(hào)，連接字符串、變量、數(shù)值等。

2.2 在警告框上顯示朋友的數(shù)量

在警告框上顯示朋友的數(shù)量，顯示效果如下

聲明變量 friends表示朋友的數(shù)量，在警告框上顯示“我的朋友數(shù)量為：7",使用字符串拼接符"+" ,代碼如下‘

var friends = 7;
alert("我的朋友數(shù)量為:" +friends);

2.3 在警告框上顯示自己的年齡

聲明變量age，并且賦值為自己的年齡，代碼如下:

var age = 23;

在警告框上顯示“我的年齡為：23”，使用字符串拼接符“+”，代碼如下：

alert("我的年齡" + age);

顯示效果如下

2.4 在畫(huà)布上顯示飛機(jī)大戰(zhàn)游戲的分?jǐn)?shù)

聲明變量 score，并且賦值為游戲的分?jǐn)?shù)，代碼如下：

var score = 95;

聲明變量x，并且賦值為文字的X坐標(biāo)，代碼如下：

var x = 50;

聲明變量y，并且賦值為文字的Y坐標(biāo)，代碼如下：

var y = 50;

使用ctx的font屬性設(shè)置文字的大小和字體，代碼如下：

ctx.font = "30px 微軟雅黑";

在畫(huà)布上顯示“分?jǐn)?shù)：98",使用 fillText方法和字符串拼接符"+",代碼如下:

var score = 95;
var x = 50;
var y = 50;
ctx.font = "30px 微軟雅黑";
ctx.fillText("分?jǐn)?shù)：" + score,x,y);

代碼運(yùn)行結(jié)果如下

3.1 坐標(biāo)的變化

觀察下圖，小人從A點(diǎn)移動(dòng)到B點(diǎn)，坐標(biāo)是如何變化的？

從圖可以看出，小人從A點(diǎn)移動(dòng)到B點(diǎn)，坐標(biāo)X值增加了4, Y值沒(méi)有變。

觀察下圖，小人從A點(diǎn)移動(dòng)到B點(diǎn)，坐標(biāo)是如何變化的？

從圖可以看出，小人從A點(diǎn)移動(dòng)到B點(diǎn)，坐標(biāo)漢值增加了3, y 值增加了2 .

背景和飛機(jī)移動(dòng)

使背景和飛機(jī)同時(shí)的坐標(biāo)變化規(guī)律是：背景和飛機(jī)的X坐標(biāo)的值不變，Y坐標(biāo)的值不斷的增加；

如果想讓飛機(jī)比背景移動(dòng)的快，則在相同時(shí)間內(nèi)，飛機(jī)的Y坐標(biāo)増加值比背景的Y坐標(biāo)増加值大。

背景和飛機(jī)移動(dòng)的代碼如下（其中：x1、y1表示背景的坐標(biāo)；x、y表示飛機(jī)的坐標(biāo)）:

var x1 = 0;
var y1 = 0;
var x = 200;
var y = 0;
setInterval(function(){
	ctx.drawImage(background, x1, y1);
	y1=y1+1;
	ctx.drawlmage(enemy, x, y);
	y=y+3;
},10);

到此這篇關(guān)于Javascript新手入門(mén)之字符串拼接與變量應(yīng)用的文章就介紹到這了,更多相關(guān)Javascript字符串拼接與變量的應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: