近期在学习HTML5。爱因斯坦曾说过,“最好的学习就是自己去经历”。

于是。我想在学习HTML5的同一时候。做一款简单的小游戏,这样学习起来也会非常有趣的。我想做的是曾经小时候玩儿的小霸王上面的非常经典的一款游戏,叫“吃豆豆”,后面有怪物跟着跑,蛮好玩的,还非常虐心,相信大家都玩儿过。

吃豆豆就是这款啦:

我就用前面学的一些HTML5的简单的一些知识来简单模拟这款游戏吧。

我做这款游戏不打算用图片,所实用canvas来画,这样才有意思,嘿嘿。

正如大家所示,我们游戏的主角就是图中的黄色的嘴巴。尽管仅仅有一张嘴巴。还是比較酷的。简单就是美。嘿嘿。

首先第一步。我们要使用Canvas把它画出来,

分析一下,画出来还是挺简单的:

设张开的嘴巴角度为90°,如图。然后做直角坐标系。平分夹角,两边都是45°,然后用cos或者sin就能够求出A,B坐标,嘿嘿。

首先画3/4圆,在连两条线,就可以。

以下是代码:

//往右/左的样子
function drawBall_RightOrLeft(ball,isRight)
{ //document.write(state);
//画眼睛,眼睛是公共的
//画眼睛-外圈
var eyeX;
if(isRight == true) //右
eyeX = ball.x - 5;
else eyeX = ball.x + 5;//左
var eyeY = ball.y-8;
var eyeR = 6;//眼下限定死这个
cxt.beginPath();
cxt.fillStyle="#000000";
cxt.arc(eyeX,eyeY,eyeR,0,Math.PI * 2,false);
cxt.fill();
cxt.closePath();
//画眼睛-眼球
var qiuR = eyeR / 2;
cxt.beginPath();
cxt.fillStyle="#FF0000";
cxt.arc(eyeX,eyeY,qiuR,0,Math.PI * 2,false);
cxt.fill();
cxt.closePath();
switch(state)
{
//张嘴
case 1:
//画红球
cxt.beginPath();
cxt.fillStyle="#FF0000";
//嘴巴大小为90°
//画圆弧--脸
if(isRight)
cxt.arc(ball.x,ball.y,radius,1/4 * Math.PI,3/2 * Math.PI + 1/4 * Math.PI,false);
else
cxt.arc(ball.x,ball.y,radius,3/4 * Math.PI, Math.PI + 1/4 * Math.PI,true);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
//画嘴巴
var ax = 0,ay = 0;
var bx = 0,by = 0;
var temp = radius * Math.sqrt(2)/2;
if(isRight)
ax = ball.x + temp;
else
ax = ball.x - temp;
ay = ball.y - temp;
bx = ax;
by = ball.y + temp;
cxt.moveTo(ball.x,ball.y);
cxt.lineTo(ax,ay);
cxt.moveTo(ball.x,ball.y);
cxt.lineTo(bx,by);
cxt.closePath();
cxt.stroke();
state = 0;
break;
//闭嘴
case 0:
//画圆弧--脸
cxt.beginPath();
cxt.arc(ball.x,ball.y,radius,0,Math.PI * 2,false);
cxt.stroke();
cxt.closePath();
//从圆心到嘴巴末点的连线
cxt.beginPath();
cxt.moveTo(ball.x,ball.y);
if(isRight)
cxt.lineTo(ball.x + radius,ball.y);
else
cxt.lineTo(ball.x - radius,ball.y);
cxt.stroke();
cxt.closePath();
state = 1;
break;
default :
break;
}
}

效果图:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvempjX2dhbWVfY29kZXI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">

