青少年编程
今天是有可能是同学们第一次接触编程，其实编程就是给智能设备添加思想，编程是让我们能够与机器沟通，编程会让你越来越聪明，让我们来体验一下编程的魅力吧！^ _ ^
知识目标：
认识编程的概念
学习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是每次按下方向键角色移动的举例。
大家自己修改代码试试吧~
我们离成为编程大牛更近一步了~
网友评论