Javascript新手入门之字符串拼接与变量的应用


Posted in Javascript onDecember 03, 2020

1. 课程大纲

字符串拼接(+)的学习和应用
坐标变换在飞机大战游戏中的应用

2.1 字符串的拼接

  • 在JS中使用“+"号,连接字符串、变量、数值等。

2.2 在警告框上显示朋友的数量

在警告框上显示朋友的数量,显示效果如下

Javascript新手入门之字符串拼接与变量的应用

声明变量 friends表示朋友的数量,在警告框上显示“我的朋友数量为:7",使用字符串拼接符"+" ,代码如下‘

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

2.3 在警告框上显示自己的年龄

声明变量age,并且赋值为自己的年龄,代码如下:

var age = 23;

在警告框上显示“我的年龄为:23”,使用字符串拼接符“+”,代码如下:

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

显示效果如下

Javascript新手入门之字符串拼接与变量的应用

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

代码运行结果如下

Javascript新手入门之字符串拼接与变量的应用

3.1 坐标的变化

观察下图,小人从A点移动到B点,坐标是如何变化的?

Javascript新手入门之字符串拼接与变量的应用

从图可以看出,小人从A点移动到B点,坐标X值增加了4, Y值没有变。

观察下图,小人从A点移动到B点,坐标是如何变化的?

Javascript新手入门之字符串拼接与变量的应用

从图可以看出,小人从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);

到此这篇关于Javascript新手入门之字符串拼接与变量应用的文章就介绍到这了,更多相关Javascript字符串拼接与变量的应用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 省地市级联选择
Feb 07 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
js中toString()和String()区别详解
Mar 23 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
vue组件添加事件@click.native操作
Oct 30 Javascript
JavaScript canvas实现雨滴特效
Jan 10 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 #Vue.js
微信小程序实现首页弹出广告
Dec 03 #Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 #Javascript
基于javascript实现放大镜特效
Dec 03 #Javascript
javascript实现时钟动画
Dec 03 #Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 #Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 #Javascript
You might like
一个好用的PHP验证码类实例分享
2013/12/27 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
Python中常见的数据类型小结
2015/08/29 Python
浅谈Python NLP入门教程
2017/12/25 Python
python opencv实现运动检测
2018/07/10 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
简单了解Python write writelines区别
2020/02/27 Python
Django权限设置及验证方式
2020/05/13 Python
大学生的网上创业计划书
2013/12/31 职场文书
人民教师求职自荐信
2014/03/12 职场文书
地球一小时倡议书
2014/04/15 职场文书
关于安全的演讲稿
2014/05/09 职场文书
班主任寄语2016
2015/12/04 职场文书
学校运动会开幕词
2016/03/03 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS