任务8 CSS3圆柱图和贪食蛇.pptVIP

需求设计 贪吃蛇的移动 控制贪吃蛇方向 判断吃到食物和咬到蛇身子 判断撞墙 随机食物 触摸设计 贪吃蛇的数据结构 最终效果图 跨平台HTML5实战 软件学院 王寅峰 任务8 柱形图和贪食蛇 学习目标 【知识目标】 ? 了解CSS3的特点和优点； ? 重点掌握Div+CSS的布局设计； ? 掌握深入分析功能的方法。 【技能目标】 ? Canvas的特性：绘图； ? 熟悉Jquery的基本使用和特性； ? 移动App端和PC端触摸设计； ? Array的应用； ? Hbuilder的基本使用。 引例描述 以前实现一些酷炫的效果,需要设计者懂一定的编程，并且写一些复杂的JS，还要相对应的准备很多素材，而HTML5+CSS3封装了大量JS，让编程变得更加简单。 Apple又有新产品了，我们开发一个查看Apple设备的价格示意图，柱形图的长度越长代表价格越高。 任务陈述 1 CSS3部分特效 1 CSS3部分特效 -webkit-gradient（应用于Google浏览器） -moz-linear-gradient（应用于火狐浏览器） 本案例用到的有线性渐变和径向渐变 线性渐变 径向渐变 最终效果 2 贪食蛇 2 贪食蛇 贪吃蛇是一个经典的手机游戏，既简单又耐玩，通过键盘的上、下、左、右键或者手机屏幕上的区域按键来控制蛇头方向吃食物，使得蛇变