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, x, y);
y=y+3;
},10);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/208762.html
標籤：其他