用html5 Canvas制作一个简单的游戏 英雄抓小怪物（上）
1.创建一个Canvas对象
先在HTML页面上创建画布，然后再通过document.getElementById()来获取。
//创建画布canvas，并获取画布上下文环境
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width =512;
canvas.height =480;
document.appendChild(canvas);
2.载入图片
//背景图片 bgImage
var bgReady =false;
var bgImage =new Image();
bgImage.onload = function (){
bgReady = true;
};
bgImage.src = "images/background.png";
注：把bgImage.src 写在bgImage.onload之后是为了解决IE显示的bug。
3.定义游戏要使用的对象
//游戏对象
var hero ={
speed:256, //英雄每秒移动的速度，即256px/s
x:0,
y:0
};
var monster ={
x:0,
y:0
};
var monstersCaught =0;
//monsterCaught表示玩家抓住的怪物数量。
4.处理玩家输入
5.新游戏
6.更新对象
7.渲染对象
8.游戏主循环
9.开始游戏
用html5 Canvas制作一个简单的游戏 英雄抓小怪物（上）相关推荐
- [译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
- html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
- 怎样用HTML5 Canvas制作一个简单的游戏
为了让大家清楚HTML5制作游戏的简单流程,所以先了制作一个非常简单的游戏,来看一看这个过程. 游戏非常简单,无非就是英雄抓住怪物就得分,然后游戏重新开始,怪物出现在地图的随机位置,英雄初始化在地 ...
- html5 游戏制作教程,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
- 网页游戏制作html5,利用HTML5 Canvas制作一个简单的打飞机游戏
之前在当耐特的DEMO里看到个打飞机的游戏,然后就把他的图片和音频扒了了下来....自己凭着玩的心情重新写了一个.仅供娱乐哈......我没有用框架,所有js都是自己写的......所以就可以来当个简 ...
- html5 canvas 实现一个简单的叮当猫头部
html5 canvas 实现一个简单的叮当猫头部 原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单 ...
- 使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
一.制作一个简单的logo 1. 结构与样式分析 首先我们根据logo的图片分析logo的效果,该logo由6个字母组成.在使用"数码测色计"测出logo的颜色,这里我们测出log ...
- 如何制作一个简单的游戏 Cocos2d x 2 0 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文实践 ...
- 如何制作一个简单的游戏 Cocos2d-x 2.0.4
本文实践自 Ray Wenderlich 的文章< How To Make A Simple iPhone Game with Cocos2D 2.X Tutorial>,文中使用Coco ...
最新文章
- 作为一名合格的前端开发工程师需要会哪些
- 未来的全能保姆机器人作文_保姆机器人作文500字
- Linux的shell脚本函数教程
- redis 原码安装
- c语言中，char型数据是以什么形式存储的？
- tensorflow 安装在Anaconda
- 实战系列-Spring Cloud微服务中三把利器Feign、Hystrix、Ribbon
- java并发编程-基础
- sed 删除行首空格
- php连接云数据库服务器,服务器使用PHP连接sqlserver数据库
- Machine Learning 务实----Applying deep learning to real-world problems
- Spring BeanFactory、ApplicationContext IOC 容器获取与使用
- maya mentray_mental ray2016中文版下载|
- android助手最新版本,Android 开发助手功能及版本介绍
- python中file是什么意思_Python中的file和open用法详解
- 解决ROS中运行launch文件报错ERROR: cannot launch node of type[xxx/xxx]:xxx的问题
- 【已解决】ubuntu无法进入启动页面，全屏出现【ｏｋ】并且不停闪烁
- python父亲节礼物_盘点父亲节礼物，爸爸们的礼物也要用心挑选～
- ResNet网络 残差块的作用
- TortoiseSVN安装失败——Please install the universal CRT first