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

最新推荐文章于 2021-11-17 23:13:29 发布

人间theLivings

最新推荐文章于 2021-11-17 23:13:29 发布

阅读量393

点赞数 1

文章标签： html5小游戏键盘控制角色移动

本文链接：https://blog.csdn.net/weixin_29331985/article/details/113077479

版权

本文是《创意游戏编程》第二课的内容，主要介绍如何使用HTML5实现键盘控制小鸟角色移动。通过加载图片，创建画布，设置背景，并在keyPressed()方法中处理按键事件，使小鸟能根据键盘输入改变飞行方向。

摘要由CSDN通过智能技术生成

演示：

知乎视频www.zhihu.com

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

2.下载图片

bird.png

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()方法中