注：
 
想慢慢学习的同学可以看我的 《python 入门到游戏实战专栏》（更新中）
 想学 C 的同学可以看《大话系列之C语言》（基本更新完）
 想学 C++ 的同学可以看《大话C++》（更新中）
 想做习题的可以看《大学生C语言作业、习题100例白话详解》
 
作者简介
 
作者名：1_bit
 
简介：CSDN博客专家，2020年博客之星TOP5，蓝桥签约作者。15-16年曾在网上直播，带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息，迷茫的你会找到答案。系列教程将会在流量降低时转为付费位置，流量多时将不会，各位抓紧时间学习哟~
 
学习开始
 
👸小媛：小 C，我想学做游戏了，有什么速成的办法吗？ 😰
 
🐰小C：没有，谢谢。
 
👸小媛：我看他们都可以，直接做一个飞机大战，说是一下子就学会了。 😨
 
🐰小C：你是想先大概过一遍内容吗？还是具体的全面的学？
 
👸小媛：我想先有一点体验感，自己学的舒服玩一下也行。
 
🐰小C：那就可以，1小时搞定。
 
👸小媛：这么快？那刚刚你又说不行。 😣
 
🐰小C：你不是全面学，只学基础核心就没啥问题。一个小时搞定还是可以做点东西的。
 
👸小媛：那就赶紧开始吧。
 
🐰小C：那我们就学 python 吧，你觉得怎么样？
 
👸小媛：可以呀，做出来游戏就可以了。
 
🐰小C：你电脑我记得有环境和编辑器，我们就用原本的就好了。
 
👸小媛：原本的是啥？
 
🐰小C：那个 vscode，我们用的库是 pygame。
 
👸小媛：唔，懂了。
 
01 hello world
 
🐰小C：那我们就从头开始学吧，首先打开我们的 vscode 创建一个文件叫做 game.py 进行代码的测试吧。
 
 
👸小媛：了解，我已经新建好了。
 
🐰小C：那我们首先写一个 hello world 吧。
 
👸小媛：hello world 是什么？ 😰
 
🐰小C：是一个经典的计算机程序，就是程序运行的时候会显示 hello world。
 
👸小媛：懂了，那怎么做呢？
 
🐰小C：首先你要知道，编程其实就是使用不同的“魔法指令”在计算机中创造不同的东西，python 用来显示内容的指令就是 print()，你用 print() 要显示什么字符串就在里面加上去就可以了。
 
👸小媛：这样吗？
 
print(helloworld)
 
🐰小C：在这里需要跟你提一点，在 python 中字符串是需要使用双引号引起来的。
 
👸小媛：懂了，你的意思是这样。
 
print("helloworld")
 
🐰小C：对的，这个时候我们点击运行按键就可以看到结果了。
 
 👸小媛：出现结果了，在这里。
 
 
02 变量
 
🐰小C：那我们继续往下讲。我们接下来学一个容器，用来存储值。
 
👸小媛：存值的内容有什么意义吗？
 
🐰小C：有呀，你想想在游戏之中其实你的血量都是存在一个容器之中，还有你的昵称，不然你觉得没有东西存那这东西怎么显示？
 
👸小媛：哈哈哈，之前不懂，现在懂了。 😂
 
🐰小C：变量也是超级简单，我们直接给变量起个名字，用个等于号就可以存值了。你现在创建一个变量你想起什么名字呢？
 
👸小媛：那就起一个名字叫做 a 就好了。
 
🐰小C：那你想在这个变量 a 里面存什么值呢？
 
👸小媛：那就存一个 10 吧。
 
🐰小C：那么代码就可以这样写。
 
a=10
 
👸小媛：就这样？ 😂
 
🐰小C：是的，我们创建一个变量直接一个名字，在这个变量名右边用一个等于号连接一个值，那么这个值就会存储到这个变量中。
 
👸小媛：真简单。 😎
 
🐰小C：那你知道怎么存储一个字符串吗？
 
👸小媛：知道呀，就这样。
 
a="1_bit"
 
🐰小C：为什么要这样写呢？
 
👸小媛：因为 a 是一个变量名，用一个等于号就可以把等于号右边的值存到左边的变量中，然后最开始你说在 python 中字符串是需要双引号标记，那就是这样写咯。
 
🐰小C：不错，理解透彻，那我们开始显示变量里面所存储的内容吧。
 
👸小媛：这个就不会了，怎么显示呢？
 
🐰小C：很简单，也是使用 print()，直接在 print() 的括号内填写变量名就可以了。
 
👸小媛：这样吗？
 
a="1_bit"
print(a)
 
🐰小C：是的。
 
👸小媛：结果出来了。
 
 
🐰小C：使用 print() 可以显示很多的内容，例如你想用字符串连接在一起显示可以使用逗号进行分隔，首先我们创建多个变量。
 
a="1_bit"
b="2_bit"
c="3_bit"
 
👸小媛：这样就可以创建几个变量了吗？ 😲
 
🐰小C：是的，python 的代码是一行行的从上往下书写，这个切记。每一句结束后就需要换到下一行去进行编写。
 
👸小媛：懂了。
 
🐰小C：那我们同时显示这几个变量的内容直接使用 print() 就可以了。在 print() 元你括号内填入几个变量使用逗号进行隔开就行。
 
a="1_bit"
b="2_bit"
c="3_bit"
print(a,b,c)
 
👸小媛：我运行后显示出来了。
 
 🐰小C：你还可以在 print() 中填入其他的字符串当作值进行输出显示。
 
👸小媛：那意思就是说使用引号把字符串引起来就可以了吧？然后使用逗号隔开？
 
🐰小C：是的，这样字符串也是值，只要填入就可以输出显示。
 
👸小媛：代码是这样，我运行出来了。
 
a="1_bit"
b="2_bit"
c="3_bit"
print("分别输出 a b c 的值："，a,b,c)
 
 
03 变量运算
 
🐰小C：其实我们的变量是可以进行相加减的，例如以下代码和结果。
 
a=11
b=2
c=31
print(a+b)
print(a-b)
print(a*c)
 
 
👸小媛：明白了，跟日常生活中的一样。
 
🐰小C：其实只是基础运算大致相同，我们可以看看下面这个示例。
 
a="11"
b="2"
c="31"
print(a+b)
print(a+b)
print(a+c)
 

 👸小媛：为什么会这样呢？
 
🐰小C：因为两个字符串之间做加法，这个加法指的是将两个字符串进行连接，因为字符串和数字是两个类型。带双引号的 11 是字符串的 11，而不是数字的 11，你得明白这一点。
 
👸小媛：哈哈哈，懂了。就是说数字也是字符，看不同形态下的表现。 😋
 
🐰小C：是的。
 
04 逻辑判断
 
🐰小C：接下来我们可以看下逻辑判断了，这个是非常重要的知识点。
 
👸小媛：是不是在游戏中用的很多？
 
🐰小C：逻辑判断你要做啥其实都用的很多。
 
👸小媛：那我就认真学习。
 
🐰小C：其实逻辑判断就像你登录游戏时，需要判断你的帐号密码一样，判断帐号密码是否正确，正确就登录游戏，错误就退出游戏，就是这个意思。
 
👸小媛：懂了。
 
🐰小C：逻辑判断在 python 中使用的是 if。我们可以把这个 if 当作是一句魔法，我们在需要逻辑判断的时候就把这个打上就可以了。
 
👸小媛：明白，就跟念咒语一样。 😂
 
🐰小C：是的。我们打上 if 后，在 if 后面加上一个条件，然后使用冒号结束，就像下面一样。
 
a=11
if a==11:
    print("a是等于11")
 
👸小媛：嗯，首先你是创建一个变量 a 存储 11 这个值，然后使用 if 语句给了一个条件，这个条件是 a==11，然后冒号结束。不过我想问一下，你在这里打了两个等于号是不是你打错了？
 
🐰小C：这个没有。在 python 中是使用两个等于号进行判断左右两边是否相等，也就是判断两个等于号的坐标 a 是否等于右边的 11。
 
👸小媛：明白了，那为什么下一句 print() 前面要空几个格呢？
 
🐰小C：你想想，如果条件正确了，是不是就执行一句话，条件错误了就应该执行另外一条代码？
 
👸小媛：是的。
 
🐰小C：其实在这里是如果这个条件正确，就执行冒号后的下一行 print("a是等于11")。前面使用几个空格的意思是将表示这条代码属于 if 这个判断结构内，和其他代码不是一个结构的东西，这样只要条件错误就不会执行 if 结构内的了，如果你放在外面就会被执行了。
 
👸小媛：懂了，你意思这样就可以标识是这个 if 结构内的东西了，是 if 这个结构内部的。
 
🐰小C：是的，运行后将会显示结果。
 
 👸小媛：我修改了 a 的值他就不会显示出来了，啥也没显示。 😨
 
a=111
if a==11:
    print("a是等于11")
 
 
🐰小C：其实我们 if 语句内可以打很多代码的，因为编程是灵活的，例如这个示例：
 
a=11
if a==11:
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
 
 
👸小媛：是不是都要空相同的空格呀？
 
