ホームページ > ウェブフロントエンド > jsチュートリアル > 初心者向け Javascript 文字列の連結と変数の適用

初心者向け Javascript 文字列の連結と変数の適用

coldplay.xixi
リリース: 2020-12-07 17:47:58
転載
4187 人が閲覧しました

javascript 文字列のスプライシングと変数の適用の学習に関するコラムの紹介

初心者向け Javascript 文字列の連結と変数の適用

##関連する無料学習の推奨事項:

javascript (ビデオ)

1. コースの概要

文字列のスプライシング ( ) 学習とapplication

飛行機戦争ゲームにおける座標変換の応用

2.1 文字列の結合

    JS で " " 記号を使用する、文字列、変数を連結する、価値観など

2.2 警告ボックスに友達の数を表示します。

警告ボックスに友達の数を表示します。表示効果は次のとおりです。

友達の数を表す変数 friends を宣言します。警告ボックスに「友達の数は 7 です」と表示します。文字列の結合文字「 」を使用します。コードは次のとおりです。'

var friends = 7;
alert("我的朋友数量为:" +friends);
ログイン後にコピー

2.3 警告ボックスに年齢を表示します。

変数 age を宣言し、それをあなたの年齢に割り当てます。コードは次のとおりです。

var age = 23;
ログイン後にコピー

警告ボックスに「I」を表示します。年齢は 23 インチです。文字列結合文字「 」を使用します。コードは次のとおりです。

alert("我的年龄" + age);
ログイン後にコピー

表示効果は次のとおりです

#2.4 航空機戦闘をキャンバス上に表示するゲームのスコア

##変数スコアを宣言し、ゲームのスコアに代入するコードは次のとおりです。

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 に移動すると、座標の Han 値が 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);
ログイン後にコピー

これで終わりです。 Javascript初心者のための文字に関する記事 以上で文字列の連結と変数の適用についての記事を終わります。

関連する無料学習の推奨事項:

php プログラミング

(ビデオ)

以上が初心者向け Javascript 文字列の連結と変数の適用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jb51.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート