WEB前端开发人员交流社区

搜索
查看: 796|回复: 0

[HTML] 基于canvas的一款有趣HTML5吃豆游戏

[复制链接]

94

主题

150

帖子

148

积分

管理员

会在前端的道路上一直走下去!

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
148

社区QQ达人

发表于 2016-2-20 10:18:55 | 显示全部楼层 |阅读模式
  
  很早就知道canvas,当时一直没应用到,最近闲来无事就顺便写写看。吃豆游戏可以说是我们80,90后共同的回忆录,小时候常常在学习机上玩,所以也就有了强烈的欲望去写。为了写这个游戏,看了很多吃豆人游戏的相关信息,包括游戏规则,历史,其它相关游戏设计。又去了各个小游戏平台玩了下,找些灵感!!!就连最简单的配色,也是反复斟酌几个小时确定的方案……哈哈,不容易啊
  代码分两部分,游戏引擎和游戏主程序,引擎用来类的定义,管理动画场景,事件定义等等……游戏主程序主要组织业务逻辑。算面向对象编程吧,可以参考下
  路人甲版权所有哦,哈哈~可以关注github获得最新代码!纯手工打造
  是男人就吃光所有豆子!
  

[HTML] 纯文本查看 复制代码
<html>
	<head>
		<meta charset="utf8">
		<title>Pac-Man . 吃豆游戏</title>
		<style>
			*{padding:0;margin:0;}
			.wrapper{
				width: 960px;
				margin:0 auto;
				line-height:36px;
				text-align:center;
				color:#999;
			}
			canvas{display:block;background: #000;}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<canvas id="canvas" width="960" height="640">不支持画布</canvas>
			<p>按[空格]暂停或继续</p>
		</div>
		<script src="http://passer-by.com/pacman/game.js"></script>
		<script src="http://passer-by.com/pacman/index.js"></script>
	</body>
</html>

作者:passerby


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
WEB前端开发人员共同的技术交流平台,提倡开源、安全、自由、共享的网络精神! —— —— www.fedte.cn
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



Archiver|手机版|小黑屋|前端开发技术交流

Copyright © 2009-2015 前端开发技术交流 http://www.fedte.cn 版权所有 All Rights Reserved.

免责声明: 本社区不承担任何由社区会员所提供的信息和工具所引起的争议和法律责任。

GMT+8, 2020-9-23 05:34

快速回复 返回顶部 返回列表