🐰小C：是的，这样才表示是同一个层级。如果你乱空空格会出错的。
 
👸小媛：明白。
 
🐰小C：如果这个时候我们想知道判断错误，我们可以添加一个 else 语句，这样错误的话就是显示 else 语句内部的代码了。
 
a=111
if a==11:
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
else:
    print("判断错误")
    print("判断错误")
    print("判断错误")
 

 👸小媛：明白了，这个 else 语句一定要紧跟着在 if 语句结束后吗？而且他是顶头的没有进行空格。
 
🐰小C：是的，因为 if 和 else 是同级，如果你也空格了那不就是在 if 语句判断对后才能执行吗？这样永远就不会执行 else 语句了，并且这样写也是错误的；else 还可以紧跟在 elif 后面，当我们多条件的时候就可以使用 elif 语句。
 
👸小媛：那就举个例子吧。
 
🐰小C：那你看下面。
 
a=2
if a==11:
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
    print("a是等于11")
elif a==2:
    print("a是等于2")
    print("a是等于2")
    print("a是等于2")
elif a==3:
    print("a是等于3")
    print("a是等于3")
    print("a是等于3")
else:
    print("判断错误")
    print("判断错误")
    print("判断错误")
 
👸小媛：elif 后面跟着的就是条件吗？例如 a2 和 a3？
 
🐰小C：是的，当 if 条件判断错误后会依次进行判断，哪一个条件判断正确就执行那个条件内的代码，如果所有条件错误那么就执行 else 部分。
 
👸小媛：明白了，还有多少才能学完基础？ 😩
 
🐰小C：已经学完一半了，超级快的，哈哈哈。
 
👸小媛：好，请继续。
 
🐰小C：其实 if 还可以进行嵌套，例如下面这个代码。
 
a=2
b=3
if a==2:
    if b==3:
        print("完全符合要求")
else:
    print("第一项要求都没符合耶")
 
 
👸小媛：嵌套的意思就是在 if 里面再有一个 if 吗？
 
🐰小C：是的，但是里面的 if 也有层级，要表示是里面 if 内的代码还是需要使用几个空格间隔，依次往里缩。
 
👸小媛：明白了。
 
05 循环
 
🐰小C：接下来我们学习循环。当你想重复运行某一条或者某一段代码时我们可以使用循环节省我们的代码编写时间，例如下面这段代码。
 
i=0
while i<10:
    print("你好")
    i=i+1
 
👸小媛：你首先创建了一个变量 i，然后我就不懂了。
 
🐰小C：while 是一个循环，就跟你使用 if 一样，使用 while 表示要开始循环了；while 之后的是一个条件，也就是满足这个条件才会循环 while 循环内的代码，这个条件使用冒号结束，是不是感觉 while 的形式跟 if 语句很像呢？
 
👸小媛：是的，感觉很相同，然后最后的两个在前面空了几个格，并且使用了相同的空格，是表示是 while 循环结构内的代码吧？
 
🐰小C：是的，这个是就会执行循环，每次循环都会执行 print("你好") 和 i=i+1。由于条件是 i<10 ，i 每次循环都会加 1，第一次循环 i 是 0，第二次循环 i 是 1，然后依次类推肯定会超过 10的，这个时候就不循环了。下面就是结果。
 
 
👸小媛：明白了。循环也可以进行嵌套吧？
 
🐰小C：是的，不过我们暂时不用讲，由于是速成，所以我们在之后的游戏制作之中再做讲解。
 
👸小媛：好的。
 
06 列表
 
🐰小C：接下来我们讲一个列表。我们在进行存储值的时候使用变量是存储一个值，那么我们使用列表就可以存储多个值了。
 
a=[99,6,7,85,2,3]
print(a)
print(a[0])
print(a[4])
a[0]="你好"
print("修改后的值是：",a)
 

 🐰小C：在这里这个 a 就是列表，然后使用一个等于号，将我们想要存储的值放到一个中括号内，并且值与值之间使用逗号进行分隔，这个时候就可以创建一个列表了。
 
👸小媛：明白了，感觉挺简单的。然后 print(a) 就是显示这个列表的值了吧？ 😢
 
🐰小C：是的，然后 print(a[0]) 意思就是输出这个 a 列表内的第一个元素。在列表中 0 就表示第一个元素 99，然后 1 就表示第二个元素 6，然后以此类推，我们在输出的时候使用一个变量名，然后后面使用方括号，在方括号内写上你想显示第几个元素就可以取到这个元素然后将值进行显示输出了。
 
👸小媛：懂了，然后 a[0]="你好" 的意思就是给这个位置重新赋值？
 
🐰小C：是的，这个时候我们可以看到最后输出所有值的时候第一个元素的内容发生了改变。
 
07 列表与 for 循环
 
🐰小C：其实我们还可以使用一个循环使我们的列表一个个值进行显示，这个循环叫做 for 循环。
 
👸小媛：循环还有内容没学完吗？ 😰
 
🐰小C：是的，还有一个 for 循环没进行学习，你看下面的代码示例。
 
a=[99,6,7,85,2,3]
for v in a:
    print(v)
 

 👸小媛：每一个值都一个个输出显示了。
 
🐰小C：是的，代码 for v in a: 中的 for 表示开始使用 for 循环，接下来的 v in a 你可以理解成直接在这里创建一个变量 v，然后这个变量 v 进到 a 这个列表中一个个去取值，首先会取到最开始的值，然后每次循环就会跳到下一个值，这个时候我们就可以把这个值取出，使用 print() 就可以进行显示了。
 
👸小媛：原来是这么回事，理解了。 😂
 
08 自定义函数
 
🐰小C：接下来我们开始编写自定义的工具了，其实 print() 我们可以称为函数，函数我们可以理解成一个工具或者说一个功能。我们需要用到这些功能的时候字节拿过来用就可以了，现在我们要编写一个菜单功能，每次用到菜单就不用自己去写那么多代码，直接使用就可以。
 
👸小媛：那这样我不是可以节省很多时间了？
 
🐰小C：是的，这个就叫做自定义函数，自己编写一个函数。你可以看下面的代码示例。
 
def menu():
    print("这是一个菜单你可以进行查看")
    print("1.进入系统")
    print("2.退出系统")
    print("3.删除系统")
    print("4.退出帐号")
    print("5.关闭软件")

menu()
 
 
👸小媛：这个时候不会是上面的 print 直接显示的内容吗？
 
🐰小C：不会，我先解释一下这个的意思吧。我们可以看到 def，def 表示你开始创建一个自定义函数，def 后就是一个函数名之后使用一个括号，这是定义函数的一种形式，之后的话我们使用冒号进行结束就可以了。
 
👸小媛：例如我想创建一个函数叫做 abc，那么是不是可以这样写。
 
def abc():
 
🐰小C：是的，然后在冒号下一行开始编写这个函数的代码就可以了，一样的需要使用空格表示这个代码是属于这个函数内的内容。
 
👸小媛：明白了。
 
🐰小C：调用函数就是使用函数的意思，直接使用函数名加一对圆括号就可以使用，此时就等于运行了函数内的代码，这个时候就显示出了内容。
 
👸小媛：意思说如果不使用就不会起作用？
 
🐰小C：是的，是这个意思。
 
👸小媛：明白了。
 
🐰小C：其实函数还可以接受参数，就像你使用 print() 一样需要往里面传入数据才能显示。你自己创建一个函数也可以接受一下参数，参数其实就像你生活中用电饭锅做饭，需要有米才可以煮饭，这个米就是这个电饭锅功能的参数。
 
👸小媛：懂了，那怎么做呢？
 
🐰小C：很简单，在自定义函数的圆括号内创建变量，如果是多个就使用逗号进行间隔就可以了。
 
👸小媛：你的意思是说这样？ 😂
 
def abc(a,b):
 
🐰小C：是的，例如下面这个代码。
 
def abc(a,b):
    print(a+b)

abc(1,2)
 
 
👸小媛：这个时候 1 就等于存到 a 里面，然后 2 就等于存到了 b 里面是吧？
 
🐰小C：是的，如果你只想函数作为计算，不输出，我们可以使用一个叫做 return 的进行值的返回。例如以下代码。
 
def abc(a,b):
    return a+b

c=abc(1,2)
print(c)
 
 
👸小媛：你的意思是 return 会把 a+b 的结果给返回出去？
 
🐰小C：是的，这个时候 c 就可以进行接收，abc(1,2) 计算后就等于了 3，最后输出 c 的内容就可以看到等于 3 了。
 
👸小媛：明白了。
 
09 类和对象
 
🐰小C：我们接下来需要学习的是面向对象。
 
👸小媛：面向对象是什么呀？我没有对象。 😨
 
🐰小C：其实面向对象不是说你要有对象，其实就是我们可以创建一个类型，这个类型实例化后就是对象。
 
👸小媛：不懂，好难。😭
 
🐰小C：其实不难的，你看下面的示例。
 
class human:
    name=""
    age=0
    def say(self):
        print("hello")
    def myInfo(self):
        print("myName:",self.name,"myAge:",self.age)
 
