先看一下演示效果：http://www.liziyang.com/h5Templete/
首先，要感谢丁沐榕同学做的动态图。
这个例子用到了p5.js基础包，scenemanager.js(场景管理)，p5.play.js(实现动画和碰撞触发)。请下载我做的templete文件。

解压后会看到里面已经放好了需要用到的lib。
打开index.html文件，我将meta和css进行了修改，自适应手机屏幕并禁止上下拖动。除了加载了上面用到的库文件外，主要是加载了3个场景(3个js文件，mainScene.js、scene01、scene02)。
……

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no,maximum-scale=1.5">
<meta content="telephone=no;email=no" name="format-detection">
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;position:fixed;} </style>
<script src="lib/p5.min.js"></script>
<script src="lib/p5.dom.min.js"></script>
<script src="lib/p5.sound.min.js"></script>
<script src="lib/p5.play.js"></script>
<script src="lib/scenemanager.js"></script>
<script src="mainScene.js"></script>
<script src="scene01.js"></script>
<script src="scene02.js"></script>

……
打开mainScene.js文件，这个文件是我们的入口文件，主要是设置画布的尺寸并加载Scene01场景。
打开scene01.js，之后所有场景都要用到以下格式进行场景的显示:

function Scene1(){
   this.setup = function(){
      //场景1初始化需要的内容
   }
   this.draw = function(){
      //场景1绘制的内容
   }
}

p5.play可以将任意图形变成sprite并实现动画和点击按钮触发功能，然后可以在点击后使用showScene(要切换的场景)函数进行场景的切换。
 
相关参考资料：
p5.js：https://p5js.org/
scenemanager.js：https://github.com/mveteanu/p5.SceneManager
p5.play.js：http://molleindustria.github.io/p5.play/