我正在参加掘金社区游戏创意投稿大赛团队赛，详情请看：游戏创意投稿大赛

前言

本游戏参与掘金游戏创意投稿大赛，游戏名为yoyo eat，一个h5小游戏，该项目以kaboomjs为基础开发。

各位程序员不要总是敲键盘了，咱们来用鼠标运动运动吧。锻炼锻炼手眼协调能力！

本游戏各位可以通过移动鼠标控制yoyo来吃掉邪恶的ghosty获取分数，而且我们不能放过任何一个ghosty哦。

来看看谁的分数更高！

游戏体验链接

• 游戏在线体验地址：biao-code.github.io/magic-game/
• 游戏地址:github.com/biao-code/m…
• 团队成员:正经程序员, 巡凉

设计

本游戏使用kaboomjs库作为基础来帮助我们更快更好的开发出好玩的游戏。

加载依赖以及文件

// 引入kaboom并初始化上下文
kaboom()
    
// 加载障碍物
const obstacles = [	"mushroom",	"spike",	"grass"]

for (const obstacle of obstacles) {
	loadSprite(obstacle, `/assets/${obstacle}.png`)
}

// 添加yoyo和ghosty对象，以及音效
loadSprite("yoyo", "/assets/yoyo.png")
loadSprite("ghosty", "/assets/ghosty.png")
loadSound("blip", "/assets/blip.mp3")
loadSound("wooosh", "/assets/wooosh.mp3")

引入kaboom并初始化上下文，加载游戏依赖的文件。

初始化

// 开始界面内容
scene("start", () => {

	play("wooosh")

	add([
		text("yoyo eat"),
		pos(center().sub(0, 100)),
		scale(2),
		origin("center"),
	])

	add([
		sprite("ghosty"),
		pos(center().add(0, 100)),
		scale(2),
		origin("center"),
	])

	// 1.5秒后开始游戏
	wait(1.5, () => go("game"))
})

加载开始界面内容，展示我们的游戏名以及需要"eat"掉的ghosty图标，并将放到屏幕中进行定位，设置缩放等级等操作。

等待1.5秒后我们就可以开始游戏了。

游戏整体逻辑

// 主要游戏场景内容
scene("game", () => {

	// 速度
	const SPEED_MIN = 120
	const SPEED_MAX = 640

	// 玩家控制的游戏对象
	const player = add([
		sprite("yoyo"),
		pos(40, 20),
		area({ scale: 0.5 }),
		origin("center"),
	])

	// 使图层通过鼠标移动
	player.onUpdate(() => {
		player.pos = mousePos()
	})
        
	// 每帧移动障碍物，如果超出屏幕一定距离则将其销毁
	// 所有带有move标签的物体都会在每一帧都向x移动
	onUpdate("move", (move) => {
		move.move(-move.speed, 0)
		if (move.pos.x < -120) {
			destroy(move)
		}
	})

	onUpdate("ghosty", (ghosty) => {
		if (ghosty.pos.x <= 0) {
			go("lose", score)
			play("blip")
			addKaboom(ghosty.pos)
		}
	})

	// 计分器
	let score = 0

	const scoreLabel = add([
		text(score, 32),
		pos(12, 12),
	])

	// 如果玩家吃了ghosty，则增加分数
	player.onCollide("ghosty", (ghosty) => {
		addKaboom(player.pos)
		score += 1
		destroy(ghosty)
		scoreLabel.text = score
		burp()
		shake(12)
	})
        
	// 如果玩家碰到障碍物则游戏结束
	player.onCollide("obstacle", (obstacle) => {
		go("lose", score)
		play("blip")
	})

	// 每 0.3 秒执行一次
	loop(0.3, () => {

		// 从屏幕右侧生成
		const x = width() + 24

		// 从随机 y 位置生成
		const y = rand(0, height())

		// 获得随机速度
		const speed = rand(SPEED_MIN, SPEED_MAX)

		// 生成ghosty几率是40%
		const isGhosty = chance(0.4)
		const spriteName = isGhosty ? "ghosty" : choose(obstacles)
		add([
			sprite(spriteName),
			pos(x, y),
			area({ scale: 0.5 }),
			origin("center"),
			"move",
			isGhosty ? "ghosty" : "obstacle",
			{ speed: speed }
		])
	})
})

设置游戏逻辑

• 障碍物生成的位置以及移动的速度范围
• 设置元素生成的时间间隔以及是ghosty的几率，随机生成元素如果不是ghosty则通过choose()方法在障碍物列表中随机挑选一个元素
• 生成的元素都带有"move"标签，所有带有move标签的都通过onUpdate()方法计算每个元素每帧的运动位置
• 通过onCollide()方法计算玩家操控的yoyo与任何一个游戏对象的碰撞事件，如果是ghosty则score+1，如果是obstacle障碍物则游戏结束
• ghosty的运动范围，如果ghosty超出屏幕即视为玩家没能成功捕获，游戏结束

游戏结束场景

// 游戏结束场景
scene("lose", (score) => {

	// 显示图标
	add([
		sprite("yoyo"),
		pos(width() / 2, height() / 2 - 108),
		scale(3),
		origin("center"),
	])

	// 显示分数
	add([
		text(score),
		pos(width() / 2, height() / 2 + 108),
		scale(3),
		origin("center"),
	])

	// 按下鼠标空格返回游戏
	onKeyPress("space", () => go("start"))
	onClick(() => go("start"))

})

将游戏分数传入，再次亮起yoyo图标，显示出我们在这场游戏中得到的分数。

这就是我们yoyo eat小游戏的主要逻辑了，希望大家玩的开心！