👸小媛：完全看不懂啊，好难。
 
🐰小C：我一个个解释给你听吧。在上面代码中的 class 就是表示现在要创建一个类别，human 就是这个类别的名称。
 
👸小媛：你的意思就是 class 是关键字，后面就是这个类型的名称时候吧？
 
🐰小C：是的，在这个 human 类型中，有两个属性；一个属性叫做 name，另外一个属性叫做 age。
 
👸小媛：就跟正常变量一样，一个 name 存储的是空字符串，一个 age 存储的是年龄。
 
🐰小C：是的，在这里 name 就用来存储名称，age 用来存储年龄，接下来就由两个方法，一个叫做 say 一个叫做 myInfo。
 
👸小媛：这两个是自定义函数吧？那参数为什么是个 self 呢？
 
🐰小C：这个 self 我们可以理解成当前这个类型之中的意思，家长自定义函数的参数之中我们可以当做表示这个自定义函数是属于这个类。
 
👸小媛：你的意思就是加了 self 才表示是当前这个类型的方法？
 
🐰小C：对的，规定是这样做的。你可以看这句代码 print("myName:",self.name,"myAge:",self.age)，self就是表示当前这个类型，self.name 就表示是当前这个类型中的 name 这个变量，我们可以理解那个小数点为 “的” 的意思，self.name 就是当前类型中的 name 变量。
 
👸小媛：明白了。😂
 
🐰小C：我们接着看一下下面的使用方法。
 
class human:
    name=""
    age=0
    def say(self):
        print("hello")
    def myInfo(self):
        print("myName:",self.name,"myAge:",self.age)

xiaoM=human()
xiaoM.say()
xiaoM.myInfo()
xiaoM.name="XiaoMing"
xiaoM.age=18
xiaoM.myInfo()
 
🐰小C：xiaoM=human() 就是创建一个 human 对象。例如我们人是一个类型，那么具体到一个人就是一个对象，现在 human 这个类型创建到了一个具体对象存储在 xiaoM 这个变量之中。
 
👸小媛：唔，明白了，有了类型才能创建到一个具体的对象。
 
🐰小C：嗯，然后我们可以通过这个对象使用这个类型的方法，因为这个对象就属于这个类型。例如 xiaoM.say() 就表示使用这个类型中的 say() 方法，然后 xiaoM.myInfo() 也是；当然我们也可以使用 xiaoM.name="XiaoMing" 去赋予这个对象中这个 name 属性值，然后在使用 myinfo 进行输出，这个时候值就改变了。
 
 
👸小媛：唔，全明白了，哈哈哈。 😎
 
10 开始做游戏 pygame
 
🐰小C：接下来我们开始编写一个小游戏吧。
 
👸小媛：这么快？
 
🐰小C：是的，已经可以去写了的。首先我们需要做的是准备工作，我们在命令窗口中使用 pip 命令安装 pygame 这个游戏库，你的电脑已经有 pygame 了，那我们就不需要这一步了。
 
pip install pygame
 
 
👸小媛：嗯。
 
🐰小C：接下来我们的第一步是将 pygame 引入。
 
import pygame
 
🐰小C：import 就像你的一只手，然后 pygame 就是一个工具名，连起来就是将这个工具拿过来用。
 
👸小媛：明白了。
 
🐰小C：接下来我们就需要进行初始化。初始化就像你玩游戏需要创建一个角色一样，这就是初始化。
 
import pygame

pygame.init() 
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")
 
🐰小C：上面代码中的第二条 init 就是初始化的意思。
 
👸小媛：那个小数点是不是就表示 pygame 中的 init 方法？直接使用就可以初始化？ 😰
 
🐰小C：是的，pygame.display.set_mode((600,800)) 这句代码我们可以理解成 pygame 这个工具中有一个工具叫做 display，display 有一个g功能就是创建窗口，名叫 set_mode，我们在 set_mode 中传入这个屏幕的宽高，并且使用括号括起来宽高就可以创建出一个屏幕了，其中 600 是宽 800 是高；之后创建了屏幕后将这个屏幕给予一个变量，之后就可以通过这个变量对这个屏幕进行操作。
 
👸小媛：简单，理解起来容易。 😎
 
🐰小C：接下来那一句代码 pygame.display.set_caption("这是一个飞机游戏") ，set_caption 是 display 的另外一个功能，可以设置标题，直接将字符串当作参数传入 set_caption 就可以了。
 
👸小媛：懂了。
 
11 游戏主循环
 
🐰小C：接下来我们需要开始游戏主循环的内容，所有游戏都是通过一个循环去监听你在游戏中做了什么事，这个时候我们可以使用 while 循环给予一个 True 做条件，True 就表示永远条件正确。
 
👸小媛：你的意思就是需要创建一个循环还一直看玩家按了什么键做了什么事？
 
🐰小C：对的，你看下面代码。
 
import pygame

pygame.init() 
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")

while True:
    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            exit()
 
🐰小C：在 while 循环内有一个 for 循环用来取游戏中发生的所有事件。pygame.event.get() 将会获取到玩家做了所有的事情，通过 for 循环一个个去取，event 这个变量就分别每次取得这些内容，使用 if 判断 event 的类型 type 如果是 pygame 游戏中的退出 QUIT 那么就执行 exit() 退出整个程序。
 
12 游戏素材添加
 
👸小媛：唔，那也可以检测上下左右按键吧？这样就可以实现移动了？
 
🐰小C：是的，不过现在我们需要往这个游戏里面添加背景和角色，这些都是图片，我们可以通过加载图片资源创建背景和主角对象，我们都可以称这些元素为精灵。
 
👸小媛：精灵，好听的名字。 😢
 
🐰小C：你看下面的代码。
 
import pygame

bg=pygame.image.load(r'E:\2dsrc\src\img\bg.png')
hero=pygame.image.load(r'E:\2dsrc\src\img\hero1.png')
enemy=pygame.image.load(r'E:\2dsrc\src\img\enemy1.png')
enemy_boom=pygame.image.load(r'E:\2dsrc\src\img\enemy1_down1.png')
bullet=pygame.image.load(r'E:\2dsrc\src\img\bullet1.png')

heroX=250
heroY=680

pygame.init() 
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")

while True:
    screen.blit(bg,(0,0))
    screen.blit(hero,(heroX,heroY))
    
    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            exit()
 
🐰小C：上面的代码 pygame.image.load 就表示使用 pygame 中的 image 工具的 load 功能，load 就是加载图片的意思；在 load 方法中传入图片的路径就可以了，我在这里分别加载了 5 个图片，一个是背景图、一个是主角图、一个是敌人图、一个是敌人被击中后的爆炸图、一个是子弹图片。
 
 
👸小媛：我电脑上你是放在同样的路径下吧？
 
🐰小C：是的，如果没有图片可以私聊 bit 哥（博主 https://blog.csdn.net/A757291228），他会统一发的。
 
👸小媛：明白。
 
🐰小C：我们接着看 screen.blit(bg,(0,0)) 代码和 screen.blit(hero,(heroX,heroY)) 代码，这两句代码都是用 blit 方法，blit 方法 是 screen 的功能之一，也就是可以在屏幕中画出我们加载的图片；blit 的第一个参数是图片参数，第二个参数是整个屏幕的 x 和 y 坐标，也就是从哪里开始画；x 越大越靠右，y 越大越靠下。
 
👸小媛：那为什么我运行了代码后是一片黑屏？ 😭
 
 
🐰小C：那是因为我们需要刷新，每次循环完我们都需要刷新整个界面，否则是不会呈现画完的效果的。你在 while 循环最后加一个代码，pygame.display.update()，就如下所示。
 
import pygame

bg=pygame.image.load(r'E:\2dsrc\src\img\bg.png')
hero=pygame.image.load(r'E:\2dsrc\src\img\hero1.png')
enemy=pygame.image.load(r'E:\2dsrc\src\img\enemy1.png')
enemy_boom=pygame.image.load(r'E:\2dsrc\src\img\enemy1_down1.png')
bullet=pygame.image.load(r'E:\2dsrc\src\img\bullet1.png')

heroX=250
heroY=680

pygame.init() 
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")

while True:
    screen.blit(bg,(0,0))
    screen.blit(hero,(heroX,heroY))

    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            exit()
    pygame.display.update()
 
👸小媛：出来了耶。
 
 
13 控制角色移动
 
🐰小C：那么接下来我们来控制这个飞机左右移动吧。
 
👸小媛：期待。
 
🐰小C：我们创建一个函数，用来检测用户是否按下了上下左右。
 
import pygame

bg=pygame.image.load(r'E:\2dsrc\src\img\bg.png')
hero=pygame.image.load(r'E:\2dsrc\src\img\hero1.png')
enemy=pygame.image.load(r'E:\2dsrc\src\img\enemy1.png')
enemy_boom=pygame.image.load(r'E:\2dsrc\src\img\enemy1_down1.png')
bullet=pygame.image.load(r'E:\2dsrc\src\img\bullet1.png')

heroX=250
heroY=680
stepX=0 #此部分新增
stepY=0 #此部分新增

