《创意游戏编程》第二课 键盘控制小鸟移动

  • A+
所属分类:Web前端
摘要

视频演示3.1 加载图片,创建画布
function preload() {
img = loadImage(‘bird.png’);
}
function setup() {
createCanvas(400,400);//创建一个400*400的画布
}
3.2 创建背景及画小鸟图片
var x=0,y=0;//小鸟坐标
function draw(){
background(0,255,255);//生成一个天蓝色背景
image(img, x, y);//画图片的方法image(图片名称,图片x坐标,图片y坐标)
}
3.3 按键控制小鸟飞行方向
function keyPressed(){
if(keyCode === LEFT_ARROW){ //按左键
x-=1; //向左移动
}else if(keyCode === RIGHT_ARROW){ //按右键
x+=1; //向右移动
}else if(keyCode === DOWN_ARROW){ //按下键
y+=1; //向下移动
}else if(keyCode === UP_ARROW){ //按上键
y-=1; //向上移动
}
}
3.4 让小鸟一直移动,将keyPressed()方法放置在draw()方法中
keyPressed();


演示:

视频演示

准备:

1.关注大李日志,下载编辑器或直接使用线上编辑器

2.下载图片

《创意游戏编程》第二课 键盘控制小鸟移动

3.开始

3.1 加载图片,创建画布
function preload() {
img = loadImage('bird.png');
}
function setup() {
createCanvas(400,400);//创建一个400*400的画布
}
3.2 创建背景及画小鸟图片
var x=0,y=0;//小鸟坐标
function draw(){
background(0,255,255);//生成一个天蓝色背景
image(img, x, y);//画图片的方法image(图片名称,图片x坐标,图片y坐标)
}
3.3 按键控制小鸟飞行方向
function keyPressed(){
if(keyCode === LEFT_ARROW){ //按左键
x-=1; //向左移动
}else if(keyCode === RIGHT_ARROW){ //按右键
x+=1; //向右移动
}else if(keyCode === DOWN_ARROW){ //按下键
y+=1; //向下移动
}else if(keyCode === UP_ARROW){ //按上键
y-=1; //向上移动
}
}
3.4 让小鸟一直移动,将keyPressed()方法放置在draw()方法中
keyPressed();

欢迎关注我的vx