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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
JavaScript SHA512&SHA256加密算法详解
Aug 11 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
vue实现简单的登录弹出框
Oct 26 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
vue高德地图之玩转周边
2017/06/16 Javascript
JS实现留言板功能
2017/06/17 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
wxPython 入门教程
2008/10/07 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
pandas apply多线程实现代码
2020/08/17 Python
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
恒华伟业笔试面试题
2015/02/26 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
业务内勤岗位职责
2015/04/13 职场文书
跑吧孩子观后感
2015/06/10 职场文书
天气温馨提示语
2015/07/14 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
Python实现自动玩连连看的脚本分享
2022/04/04 Python