pygame.init() 
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")


def keydown_envent(event,stepX,stepY):#此部分新增
    if event.key == pygame.K_RIGHT:
        stepX=5
    elif event.key == pygame.K_LEFT:
        stepX=-5
    elif event.key == pygame.K_UP:
        stepY=-5
    elif event.key == pygame.K_DOWN:
        stepY=5
    return stepX,stepY


while True:
    heroX=heroX+stepX
    heroY=heroY+stepY
    
    screen.blit(bg,(0,0))
    screen.blit(hero,(heroX,heroY))

    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            exit()
        if event.type==pygame.KEYDOWN:#此部分新增
            stepX,stepY=keydown_envent(event,stepX,stepY)
    pygame.display.update()
 
🐰小C：以上代码我在新增部分添加了注释，主要添加了一个 keydown_envent 方法用来检测按下事件后的处理。我们可以看到在 for 循环事件遍历中，使用 if event.type==pygame.KEYDOWN: 检测用户是否按下键，随后我们通过这个事件传入到 keydown_envent 方法中做处理，判断用户按下的是否是右键 K_RIGHT、左键 K_LEFT、上键 K_UP、下键 K_DOWN。如果是右键那么就增加下次绘制图片的 x 坐标值，下键就增加 y 坐标值这样依次类推，所以在 while 循环中就有了下面这个代码。
 
heroX=heroX+stepX
heroY=heroY+stepY
 
👸小媛：感觉有点像那个在书上画画，r案后翻动页码每次看到图都不一样，画上去的人物就可以动了。
 
14 增加敌机
 
🐰小C：是的，就是这个原理，我们接着添加敌人。
 
import pygame,random

bg=pygame.image.load(r'E:\2dsrc\src\img\bg.png')
hero=pygame.image.load(r'E:\2dsrc\src\img\hero1.png')
enemy=pygame.image.load(r'E:\2dsrc\src\img\enemy1.png')
enemy_boom=pygame.image.load(r'E:\2dsrc\src\img\enemy1_down1.png')
bullet=pygame.image.load(r'E:\2dsrc\src\img\bullet1.png')

heroX=250
heroY=680
stepX=0 
stepY=0 

enemy_speed=2#此部分新增
enemy_objs=[]#此部分新增

pygame.init() 
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")


def keydown_envent(event,stepX,stepY):
    if event.key == pygame.K_RIGHT:
        stepX=5
    elif event.key == pygame.K_LEFT:
        stepX=-5
    elif event.key == pygame.K_UP:
        stepY=-5
    elif event.key == pygame.K_DOWN:
        stepY=5
    return stepX,stepY

def enemy_show(enemy_objs,startY=-40):#此部分新增
    if len(enemy_objs)<5:
        while len(enemy_objs)<5:
            enemy_X=random.randint(0,500)
            enemy_pos=[enemy_X,startY]
            screen.blit(enemy,enemy_pos)
            enemy_objs.append(enemy_pos)
    else:
        i=0
        for pos in enemy_objs:
            screen.blit(enemy,pos)
            enemy_objs[i]=[pos[0],pos[1]+enemy_speed]
            i=i+1
    return enemy_objs

while True:
    heroX=heroX+stepX
    heroY=heroY+stepY
    
    screen.blit(bg,(0,0))
    screen.blit(hero,(heroX,heroY))
    enemy_objs=enemy_show(enemy_objs)  #此部分新增

    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            exit()
        if event.type==pygame.KEYDOWN:#此部分新增
            stepX,stepY=keydown_envent(event,stepX,stepY)
    pygame.display.update()
 
🐰小C：以上代码中添加了一个 enemy_show 方法，enemy_show 方法传入了一个 enemy_objs 列表用来记录创建的敌人对象，enemy_show 方法接收两个参数，还有一个是默认的 Y 坐标。在 enemy_show 中，如果敌机数量小于 5 个，那么就直接使用 while 循环进行创建，并且把创建对象的 X 和 Y 值存储到 enemy_objs 列表中，之后我们只需要控制每个敌机的位置坐标就可以控制 敌机移动了。
 
if len(enemy_objs)<5:
        while len(enemy_objs)<5:
            enemy_X=random.randint(0,500)
            enemy_pos=[enemy_X,startY]
            screen.blit(enemy,enemy_pos)
            enemy_objs.append(enemy_pos)
 
👸小媛：你的意思是控制敌机移动只需要控制记录出现的坐标点进行绘制，那么就等于敌机在移动？ 😭
 
🐰小C：是的。如果已经创建了 5 个 敌机，n阿么只需要根据他们的位置坐标进行 y 轴坐标的增加就可以了，也就是 enemy_show 方法中 else 部分的内容。
 
def enemy_show(enemy_objs,startY=-40):#此部分新增
    if len(enemy_objs)<5:
        while len(enemy_objs)<5:
            enemy_X=random.randint(0,500)
            enemy_pos=[enemy_X,startY]
            screen.blit(enemy,enemy_pos)
            enemy_objs.append(enemy_pos)
    else:
        i=0
        for pos in enemy_objs:
            screen.blit(enemy,pos)
            enemy_objs[i]=[pos[0],pos[1]+enemy_speed]
            i=i+1
    return enemy_objs
 
👸小媛：唔，原来如此，那么 enemy_speed 加多少就表示速度了吧？我看你在前面定义这个值是 5。
 
🐰小C：是的。你可以运行代码试一试。
 
👸小媛：敌机下来了呢，真棒。 😎
 
 
15 加子弹
 
🐰小C：我们现在开始添加子弹吧，其实子弹添加也很简单，只需要知道我们这个主角的位置，然后使子弹在这个位置头部绘制，绘制后每次刷新后的距离都 -10 这样子弹就可以飞上去了呢。
 
👸小媛：是的，我感觉会写了。 😎
 
🐰小C：我们接着看代码吧，我们设置空格键就是子弹发射按键，这个时候我们在事件方法中添加空格事件的响应，然后绘制出一个子弹就可以了。
 
import pygame,random

bg=pygame.image.load(r'E:\2dsrc\src\img\bg.png')
hero=pygame.image.load(r'E:\2dsrc\src\img\hero1.png')
enemy=pygame.image.load(r'E:\2dsrc\src\img\enemy1.png')
enemy_boom=pygame.image.load(r'E:\2dsrc\src\img\enemy1_down1.png')
bullet=pygame.image.load(r'E:\2dsrc\src\img\bullet1.png')

heroX=250
heroY=680
stepX=0 
stepY=0 
bullets_pos=[]#此部分新增
enemy_speed=2
enemy_objs=[]

pygame.init() 
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")


def keydown_envent(event,stepX,stepY,hero_pos):
    bullet_pos=[]#此部分新增 
    if event.key == pygame.K_RIGHT:
        stepX=5
    elif event.key == pygame.K_LEFT:
        stepX=-5
    elif event.key == pygame.K_UP:
        stepY=-5
    elif event.key == pygame.K_DOWN:
        stepY=5
    elif event.key == pygame.K_SPACE:#此部分新增
        bullet_pos=[hero_pos[0],hero_pos[1]+10]
    return stepX,stepY,bullet_pos

def enemy_show(enemy_objs,startY=-40):
    if len(enemy_objs)<5:
        while len(enemy_objs)<5:
            enemy_X=random.randint(0,500)
            enemy_pos=[enemy_X,startY]
            screen.blit(enemy,enemy_pos)
            enemy_objs.append(enemy_pos)
    else:
        i=0
        for pos in enemy_objs:
            screen.blit(enemy,pos)
            enemy_objs[i]=[pos[0],pos[1]+enemy_speed]
            i=i+1
    return enemy_objs

while True:
    bullet_pos_=[]#此部分新增
    heroX=heroX+stepX
    heroY=heroY+stepY
    
    screen.blit(bg,(0,0))
    screen.blit(hero,(heroX,heroY))
    enemy_objs=enemy_show(enemy_objs)  

    i=0
    for v in bullets_pos:#此部分新增 
        bullets_pos[i]=[v[0],v[1]-10]
        screen.blit(bullet,(bullets_pos[i][0]+45,bullets_pos[i][1]))
        distance_b=[bullets_pos[i][0]+45,bullets_pos[i][1]]
        i=i+1

    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            exit()
        if event.type==pygame.KEYDOWN:#此部分新增
            stepX,stepY,bullet_pos_=keydown_envent(event,stepX,stepY,[heroX,heroY])
            if len(bullet_pos_)>0:
                bullets_pos.append(bullet_pos_)
    pygame.display.update()
 
🐰小C：我们在响应按键的方法中添加了响应空格的处理，我们将记录当前主角所在的目标位置 bullet_pos=[hero_pos[0],hero_pos[1]+10]，然后做为返回值返回，返回之后判断 bullet_pos_ 接收值后长度是否大于 1，大于则表示已经按下空格，则记录在 bullets_pos 列表中；之后使用循环遍历每个子弹的位置，然后在 Y 轴上减去 一个值即可发射子弹。
 