HTML5吃豆豆游戏开发实战(一)使用Canvas绘制游戏主角的更多相关文章

  1. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

  2. cocos2d-x游戏开发实战原创视频讲座系列1之2048游戏开发

     cocos2d-x游戏开发实战原创视频讲座系列1之2048游戏开发 的产生 视持续更新中.... 视频存放地址例如以下:http://ipd.pps.tv/user/1058663622     ...

  3. Swift游戏开发实战教程(霸内部信息大学)

    Swift游戏开发实战教程(大学霸内部资料) 试读下载地址:http://pan.baidu.com/s/1sj7DvQH 介绍:本教程是国内第一本Swift游戏开发专向资料. 本教程具体解说记忆配对 ...

  4. cocos2d 游戏开发实战

    文章转自:http://uliweb.clkg.org/tutorial/read/40 6   cocos2d 游戏开发实战 6.1   创建cocos2d项目 6.2   cocos2d v3 & ...

  5. 《Cocos2d-x游戏开发实战精解》学习笔记4--实战一个简单的钢琴

    上一节学习了使用Cocos2d-x播放音乐的方法,但是那种方法一般只适合于播放较大的音乐,而一般比较短小的音乐(如游戏中的打斗.按键音效等)则要通过playEffect来播放.本节使用该方法以及之前学 ...

  6. 《Cocos2d-x游戏开发实战精解》学习笔记3--在Cocos2d-x中播放声音

    <Cocos2d-x游戏开发实战精解>学习笔记1--在Cocos2d中显示图像 <Cocos2d-x游戏开发实战精解>学习笔记2--在Cocos2d-x中显示一行文字 之前的内 ...

  7. 《Cocos2d-x游戏开发实战精解》学习笔记1--在Cocos2d中显示图像

    Cocos2d-x中的图像是通过精灵类来显示的.在Cocos2d-x中游戏中的每一个角色.怪物.道具都可以理解成是一个精灵,游戏背景作为一种特殊的单位将其理解成是一个精灵也没有什么不妥.在源文件本章目 ...

  8. iOS cocos2d 2游戏开发实战(第3版)书评

    2013是游戏爆发的一年,手游用户也是飞速暴增.虽然自己不做游戏,但也是时刻了解手机应用开发的新动向.看到CSDN的"写书评得技术图书赢下载分"活动,就申请了一本<iOS c ...

  9. Unity 2D游戏开发教程之使用脚本实现游戏逻辑

    Unity 2D游戏开发教程之使用脚本实现游戏逻辑 使用脚本实现游戏逻辑 通过上一节的操作,我们不仅创建了精灵的动画,还设置了动画的过渡条件,最终使得精灵得以按照我们的意愿,进入我们所指定的动画状态. ...

  10. C#游戏开发高速入门 2.1 构建游戏场景

    C#游戏开发高速入门 2.1  构建游戏场景 假设已经计划好了要编写什么样的游戏,在打开Unity以后.要做的第一件事情就是构建游戏场景(Scene).游戏场景就是玩家游戏时,在游戏视图中看到的一切. ...

随机推荐

  1. angularjs $location 服务

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  2. poj--2385--Apple Catching(状态dp)

    Apple Catching Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submi ...

  3. django 笔记7 多对多

    多对多 方法一 :双外键关联 自定义关系表 自定义 class Host(models.Model): nid = models.AutoField(primary_key=True) hostnam ...

  4. MyBatis的架构设计以及实例分析--转

    原文地址:http://blog.csdn.net/luanlouis/article/details/40422941 MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单 ...

  5. jquery判断页面元素是否存在

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的. 例如: document.getElementById(& ...

  6. 索引-mysql索引创建、查看、删除及使用示例

    mysql索引创建.查看.删除及使用示例 1.创建索引: ALTER TABLE用来创建普通索引.UNIQUE索引或PRIMARY KEY索引. ALTER TABLE table_name ADD ...

  7. 【基础篇】Android中获取Drawable的方法

    public static Drawable getDrawable(Context context,String filename) { BitmapDrawable drawable=null; ...

  8. 数据库Tsql语句创建--约束--插入数据

    1.创建数据库 use master go if exists(select * from sysdatabases where name='数据库名字') drop database 数据库名字 g ...

  9. 细说ReactiveCocoa的冷信号与热信号(一)

    热信号:事件触发: 冷信号:订阅出发: 从本质上来说,是信号的存在和产生,是静态信号和动态信号的区别. 背景 ReactiveCocoa(简称RAC)是最初由GitHub团队开发的一套基于Cocoa的 ...

  10. mysql优化篇之表分区

             当表的数据量达到一定数量时(如单个.myd文件都达到10G,myd 是mysql的数据文件),这时候读取起来必然效率很低.          1.从业务角度可以解决(分表)      ...