1. 課程大綱

字串拼接（+）的學習和應用
座標變換在飛機大戰遊戲中的應用

2.1 字串的拼接

• 在JS中使用“+"號，連線字串、變數、數值等。
  

2.2 在警告框上顯示朋友的數量

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

宣告變數 friends表示朋友的數量，在警告框上顯示“我的朋友數量為：7",使用字串拼接符"+",程式碼如下‘

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

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

宣告變數age，並且賦值為自己的年齡，程式碼如下:

var age = 23;

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

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

顯示效果如下

2.4 在畫布上顯示飛機大戰遊戲的分數

宣告變數 score，並且賦值為遊戲的分數，程式碼如下：

var score = 95;

宣告變數x，並且賦值為文字的X座標，程式碼如下：

var x = 50;

宣告變數y，並且賦值為文字的Y座標，程式碼如下：

var y = 50;

使用ctx的font屬性設定文字的大小和字型，程式碼如下：

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

在畫布上顯示“分數：98",使用 fillText方法和字串拼接符"+",程式碼如下:

var score = 95;
var x = 50;
var y = 50;
ctx.font = "30px 微軟雅黑";
ctx.fillText("分數：" + score,x,y);

程式碼執行結果如下

3.1 座標的變化

觀察下圖，小人從A點移動到B點，座標是如何變化的？

從圖可以看出，小人從A點移動到B點，座標X值增加了4,Y值沒有變。

觀察下圖，小人從A點移動到B點，座標是如何變化的？

從圖可以看出，小人從A點移動到B點，座標漢值增加了3,y 值增加了2 .

背景和飛機移動

使背景和飛機同時的座標變化規律是：背景和飛機的X座標的值不變，Y座標的值不斷的增加；

如果想讓飛機比背景移動的快，則在相同時間內，飛機的Y座標増加值比背景的Y座標増加值大。

背景和飛機移動的程式碼如下（其中：x1、y1表示背景的座標；x、y表示飛機的座標）:

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,y);
	y=y+3;
},10);

到此這篇關於Javascript新手入門之字串拼接與變數應用的文章就介紹到這了,更多相關Javascript字串拼接與變數的應用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！