i=0
for v in bullets_pos:#此部分新增 
    bullets_pos[i]=[v[0],v[1]-10]
    screen.blit(bullet,(bullets_pos[i][0]+45,bullets_pos[i][1]))
    distance_b=[bullets_pos[i][0]+45,bullets_pos[i][1]]
    i=i+1
 
👸小媛：那 +45 是啥意思呢？
 
🐰小C：因为我们的飞机会占据一定宽度，+45 是为了保持子弹在飞机头位置中间进行发射。
 
👸小媛：明白了，我的子弹出来了。 😎
 
 
16 添加击中摧毁
 
🐰小C：我们接下来开始添加击中摧毁吧。击中摧毁其实就是判断子弹与敌机的距离，我们使用欧氏距离就可以了，编写一个方法。
 
def distance(bx,by,ex,ey):
    a=bx-ex
    b=by-ey
    return math.sqrt(a*a+b*b)
 
👸小媛：不懂怎么办。
 
🐰小C：哈哈哈，这个问题不是本篇的内容，不懂公式的大家搜索一下就可以了，或者直接使用这个方法。
 
👸小媛：问题不大。
 
🐰小C：接着我们在子弹移动时添加距离计算，如果子弹移动后与敌机小于一定距离，那么就在敌机位置显示出爆炸图片就可以了。
 
i=0
for v in bullets_pos:
    bullets_pos[i]=[v[0],v[1]-10]
    screen.blit(bullet,(bullets_pos[i][0]+45,bullets_pos[i][1]))
    distance_b=[bullets_pos[i][0]+45,bullets_pos[i][1]]
    ei=0
    for ep in enemy_objs:#此部分新增 
        if distance(distance_b[0],distance_b[1],ep[0],ep[1])<60:
            screen.blit(enemy_boom,(ep[0],ep[1]))
            enemy_objs[ei]=[random.randint(0,500),-50]
        ei=ei+1
    i=i+1
 
🐰小C：其实就是移动后，我们去循环每一辆敌机的位置，如果距离达到了我们就在那个位置显示爆炸图片，并且更改这个位置到初始位置重新掉落。
 
👸小媛：哈哈哈，可以了。 😎
 
 
🐰小C：那我们这个就做完了，其他内容就不说了。
 
👸小媛：行嘞，多谢小C。
 
🐰小C：完整代码如下（改动了一下的）。
 
import pygame,random,math

bg=pygame.image.load(r'E:\2dsrc\src\img\bg.png')
hero=pygame.image.load(r'E:\2dsrc\src\img\hero1.png')
enemy=pygame.image.load(r'E:\2dsrc\src\img\enemy1.png')
enemy_boom=pygame.image.load(r'E:\2dsrc\src\img\enemy1_down1.png')
bullet=pygame.image.load(r'E:\2dsrc\src\img\bullet1.png')

pygame.init() #初始化
screen=pygame.display.set_mode((600,800))
pygame.display.set_caption("这是一个飞机游戏")

heroX=250
heroY=680
stepX=0
stepY=0

enemy_speed=2
enemy_objs=[]
enemy_objs1=[]
enemy_objs2=[]
enemy_objs3=[]
bullets_pos=[]
bullet_speed=[]

def enemy_show(enemy_objs,startY=-40):
    if len(enemy_objs)<5:
        while len(enemy_objs)<5:
            enemy_X=random.randint(0,500)
            enemy_pos=[enemy_X,startY]
            screen.blit(enemy,enemy_pos)
            enemy_objs.append(enemy_pos)
    else:
        i=0
        for pos in enemy_objs:
            screen.blit(enemy,pos)
            enemy_objs[i]=[pos[0],pos[1]+enemy_speed]
            i=i+1
    return enemy_objs
    
def screen_border(X,Y):
    #左右屏幕
    if X<0:
        X=0
    elif X>500:
        X=500
    #上下屏幕
    if Y<0:
        Y=0
    elif Y>700:
        Y=700
    return X,Y

def distance(bx,by,ex,ey):
    a=bx-ex
    b=by-ey
    return math.sqrt(a*a+b*b)
    
def keydown_envent(event,stepX,stepY,hero_pos):
    bullet_pos=[]
    if event.key == pygame.K_RIGHT:
        stepX=5
    elif event.key == pygame.K_LEFT:
        stepX=-5
    elif event.key == pygame.K_UP:
        stepY=-5
    elif event.key == pygame.K_DOWN:
        stepY=5
    elif event.key == pygame.K_SPACE:
        bullet_pos=[hero_pos[0],hero_pos[1]+10]
    print('space:',bullet_pos)
    return stepX,stepY,bullet_pos
    
while True:
    bullet_pos_=[]
    heroX=heroX+stepX
    heroY=heroY+stepY
    heroX,heroY=screen_border(heroX,heroY)
    
    screen.blit(bg,(0,0))
    screen.blit(hero,(heroX,heroY))      
    enemy_objs=enemy_show(enemy_objs)   
    #enemy_objs1=enemy_show(enemy_objs1,-300)
    #enemy_objs2=enemy_show(enemy_objs2,-600)
    #enemy_objs3=enemy_show(enemy_objs3,-900)
    print(bullets_pos)
    i=0
    for v in bullets_pos:
        bullets_pos[i]=[v[0],v[1]-10]
        screen.blit(bullet,(bullets_pos[i][0]+45,bullets_pos[i][1]))
        distance_b=[bullets_pos[i][0]+45,bullets_pos[i][1]]
        ei=0
        for ep in enemy_objs:
            if distance(distance_b[0],distance_b[1],ep[0],ep[1])<60:
                print('\n\n\n\n\n\n\n\n\n\n\n\n boom')
                screen.blit(enemy_boom,(ep[0],ep[1]))
                enemy_objs[ei]=[random.randint(0,500),-50]
            ei=ei+1
        i=i+1
    
    
    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            exit()
        if event.type==pygame.KEYDOWN:
            stepX,stepY,bullet_pos_=keydown_envent(event,stepX,stepY,[heroX,heroY])
            if len(bullet_pos_)>0:
                bullets_pos.append(bullet_pos_)
      
    pygame.display.update()
    
    
    

 我知道年轻人爱打游戏，有时候我在开会，也有人在下边玩手机游戏。打游戏不是一件坏事，但是我认为一个人应该要把握住自己，不要让娱乐过度的毁坏我们的生活和工作。反而要像主动升级打怪那样，对自己的工作和学习，充满激情地进行自我目标认定、自我激励。
 
 我对打游戏并不反感，我也喜欢研究各种游戏，喜欢游戏的各种界面。没有人打游戏时先看书，买什么《21天学会DOTA》，但是大家都会玩，也都很喜欢玩。你打游戏的时候，没有老师、老板、朋友检查你，你今天到底到了多少级。也没有人督促你怎么还没有涨级别，但是你自己一有机会就会上去看看，恨不得自己多升几级，有时候还会自己花钱去买装备升级。这就叫Self-motivation，自我激励，自我设定目标。
 
 为什么不能把这种自我鼓励，用在你的工作或者学习上呢？比如你是个产品经理，在游戏中你要打BOSS，你要升级、练级。我认为你可以把这个游戏代入你的产品，把产品发出去有多少人在用，设定成你的级别。如果你追求你的产品一夜之间流行起来，在中国能做到上亿的用户在用，这就是这场游戏的最高级别。如果大家真的喜欢玩游戏，我就希望大家能换个心态这么来玩一下。
 
 想成为互联网的创业新星，明星产品制作人，如果你有这样的想法和目标，你就要不断思考，怎样利用一切的资源，怎样调动一切力量来做到这个事情，而不是要人在背后拿着鞭子督促。如果有一天我没有来和大家开会，或者某一天我没有来检查，什么产品都不要做了吗?我的督促是手段不是目的，你们要想着自己去推动。
 
 当年我在北大方正的时候，做产品都没有让老板去想，都是我找他让他给我时间，给我空间，不断去尝试。只有这样才能真正做出好的产品。
 
 我曾经在给国务院办公厅的秘书培训局域网电子邮件时，萌生了一个想法：给这个软件做一个外壳，像游戏一样，让这些秘书不用培训，就能够去用。我说干就干，白天还是工作，业务时间开始做软件。
 
 当时北大方正比我们公司现在的生活还要舒服。我们临近北大，北大有很多食堂，还有很多丰富的业余生活，晚上有录像、舞会、电影，所以北大方正的员工要想生活不幸福都很困难。这些和你们现在打游戏一样，也是很难抗拒的诱惑。大家每天晚上都混到北大里面去happy，只有我每天苦哈哈坐在宿舍里做我那个美丽的界面，改我的程序。但是我最终还是坚持把它做出来了，我们老板看到后很感慨。我就趁机跟他说，能不能给我一个机会，我想做一个产品，后来才有了飞扬电子邮件系统的故事。飞扬虽然不成功，但没有飞扬我不可能进入互联网。
 
 所以，很多事情你要发挥你的主动性，想清楚自己想要干什么，并以此为目标鼓励自己认真工作。
 
 否则，你在一家公司待着，却不好好干。那不是在浪费青春吗？这比你直接辞职走人还要可怕。这样两三年一晃而过，你年纪也不小了，也没啥竞争力了，新的一批人又成长了，你是拿自己的生命和青春在开玩笑。你可能认为自己还拿了工资呢，但工资重要吗?今天你没有工资当然活不下去了，但从某种角度我觉得工资也不重要，你今天就是拿20万年薪又怎么样?我给你60万买你三年的青春，你愿意吗?生命和青春是最宝贵的。
 
 我能够走到今天，就是因为无论做任何事，无论我是在雅虎还是方正，一直有一个想法在激励着自己。我要努力，因为我知道所有的收获都是靠我自己的实力拿到的，就像你在游戏账号里不断累积的等级和财富一样。最后我才是最大的受益者，我的实力不断增强，我的见识不断提升，我认为这才是最重要的东西。

