Novice Javascript string concatenation and application of variables

javascript Column introduction to learning string splicing and variable application

##Related free learning recommendations:

javascript (Video)

1. Course Outline

String Splicing ( ) Learning and application

Application of coordinate transformation in the airplane war game

2.1 String splicing

Use the " " sign in JS, Concatenate strings, variables, values, etc.
• 
  

2.2 Display the number of friends on the warning box

Display the number of friends on the warning box, the display effect is as follows

Declare the variable friends to represent the number of friends. Display "The number of my friends is: 7" on the warning box. Use the string splicing character " ". The code is as follows'

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

2.3 Display your age on the warning box

Declare the variable age and assign it to your age. The code is as follows:

var age = 23;

Display "I" on the warning box The age is: 23", use the string splicing character " ", the code is as follows:

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

The display effect is as follows

2.4 Display the aircraft battle on the canvas The score of the game

Declare the variable score and assign it to the score of the game. The code is as follows:

var score = 95;

Declare the variable x and assign it to the X coordinate of the text. The code is as follows:

var x = 50;

Declare the variable y and assign it to the Y coordinate of the text. The code is as follows:

var y = 50;

Use the font attribute of ctx to set the size and font of the text. The code is as follows:

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

Display on the canvas "Score: 98", using fillText method and string splicing character " ", the code is as follows:

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

The code running result is as follows

3.1 Changes in coordinates

Observe the picture below. The villain moves from point A to point B. How do the coordinates change?

As can be seen from the picture, when the villain moves from point A to point B, the coordinate X value increases by 4, but the Y value does not change.

Observe the picture below. How does the coordinates change when the villain moves from point A to point B?

As can be seen from the picture, when the villain moves from point A to point B, the coordinate Han value increases by 3, and the y value increases by 2.

Background and aircraft movement

The coordinate change rule of the background and the aircraft at the same time is: the X coordinate values ​​of the background and aircraft remain unchanged, and the Y coordinate values ​​continue to increase;

If you want the aircraft to move faster than the background, then within the same time, the increase value of the Y coordinate of the aircraft is greater than the increase value of the Y coordinate of the background.

The codes for background and aircraft movement are as follows (where: x1 and y1 represent the coordinates of the background; x and y represent the coordinates of the aircraft):

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);

This concludes this article about characters for beginners to Javascript This concludes the article on string concatenation and variable application.

Related free learning recommendations:

php programming (video)

The above is the detailed content of Novice Javascript string concatenation and application of variables. For more information, please follow other related articles on the PHP Chinese website!