HTML5贪吃蛇精选.pptVIP

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 * 实 训 结 业 答 辩 潘 洋 三好学生队 目录 项目说明 1 设计思路 2 项目演示 3 收获总结 4 项目说明 使用HTML 5制作一个贪吃蛇游戏，使用键盘控制蛇的移动方向，游戏会随机生成若干食物和障碍物，吃掉食物则得1分，蛇身长度加1，若碰到障碍物或游戏边界则游戏结束。游戏时长设置为2分钟，若超时，自动结束游戏。蛇身采用的是渐变色。 项目对话框采用的是JAlert（/VersatilityWerks/jAlert） 它是一个基于JQuery的模态框。 设计思路 游戏基本流程图 设计思路 添加键盘监听事件（document.onkeydown），根据键盘按键的ascii码来控制蛇的移动方向。 蛇身的渐变色使用的css3中的rgba()属性，它比rgb()多了个通道alpha，也就是透明度，以此达到渐变的目的。 游戏倒计时，是采用设置定时器来动态刷新剩余时间。 蛇身的移动采用的是数组保存，每次移动的时候去掉数组中最后一个元素，新进来的元素放在数组的第一位。 项目演示 收获总结 通过此次贪吃蛇项目，学习了HTML5 的Canvas，也了解了HTML 5的一些新标签，比如video，让我更加确信H5将会在未来取代Flash的地位。 谢谢观看 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 *