27、打棒球
 
 
 
1、准备工作
 
（1）选择Baseball 1背景；  
 
（2）选择Batter角色和Tennis Ball角色；
 
2、功能实现
 
   （1）按下空格键，Batter和Tennis Ball移到适当的位置，准备击球
 
   （2）按下空格键，Batter挥动球杆后，Tennis Ball向右移动，直到碰到舞台边缘后消失；
 
   （3）再次按下空格键&#x

作者简介
 
作者名：1_bit
 简介：CSDN博客专家，2020年博客之星TOP5，蓝桥签约作者。15-16年曾在网上直播，带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息，迷茫的你会找到答案。系列教程将会在流量降低时转为付费位置，流量多时将不会，各位抓紧时间学习哟~
 
什么是低代码？什么是 IVX
 
👸小媛：bit 哥，我学了很多东西，例如 php、java、html之类，可是都做不了一个应用怎么办？
 
🐶1_bit：你是指什么应用呢？
 
👸小媛：网站、小程序、小游戏之类都不会做。 😨
 
🐶1_bit：那是因为你需要多锻炼呢，这样才能有一定的经验去完成一些项目的开发。
 
👸小媛：啊！感觉时间好长啊，代码太难了。 😖
 
🐶1_bit：其实不难的，但是需要有一个锻炼过程积累经验。
 
👸小媛：那有没有好一点的方式呢？我想快点学会制作这些东西。
 
🐶1_bit：有呀，现在的低代码就可以完成；低代码技术随着不断迭代，越来越好使，可能之后会是一种趋势，想要学一下吗？
 
👸小媛：啥是低代码？
 
🐶1_bit：就是用少量代码，或者是不用代码去完成一个项目的制作。
 
👸小媛：哇！这么厉害！？赶紧教我，我想试试。 😅
 
🐶1_bit：哈哈哈，正好最近接触一个好东西，叫做 IVX，你可以通过画图制作界面，并且可以一键部署，完成网站、小程序、小游戏之类的应用哟。
 
👸小媛：哇！这么厉害？！那什么是部署呢？
 
🐶1_bit：因为你做好一个应用后，需要给大家玩，就需要放到服务器上，对于新手来说可能就很麻烦，你通过 IVX 进行制作，就少去了这些步骤，而且又简单，完全省去了代码编写呢。我们今天就初步学一下，使用 IVX 做一个精美 Web 端简历吧。
 
 
👸小媛：啊！等不及了，赶紧教我吧。 😋
 
绝对定位布局
 
🐶1_bit：好勒，但是在正式制作项目前，我们得需要了解这个 IVX 的用法；由于 IVX 功能强大，所以我们还需要学一些功能方便我们之后进行应用开发。
 
👸小媛：没关系，能够省去打代码就可以了。
 
🐶1_bit：我们可以先进入 IVX 的官网，因为 IVX 是一个在线的开发平台，我们完全不需要配置任何环境，直接进入网址就可以进行开发了呢。
 
👸小媛：那 bit 哥赶紧给我网址吧。
 
🐶1_bit：你点击这个网址进入吧 https://editor.ivx.cn/ 。
 
👸小媛：注册完了，然后我点立即体验出现了这个区域，我该如何选择呢？
 
 
🐶1_bit： 那我们先创建一个绝对定位的一个 WebAPP 、小程序应用吧。你选择绝对定位进行创建就可以了。
 

 👸小媛：哇，出来了一个界面，接下来怎么做呢？
 
🐶1_bit：这个时候我们记得选中前台，也就是下图蓝色框框选位置，随后我们可以看到左侧黄色框框选位置的蓝色按键就是组件。
 
 
👸小媛：那什么是组件呢？ 😰
 
🐶1_bit：组件我们可以当做是一种元素或是一种工具，就像我们在 Photoshop 中可以用很多工具画出圆框、方框等；在 IVX 中，组件就是网页元素例如按钮、文本框、图片框，又或是一些功能等，我们可以把这些东西画在编辑器中的白色页面之上，这样我们就可以通过 “画画” 的方式将这些元素给放置到画布上了。注意，只有绝对定位布局可以自己绘制内容。
 
👸小媛：哇，明白了，好厉害呀，可以直接画出一个页面，但是绝对定位布局到底是什么呢？
 
🐶1_bit：先别急，我们通过实例继续讲解吧，然后再知道这个绝对定位布局是什么吧。
 
👸小媛：行的。
 
🐶1_bit：接下来我们进行绘制内容吧。你看下图，我们将鼠标长时间停留在组件外观为 T 的组件上，将会发现这时会出现这个组件的详细信息，在这里我们只需要先知道这个组件为文本即可。
 
 
👸小媛：那下一步要做什么呢？
 
🐶1_bit：接下来我们只需要点击 T 组件，这时鼠标将会变成一个十字样，然后在白色页面中按住鼠标左键进行拖拽就会出现下图示例。
 
 
👸小媛：接下来就放开鼠标左键就可以了吗？
 
🐶1_bit：是的，接下来我们放开鼠标组件就绘制出来了一个文本框，这个文本框也是对应着我们网页中的文本框元素。你可以看下图，我们发现此时前台下有一个文本1（蓝色框框选），这个文本1则是属于这个前台页面下的元素，我们点击这个元素将会在白色页面中显示这个文本框的大小，这个文本框大小与我们所绘制的文本框大小一致，而左侧红色框框选部分则为这个文本框的属性内容，我们可以更改属性内容更改这个文本框的颜色、背景色等。
 
 
👸小媛：哇，好厉害啊，那前台到底是啥。
 
🐶1_bit：在一个网站中，前台就是指我们用来呈现的页面；例如你平常浏览的网页都是指前台，但是前台所显示的数据，例如 CSDN 的页面，数据都是从后台做完处理返回给前台进行显示的；其实你可以理解前台就是整个页面如何排版、如何美观的展示数据。
 
👸小媛：我懂了，就像出黑板报，一部分人负责整体布局设计，另外一部分人负责填充内容，前台就是负责布局设计这一块吧？
 
🐶1_bit：是的，如果这个时候我们觉得这个大小绘制不对，我们可以通过拉伸这个文本元素的 8 个小点对这个文本元素进行大小调整。
 
 
👸小媛：那如果是我的位置绘制错误了呢？
 
🐶1_bit：那也很简单，你直接鼠标左键单击这个文本框按住不放，移动鼠标就可以移动这个文本框元素的位置了。
 
👸小媛：哈哈哈，明白了。
 
🐶1_bit：那我现在先告诉你什么是绝对定位。
 
👸小媛：好勒。 😋
 
🐶1_bit：其实绝对定位就是指当期元素所在位置固定。例如我们这个白色的页面，拥有一个 x 和 y 坐标，而你所绘制的元素如果初始点所在位置是 (200,200)，那么这个元素就永远左上角在 (200,200) 这个位置进行绘制，下图红色框所框选的就是这个文本元素的起始点，而这个起始点所在的位置就是 (95,69)。
 
 👸小媛：明白了，但是这个 x 和 y 坐标是怎么算的呢？
 
🐶1_bit：其实你这个时候应该可以看到，下图黄色框选位置的值，例如横轴为 x，x轴将会有坐标数值，竖轴为 y，y轴也是有刻度数值，此时就可以确定这个坐标系的 x 和 y 轴了。
 
 
👸小媛：明白了。我设置了这个文本框的 x 和 y 的值为 0 和 0 后这个文本框出现在了左上角耶，并且我更改了内容，就显示了呢。
 
 
🐶1_bit：是的，更改属性内容就会显示别的值，在这里还是要提一点，属性中的宽度和高度都是以像素为单位呢。
 
👸小媛：明白了。
 
🐶1_bit：我们这个文本框其实可以如果超出了白色屏幕你觉得会怎样？
 
👸小媛：不懂，应该是只会显示白色屏幕内的内容吧？
 
🐶1_bit：真聪明，是的，你看下面，我更改了这个文本框的背景色。
 
 
🐶1_bit：之后接下来我拖拽这个文本框超出这个白色页面。
 

 🐶1_bit：再点击预览，此时就会弹出一个界面，这个界面就可以预览了。
 
 👸小媛：你不是说不会显示完内容的吗？为什么现在还会显示？
 
