Java实现抓娃娃_简易抓娃娃机H5的代码实现

本文的实现主要用PixiJs实现。PixiJS是比较著名的2D渲染引擎。可以参照教程做事前学习了解。

准备工作

第一步是图片资源。这些都是从现有的抓娃娃h5中找到的一些png资源。具体可以查看资源目录。都是F5查看资源下载下来的。

页面布局

在页面布局中，需要确定好图片资源的层级关系，可以理解为z-index，确定好图片添加的先后顺序。另外也要计算好，按照页面窗口大小，算出容器的大小，根据比例调整里面所有的图片。可以看到下面的娃娃图片已经被加了2份，这是为了从视觉上循环的时候总可以看到3个娃娃。至于为什么这么做，可以看下面的动画的解析。

setup() {

var resource = this.loader.resources["p2_top.png"]

var img = new PIXI.Sprite(resource.texture);

var ratio = this.app.view.width / img.width

// 背景

var resourceBg = this.loader.resources["bg.png"]

var imgBg = new PIXI.Sprite(resourceBg.texture)

imgBg.width = this.app.view.width

imgBg.height = this.app.view.height

imgBg.x = 0

imgBg.y = 0

this.app.stage.addChild(imgBg)

// 移动杆

var resourceHead = this.loader.resources["p2_wood_1.png"]

var imgHead = new PIXI.Sprite(resourceHead.texture)

imgHead.width = imgHead.width * ratio

imgHead.height = imgHead.height * ratio

imgHead.y = this.uplimit

imgHead.x = (this.app.view.width - imgHead.width) / 2

this.app.stage.addChild(imgHead)

this.imgHead = imgHead

//爪子

// 抓住

var resourcdPawCatch = this.loader.resources["p2_claw_0.png"]

var imgPawCatch = new PIXI.Sprite(resourcdPawCatch.texture)

imgPawCatch.width = imgPawCatch.width * ratio

imgPawCatch.height = imgPawCatch.height * ratio

imgPawCatch.x = (this.app.view.width - imgPawCatch.width) / 2

imgPawCatch.y = imgHead.height + imgHead.y

this.app.stage.addChild(imgPawCatch)

this.imgPawCatch = imgPawCatch

// 没抓住

var resourcdPawRelease = this.loader.resources["p2_claw_1.png"]

var imgPawRelease = new PIXI.Sprite(resourcdPawRelease.texture)

imgPawRelease.width = imgPawRelease.width * ratio

imgPawRelease.height = imgPawRelease.height * ratio

imgPawRelease.x = (this.app.view.width - imgPawRelease.width) / 2

imgPawRelease.y = imgHead.height + imgHead.y

imgPawRelease.visible = false