[JS]第0课 坐标系与画图片

青少年编程

今天是有可能是同学们第一次接触编程，其实编程就是给智能设备添加思想，编程是让我们能够与机器沟通，编程会让你越来越聪明，让我们来体验一下编程的魅力吧！^ _ ^

知识目标：

认识编程的概念
学习JavaScript中的绘图坐标系
认识JS中的画布canvas，画笔ctx
学习drawImage画图片方法
学习draw画图，move移动方法

项目目标：

在游戏界面上画出角色，并用键盘控制角色移动

问题一：什么是编程？

编程

如今生活当中越来越多的智能设备帮助我们提高效率，让我们生活更加的便捷，例如手机购买火车票飞机票，扫码付款，网上叫出租车等，还有一些设备和软件给我们提供有趣的娱乐项目，例如手机游戏、机器人玩具等，可是，你知道这些机器设备和软件是如何产生的吗？机器人为什么能听懂人发出的命令？我们能不能自己动手开发一款好玩的游戏呢？

游戏怎么产生的？

其实呀，游戏是由程序员用电脑编写的一段程序，程序加上成百上千的图片素材共同组成了我们玩的所有游戏，当然也包括其他软件。所以想要创造自己的专属游戏，就要学习编程。

编程

编程是使用一门计算机语言将我们的想法告诉电脑应该如何去做事，编程是一件很酷的事情，我们都知道编程会用到电脑，但是除了电脑我们还要用到一个编程工具，今天我们就来认识一下JavaScript这款工具。

一门编程语言

计算机英语

draw画、image图片、canvas画布、enemy敌人

问题二：什么是坐标系？

我们去电影院看电影，电影票上的座位号一般写的是第几排第几号。我们很容易就找到了自己的座位。

电影院座位

我们的坐标系就是这样一个系统，让我们通过两个数字确定一个位置。

坐标系

认识画布canvas

在JavaScript中我们可以创造一个画布，就像创建一个手机屏幕一样

<canvas 
  id="canvas"
  style="border:2px solid red;"
  width=“480"
  height=“650">
</canvas>

画布

创建画笔ctx

我们可以创造一个画笔，可以用来写文字和画图片

var ctx = canvas.getContext("2d");

练习一：画图片

ctx.drawImage( enemy,  300  ,200  );

代码中，ctx是我们创建的画笔，drawImage是画图片方法，小括号里面是传入的三个参数，告诉电脑你要画哪个图片，画在哪个位置；enemy是图片的名称，300是图片在画布上位置的X坐标，200是图片的Y坐标。

画图片

练习二：移动

好啦，我们可以把任意的图片画到浏览器上了，下一步我们还能让这些图片动起来。

让图片移动

move是移动的意思，小括号中的2是速度的值，数字越大角色移动的越快，10是每次按下方向键角色移动的举例。
大家自己修改代码试试吧~
我们离成为编程大牛更近一步了~