🐶1_bit：因为我们这个是浏览器自动切换成了一个电脑浏览的界面，你还记得我们的屏幕在编辑器中是一个竖着的形状吗？看下图，那个可是一个 iPhone6 手机的屏幕。
 
 
👸小媛：你意思是说屏幕不对？那如何切换成手机屏幕呢？
 
🐶1_bit：我们浏览器按 F12，然后在出现的源码窗中点击下图红色部分框选的手机图标应用就会切换成一个手机屏幕，当然，还需要选择下图紫色框框选的机型，这个时候就可以出现一个跟编辑器中完全一致的屏幕内容了。由此可见此时文本框元素将会只显示其中一部分。
 
 
👸小媛：哇，真神奇，我第一次知道浏览器可以这样用。 😅
 
🐶1_bit：其实这个是剪切功能，如果你想显示被剪切的内容可以向我下图一样设置。
 
 
🐶1_bit：这个时候预览就会出现滚动条，通过滚动条可以显示这个文本框的内容。
 
 
👸小媛：你这个剪切设置在哪呀？
 
🐶1_bit：其实你可以点击前台就可以看见了。
 
 
👸小媛：哈哈哈，明白了。
 
开始制作 Web 端简历
 
🐶1_bit：那我们现在就正式制作 WEB 端简历吧。
 
👸小媛：迫不及待了 bit 哥。
 
🐶1_bit：我们从头开始吧，新建一个 绝对定位 的 WebAPP、小程序应用，并且可以创建一个名称。
 
 
👸小媛：嗯，做好了这一步。
 
🐶1_bit：接下来我们可以选择一个合适的页面。
 
 
👸小媛：为什么要选择电脑类型的呢？
 
🐶1_bit：那是因为我们做的是电脑端的 WEB 页哟~
 
👸小媛：明白了，已经按照步骤做好。
 
🐶1_bit：接下来，我们点击前台，在组件按钮中点击新建一个页面，这个页面你也可以进行重命名，我在这里重命名为了简历页。
 
 
👸小媛：明白。
 
🐶1_bit：我们继续往下，在最开始的效果图中我们可以知道，这个简历左侧是有一列内容，此时我们可以新建一个列。
 
👸小媛：什么是列？
 
🐶1_bit：就是指内容是从上往下进行排列，例如横叫做一行，竖着叫做一列；我们左侧内容其实是竖着排列，每一行就只有一个元素内容，所以就是需要创建一个列，在列中创建这些元素进行显示就好了，你看看原图，左侧蓝色部分内容元素都是竖着的。
 
 
👸小媛：是哟，每一个元素都是竖着进行排列，知道了，那我该怎么做呢？
 
🐶1_bit：这个时候我们可以找到现在编辑器环境，在编辑器环境中点击如下按钮。
 
 
🐶1_bit：接着在屏幕上绘制就可以了。
 
 
👸小媛：可是我这里显示这个背景色不对，我该怎么做呢？
 
🐶1_bit：这个时候我们选择这个列1，将背景色改为 #254665 就可以了。
 
 
👸小媛：完成了，下一步怎么做呢？
 
🐶1_bit：接下来我们将新建的这个列靠左放置，可以修改这个列的 x 和 y 坐标。
 
👸小媛：你之前说了，修改 x 和 y 的值就可以更改位置了，然后这个 x 和 y 的值是在属性面板中吧？
 
🐶1_bit：是的，此时我们点击这个列元素，然后将会出现一个属性面板，在属性面板中将 x 和 y 的值改为 0 和 0 就可以了。
 
 
👸小媛：修改好了，这个列放置在左侧部分了。
 
 
🐶1_bit：我们接下来继续修改一下这个列的宽高，按照合适的宽高设置我们将会使整个页面看起来直观和舒服。
 
👸小媛：原来 bit 哥还会设计呀？
 
🐶1_bit：没有没有，我是在网上仿一个简历而已，哈哈哈。
 
👸小媛：哈哈哈，还是很厉害了。
 
🐶1_bit：我们继续吧，我们现在选择列1，在其属性面板中修改宽值为 250，高值为 1908。
 
👸小媛：收到，已经修改了。
 
 
头像制作
 
🐶1_bit：那我们继续往下做。我们发现该列的第一个元素是一个头像，在这里需要添加一个图片元素。
 
 
👸小媛：图片元素是不是这个？因为我感觉这个好像都是用来代表图片。
 
 
🐶1_bit：是的。此时我们点击列1，然后在点击图片，将会出现选择头像图片，我们选择图片后，该图片就添加至了列1之中，并显示。
 
 
👸小媛：可是我自己的图片好大只啊。 😒
 
🐶1_bit：没关系，此时只需要点击图片，在起出现的属性面板中调整宽度就可以了。
 
 
👸小媛：明白了，我解决了，输入值大小就可以调整图片大小。
 
🐶1_bit：嗯，此时我们将图片设置一个跟我一样的雨滴状的圆角。
 
👸小媛：雨滴状感觉超级好看。 😥
 
🐶1_bit：毕竟是需要点个性嘛~ 其实此时我们点击图片，在其属性面板中我们可以找到这个属性。
 
 
👸小媛：这个有什么功能呢？
 
🐶1_bit：我们可以看圆角位置，如果全部为橘色则表示这个图片的四个角都将受到边框圆角值的影响。例如此时我将边框圆角的值设为 50，你看看现在的图片会怎样。
 
 
👸小媛：图片的四个角变圆润了耶。
 
 
🐶1_bit：对的，边框圆角值越大，角度越圆润，到达180 时将会变成一个圆形图片。
 
 
👸小媛：那水滴形状的头像怎么实现呢？
 
🐶1_bit：其实很简单，我们只需要在圆角位置将图片需要变成圆角位置的角落取消即可。
 
 
👸小媛：真棒，完成了。
 
🐶1_bit：接着我们应该要为这个头像设置间隔顶部的距离。很简单，我们找到 列1，在属性面板中将 上内边距 设置为 15，此时就可以让图片进行与顶部实现间隔了。
 
 
👸小媛：上内边距是什么意思呀？
 
🐶1_bit：其实我们可以理解在这个行中有一个透明的墙，这个墙呢你可以设置墙的大小，有这个列上面的墙、左边的墙、右边的墙、下面的墙；我们可以设置这些墙的厚度，也可以设置这些墙是向外还是向内；在这里我设置的是这个列表中上面的一堵墙，往内再加厚一点，数值为 15，这样就可以撑开这个图片与顶部的距离了。
 
👸小媛：那想左边也间隔一定距离那意思就是再设置个左内边距咯？
 
🐶1_bit：是这个意思。
 
👸小媛：哈哈哈，我设置好了。
 
 
个人信息内容编写
 
🐶1_bit：真聪明。我们继续，现在我们看一下在头像之下的元素都是一个图片加一行介绍；那这个时候一行有两个元素了，是使用列还是使用行呢？
 
 
👸小媛：是行嘛？
 
🐶1_bit：是的，其实我们在这个列表里面添加一个行，然后在这个行中添加一个图片和一个文本就可以了，首先我们点击列1，再从出现的组件中选择行即可。
 
 
👸小媛：可是这样创建的行背景色不一样耶？还有跟顶部黏在一起太难看了。 😂
 
 
🐶1_bit：我们先解决跟顶部黏在一起的问题，之后在解决背景色的问题。
 
👸小媛：我已经解决了跟顶部黏在一起的问题了，只需要将行的外边距设置一个值就可以了；应该刚刚你说内边距就等于有一个隐形的墙往内加厚度，我现在使用外边距就可以往外加厚度了，这样就间隔了。
 
 
🐶1_bit：没错，是这个意思。那么我们现在往这个行里面添加一张图片吧；点击图片组件即可添加一张照片。想要素材的私聊我 bit 就可以了，我发给你们。
 
 
👸小媛：可是添加出来的图片又很大了。
 
🐶1_bit：那这个时候就应该跟之前一样，再次在图片的属性面板中修改一下图片的宽高大小了，修改完大小再点击这个行，在这个行之中添加一个文本框，在里面输入 1_bit。
 
 
👸小媛：感觉好丑啊。
 
🐶1_bit：没事，马上就好看了。我们点击这个行，在属性面板中设置该行的高为 40。
 

 👸小媛：看起来好了很多。
 
🐶1_bit：还没完呢，我们继续点击行的背景颜色，将背景颜色中的 Alpha 设置为0；Alpha 为一个透明度设置，设置为 0 则表示完全透明。
 
 
👸小媛：明白了，效果是这样。
 
 
🐶1_bit：接下来我们修改一下这一行文本的字号大小，点击文本，在属性面板中设置字号大小为 18，字体样式为一个正的大 T，这个大 T 表示加粗，然后再选择文字颜色为白色就可以完成字体的设置了。
 

 👸小媛：可是还是没跟左边间隔，感觉怪怪的。
 
🐶1_bit：其实很简单，只需要设置这个文件的左外边距就可以了；你不是会的嘛？
 
👸小媛：哈哈哈，突然忘记了，不过我现在设置好了。
 
 
🐶1_bit：那么，现在左侧的个人信息剩下的就很简单了，直接赋值黏贴这一行，在列中进行增加就可以了。
 
 
 
