Javascript新手入門之字符串拼接與變量的應用
1. 課程大綱
字符串拼接（+）的學習和應用
坐標變換在飛機大戰(zhàn)游戲中的應用
2.1 字符串的拼接
- 在JS中使用“+"號，連接字符串、變量、數(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 在畫布上顯示飛機大戰(zhàn)游戲的分數(shù)
聲明變量 score，并且賦值為游戲的分數(shù)，代碼如下：
var score = 95;
聲明變量x，并且賦值為文字的X坐標，代碼如下：
var x = 50;
聲明變量y，并且賦值為文字的Y坐標，代碼如下：
var y = 50;
使用ctx的font屬性設置文字的大小和字體，代碼如下：
ctx.font = "30px 微軟雅黑";
在畫布上顯示“分數(shù)：98",使用 fillText方法和字符串拼接符"+",代碼如下:
var score = 95;
var x = 50;
var y = 50;
ctx.font = "30px 微軟雅黑";
ctx.fillText("分數(shù)：" + score,x,y);
代碼運行結果如下
3.1 坐標的變化
觀察下圖，小人從A點移動到B點，坐標是如何變化的？
從圖可以看出，小人從A點移動到B點，坐標X值增加了4, Y值沒有變。
觀察下圖，小人從A點移動到B點，坐標是如何變化的？
從圖可以看出，小人從A點移動到B點，坐標漢值增加了3, y 值增加了2 .
背景和飛機移動
使背景和飛機同時的坐標變化規(guī)律是：背景和飛機的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);
到此這篇關于Javascript新手入門之字符串拼接與變量應用的文章就介紹到這了,更多相關Javascript字符串拼接與變量的應用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序canvas動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
在JavaScript中通過URL傳遞漢字的方法...2007-04-04
在項目中我們往往要做很多很多的空值判斷進行容錯處理,往往伴隨著三目運算、與或、if else來使用,下面這篇文章主要給大家介紹了關于JavaScript中?.?和??分別是什么的相關資料,需要的朋友可以參考下2023-02-02
詳解如何使用JavaScript獲取自動消失的聯(lián)想詞
前幾天在做數(shù)據(jù)分析時,我嘗試獲取某網(wǎng)站上輸入搜索詞后的聯(lián)想詞,輸入搜索詞后會彈出一個顯示聯(lián)想詞的框,有趣的是,輸入框失去焦點后,聯(lián)想詞彈框就自動消失了,這種情況下該怎么辦呢,所以本文給大家介紹了如何使用JavaScript獲取自動消失的聯(lián)想詞,需要的朋友可以參考下2024-06-06
???????分享7?個實用?TypeScript?單行代碼
這篇文章主要介紹了???????分享7?個實用?TypeScript?單行代碼，其中包括泛型、斷言等高級用法，需要的小伙伴可以參考一下，希望對你的學習有所幫助2022-05-05
這篇文章主要介紹了JavaScript中的return布爾值的用法和原理解析,需要的朋友可以參考下2017-08-08
JS和css實現(xiàn)檢測移動設備方向的變化并判斷橫豎屏幕
這篇文章主要介紹了JS和css實現(xiàn)檢測移動設備方向的變化并判斷橫豎屏幕,本文分別給出實現(xiàn)代碼,需要的朋友可以參考下2015-05-05
html+css+js實現(xiàn)canvas跟隨鼠標的小圓特效源碼
這篇文章主要介紹了html+css+js實現(xiàn)canvas跟隨鼠標的小圓特效源碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
js 模擬實現(xiàn)類似c#下的hashtable的簡單功能代碼
越來越感覺js對集合的處理沒有c#強大。比如在實際開發(fā)中，經(jīng)常用到在一維數(shù)組或者二維數(shù)組里取某一個滿足某些條件的項，通常的處理方式就是遍歷數(shù)組，對比條件，匹配就取出，然后結束循環(huán)。2010-01-01
這篇文章主要介紹了BootStrap入門教程(二)之固定的內置樣式的相關資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09