👸小媛：不过这个时候出现了几个同样名称的东西，并且内容也一致。
 
 
🐶1_bit：那是因为你复制了元素，这个元素的内容、设置都将会一并的在黏贴对象中生效。
 
👸小媛：唔，原来如此。
 
🐶1_bit：接下来很简单，我们直接更改一下名字，改完名字后再进去每一行的文本框中修改内容即可，然后图片信息只需要双击图片对象前面的小图标，就会弹出一个图片选择框，选择对应的图片后将会显示到个人信息预览中。
 

 🐶1_bit：修改完毕后内容如下。
 
 
👸小媛：那为什么最后一行换行了？
 
🐶1_bit：那是因为换行了，我们可以在这一行的属性面板中把自动换行给取消掉。
 
 
👸小媛：可是超出格子了怎么办？
 
🐶1_bit：那就调小一点字体吧，调成 13 就可以了。
 
 
👸小媛：啊哈哈，成功了。 😎
 
🐶1_bit：其实你发现一个现象没？在对象树面板中，越靠近底下的元素在页面上越靠前？
 
 
👸小媛：哈哈哈，发现了。我还发现可以拖动上面的内容调整位置。
 
🐶1_bit：是的，这个点要注意。现在我们接着在这个列中创建一个文本框，这个文本框的内容直接赋值下面内容粘贴过去就可以完成了。
 
语言能力：大学英语6级证书，荣获全国大学生英语竞赛一等奖，能够熟练的进行交流、读写。

计算机：计算机二级证书，熟练操作windows平台上的各类应用软件，如Word、Excel。

团队能力：具有丰富的团队组建与扩充经验和项目管理与协调经验，能够独挡一面。
 
🐶1_bit：然后记住设置文字字号、颜色、加粗和上边距，由于设置方式跟之前一样我就不再赘述了。
 
 
👸小媛：哈哈哈，我觉得你在偷懒。 😂
 
🐶1_bit：其实这是第一节内容，熟悉软件、操作是最重要的，在这里能实现就这样实现就可以了的。
 
👸小媛：你说的都对。 😂
 
🐶1_bit：问题不大，我们继续往下完成如下效果。
 
 
👸小媛：其实也就是添加一个文本之类的吧。
 
🐶1_bit：是的，继续在这个列里面添加一个文本，输入计算机，然后在添加一根分割线就可以完成这个操作了，分割线如下图进行添加。
 
 
👸小媛：就这么简单嘛。
 
🐶1_bit：是的，这个时候我们为文本框增加上边距、设置颜色之类的操作就可以了。在这里主要是设置分割线的长度和宽度；我们点击分割线，将会在属性面板中看到如下信息。
 

 👸小媛：你意思就是说设置线条长度和宽度就可以了吧？真简单，我完成了。
 
 
🐶1_bit：哈哈哈，下面另外一个英语就直接复制就可以了，然后改一下文本内容和长度就可以完成了。
 
 
右侧详细信息内容编写
 
👸小媛：现在就开始做另外一半了吧？
 
🐶1_bit：对的，简单吧？
 
👸小媛：很简单，我感觉我现在都会做了。
 
🐶1_bit：那你说说怎么做？
 
👸小媛：右边继续添加一个列呗，设置左的内边距一定单位就可以同时与左边这一列进行间隔了。
 
🐶1_bit：是这么回事，我告诉你数据，你现在创建一个列，宽 750 高 1908 ，左内边距为 30，顶部内边距为 30 就可以了，由于左列的起始坐标位置 x 为 0 ，y 为 0 ，宽为 250，那么此时这个列就应该所在位置 x 值为 250，y 值为 0，设置好背景色透明度就可以完成了。
 
👸小媛：明白。
 
 
👸小媛：我还创建了一个文本框呢。
 
🐶1_bit：厉害了，那你觉得接下来怎么做？
 
👸小媛：很简单，我改一下这个文本框字号大小，和文字颜色为 #254665 就可以了。
 
 
🐶1_bit：哈哈哈，可以的。那接下来怎么做呢？
 
👸小媛：接下来添加一个文本，距离上部外边距为 30，并且设置颜色值为 #254665 以及调整一下合适的字号大小就好了。
 
 
🐶1_bit：那下面的学历背景怎么做？
 
👸小媛：加一个行，然后这个行中第一个元素是图片，第二个元素是一个列，这个列有两个值，一个是文本，一个是分割线，这样就完成了。
 
🐶1_bit：那你去试着写一下？
 
👸小媛：没问题，首先我创建一个行，往里面添加一个图片。
 
 
🐶1_bit：然后呢？
 
👸小媛：然后调整一下这个图片的大小，我这里选 60。
 
 
🐶1_bit：那你怎么增加这个图片背景的颜色呢？
 
👸小媛：我看属性有一个图片背景色，我想增加上去。
 
 
👸小媛：果然如此，然后更改圆角值就可以了。
 
 
🐶1_bit：厉害，那现在在列了。
 
👸小媛：在这一行的列里增加一个文本，内容为学历背景。这里都是之前用了很多次了，我就直接截图给你看了。
 
 
🐶1_bit：行，你把背景透明设置为 0 吧，我觉得应该没啥问题了，在调整一点外边距就可以了。
 
👸小媛：嗯，我需要给整个行设置一个上外边距为 30，然后给这个行 里面的列设置一个左的外边距为 30，这样整个行可以与上部间隔，然后这个行内部的列也可以与左边的图片进行间隔。
 
 
🐶1_bit：其实你现在已经做出了下面几个标题了哟。
 
👸小媛：是的，下面几个标题都是一样的形式，只有图标和文本不同，我再复制这个行，然后修改一下文本内容和图片就可以了，然后我还为了方便区分设置了名称。
 
 
🐶1_bit：不错，越来越规范了。
 
👸小媛：然后我进入其它两个行里面设置图片和文本就可以了。
 
 
🐶1_bit：你继续往里面添加内容吧。
 
👸小媛：我觉得我偷懒就可以了，因为我已经学会了，接下来我就用 3 个文本框添加内容吧。
 
🐶1_bit：行，因为技巧目前来说都是一样的。
 
👸小媛：我直接赋值添加 1 个文本框，里面输入以下内容。
 
2011.09 - 2015.07  CSDN大学  本科 IVX 方向
GPA 3.66/4 （专业前5%）
主修课程：
Spring + Hibernate + Struts2+shiro+Activiti+JQuery easyUI+IVX
 
👸小媛：我添加了一个文本框，然后将这个文本框放到了学历背景上面，因为之前有说，越往下的在页面上显示越靠前，所以在对象树中学历背景应该在内容之下，这样文本放之后就会正确显示在页面之下。
 
 
🐶1_bit：不错，看来你记住了。
 
👸小媛：接下来我调整一下字体，然后就 ok 了。
 
 
👸小媛：再复制到其它地方，更改完了内容就完成了。工作简历内容为方便读者测试，已列出来。
 
注：简历文案为互联网上所得，如有违规请私信博主

2016.06 - 2021.05 **电商平台

责任描述：
1、 参与项目新需求分析，各个功能模块间的后台开发，后台代码编写，数据库设计
2、 参与订单模块功能的实现以及购物车方案的制定和开发;
3、 负责后台商品信息的管理，包括图片上传、预览，商品上传、修改，订单管理。
4、 参与后期部分功能的二次开发以及项目的维护；
5、 其他：负责公司网上商城维护；

项目描述：
本商城采用SOA架构，基于SSM框架，使用maven完成开发，系统分为前台和后台，为了降低系统间的调用低耦合，对表现层和服务层进行了分离，使用HttpClient进行表现层和服务层之间的访问，在表现层和数据库之间使用了redis技术作为缓存，解决高并发等可能造成的服务器压力。由于业务量不断扩大，用FastDFS替换了前期直接将图片保存在项目服务器上的方式，减少服务器的压力。使用了solr为搜索服务提供有力的支持，提高检索效率。针对用户可能会在各个不同的系统之间访问造成多次登陆问题，使用了单点登录的sso技术。
 
👸小媛：以下为个人喜好文案。
 
注：简历文案为互联网上所得，如有违规请私信博主

javaEE：熟练 IVX：精通

个人评价：
1. 有良好的代码风格，习惯优化代码，多写注释
2. 参与过多个项目的开发，熟悉常见业务处理，能快速融入团队
3. 对工作尽职尽责，乐于从事有挑战性的工作，心里承受能力强
4. 学习能力强，接受新技术快，看看案例就能按需求写出代码
5. 能接受短期外派，出差和适量加班
 
🐶1_bit：不错，你这个举一反三的例子挺强的，我都觉得你是不是学过了，过来逗我玩的。
 
👸小媛：哈哈哈，没有，这说明我厉害，所有的页面编写完后，点击预览。
 
 
👸小媛：将会得到以下预览效果。 😎
 
 
🐶1_bit：不错，第一节就熟练了，之后我们再做一些别的东西，包括如何发布这个网页。
 
👸小媛：哈哈哈，多谢 bit 哥。