Merge branch 'gh-pages'
Conflicts: README.md game.js index.html index.js
This commit is contained in:
mumuy
commit
e2f9f6ced8
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Haole Zheng
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
20
README.md
Normal file
20
README.md
Normal file
@ -0,0 +1,20 @@
|
||||
# Pacman 吃豆游戏
|
||||
|
||||
- 演示分支：gh-pages
|
||||
|
||||
- 代码发布分支：master
|
||||
|
||||
- 项目演示(DEMO)地址：http://passer-by.com/pacman/
|
||||
|
||||
### 版权
|
||||
本游戏由 [passer-by.com](http://passer-by.com/) 制作，请尊重作者，引用请注明来源。
|
||||
|
||||
功能
|
||||
|
||||
- [x] 地图绘制
|
||||
- [x] 玩家控制
|
||||
- [x] NPC根据玩家坐标实时自动寻径
|
||||
- [x] 吃豆积分系统
|
||||
- [x] 能量豆功能
|
||||
- [ ] 特殊物品记分
|
||||
- [ ] 多关卡
|
||||
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
418
game.js
Normal file
418
game.js
Normal file
@ -0,0 +1,418 @@
|
||||
'use strict';
|
||||
/*
|
||||
* 小型游戏引擎
|
||||
*/
|
||||
|
||||
// requestAnimationFrame polyfill
|
||||
if (!Date.now)
|
||||
Date.now = function() { return new Date().getTime(); };
|
||||
(function() {
|
||||
'use strict';
|
||||
var vendors = ['webkit', 'moz'];
|
||||
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
|
||||
var vp = vendors[i];
|
||||
window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame'] || window[vp+'CancelRequestAnimationFrame']);
|
||||
}
|
||||
if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
|
||||
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) {
|
||||
var lastTime = 0;
|
||||
window.requestAnimationFrame = function(callback) {
|
||||
var now = Date.now();
|
||||
var nextTime = Math.max(lastTime + 16, now);
|
||||
return setTimeout(function() { callback(lastTime = nextTime); },
|
||||
nextTime - now);
|
||||
};
|
||||
window.cancelAnimationFrame = clearTimeout;
|
||||
}
|
||||
}());
|
||||
|
||||
function Game(id,params){
|
||||
var _ = this;
|
||||
var settings = {
|
||||
width:960, //画布宽度
|
||||
height:640 //画布高度
|
||||
};
|
||||
var _extend = function(target,settings,params){
|
||||
params = params||{};
|
||||
for(var i in settings){
|
||||
target[i] = params[i]||settings[i];
|
||||
}
|
||||
return target;
|
||||
};
|
||||
_extend(_,settings,params);
|
||||
var $canvas = document.getElementById(id);
|
||||
$canvas.width = _.width;
|
||||
$canvas.height = _.height;
|
||||
var _context = $canvas.getContext('2d'); //画布上下文环境
|
||||
var _stages = []; //布景对象队列
|
||||
var _events = {}; //事件集合
|
||||
var _index=0, //当前布景索引
|
||||
_hander; //帧动画控制
|
||||
//活动对象构造
|
||||
var Item = function(params){
|
||||
this._params = params||{};
|
||||
this._id = 0; //标志符
|
||||
this._stage = null; //与所属布景绑定
|
||||
this._settings = {
|
||||
x:0, //位置坐标:横坐标
|
||||
y:0, //位置坐标:纵坐标
|
||||
width:20, //宽
|
||||
height:20, //高
|
||||
type:0, //对象类型,0表示普通对象(不与地图绑定),1表示玩家控制对象,2表示程序控制对象
|
||||
color:'#F00', //标识颜色
|
||||
status:1, //对象状态,0表示未激活/结束,1表示正常,2表示暂停,3表示临时,4表示异常
|
||||
orientation:0, //当前定位方向,0表示右,1表示下,2表示左,3表示上
|
||||
speed:0, //移动速度
|
||||
//地图相关
|
||||
location:null, //定位地图,Map对象
|
||||
coord:null, //如果对象与地图绑定,需设置地图坐标;若不绑定,则设置位置坐标
|
||||
path:[], //NPC自动行走的路径
|
||||
vector:null, //目标坐标
|
||||
//布局相关
|
||||
frames:1, //速度等级,内部计算器times多少帧变化一次
|
||||
times:0, //刷新画布计数(用于循环动画状态判断)
|
||||
timeout:0, //倒计时(用于过程动画状态判断)
|
||||
control:{}, //控制缓存,到达定位点时处理
|
||||
update:function(){}, //更新参数信息
|
||||
draw:function(){} //绘制
|
||||
};
|
||||
_extend(this,this._settings,this._params);
|
||||
};
|
||||
Item.prototype.bind = function(eventType,callback){
|
||||
if(!_events[eventType]){
|
||||
_events[eventType] = {};
|
||||
$canvas.addEventListener(eventType,function(e){
|
||||
var position = _.getPosition(e);
|
||||
_stages[_index].items.forEach(function(item){
|
||||
if(Math.abs(position.x-item.x)<item.width/2&&Math.abs(position.y-item.y)<item.height/2){
|
||||
var key = 's'+_index+'i'+item._id;
|
||||
if(_events[eventType][key]){
|
||||
_events[eventType][key](e);
|
||||
}
|
||||
}
|
||||
});
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
_events[eventType]['s'+this._stage.index+'i'+this._id] = callback.bind(this); //绑定作用域
|
||||
};
|
||||
//地图对象构造器
|
||||
var Map = function(params){
|
||||
this._params = params||{};
|
||||
this._id = 0; //标志符
|
||||
this._stage = null; //与所属布景绑定
|
||||
this._settings = {
|
||||
x:0, //地图起点坐标
|
||||
y:0,
|
||||
size:20, //地图单元的宽度
|
||||
data:[], //地图数据
|
||||
x_length:0, //二维数组x轴长度
|
||||
y_length:0, //二维数组y轴长度
|
||||
frames:1, //速度等级,内部计算器times多少帧变化一次
|
||||
times:0, //刷新画布计数(用于循环动画状态判断)
|
||||
cache:false, //是否静态（如静态则设置缓存）
|
||||
update:function(){}, //更新地图数据
|
||||
draw:function(){}, //绘制地图
|
||||
};
|
||||
_extend(this,this._settings,this._params);
|
||||
};
|
||||
//获取地图上某点的值
|
||||
Map.prototype.get = function(x,y){
|
||||
if(this.data[y]&&typeof this.data[y][x]!='undefined'){
|
||||
return this.data[y][x];
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
//设置地图上某点的值
|
||||
Map.prototype.set = function(x,y,value){
|
||||
if(this.data[y]){
|
||||
this.data[y][x] = value;
|
||||
}
|
||||
};
|
||||
//地图坐标转画布坐标
|
||||
Map.prototype.coord2position = function(cx,cy){
|
||||
return {
|
||||
x:this.x+cx*this.size+this.size/2,
|
||||
y:this.y+cy*this.size+this.size/2
|
||||
};
|
||||
};
|
||||
//画布坐标转地图坐标
|
||||
Map.prototype.position2coord = function(x,y){
|
||||
var fx = Math.abs(x-this.x)%this.size-this.size/2;
|
||||
var fy = Math.abs(y-this.y)%this.size-this.size/2;
|
||||
return {
|
||||
x:Math.floor((x-this.x)/this.size),
|
||||
y:Math.floor((y-this.y)/this.size),
|
||||
offset:Math.sqrt(fx*fx+fy*fy)
|
||||
};
|
||||
};
|
||||
//寻址算法
|
||||
Map.prototype.finder = function(params){
|
||||
var defaults = {
|
||||
map:null,
|
||||
start:{},
|
||||
end:{},
|
||||
type:'path'
|
||||
};
|
||||
var options = _extend({},defaults,params);
|
||||
if(options.map[options.start.y][options.start.x]||options.map[options.end.y][options.end.x]){ //当起点或终点设置在墙上
|
||||
return [];
|
||||
}
|
||||
var finded = false;
|
||||
var result = [];
|
||||
var y_length = options.map.length;
|
||||
var x_length = options.map[0].length;
|
||||
var steps = []; //步骤的映射
|
||||
for(var y=y_length;y--;){
|
||||
steps[y] = new Array(x_length).fill(0);
|
||||
}
|
||||
var _getValue = function(x,y){ //获取地图上的值
|
||||
if(options.map[y]&&typeof options.map[y][x]!='undefined'){
|
||||
return options.map[y][x];
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
var _next = function(to){ //判定是否可走,可走放入列表
|
||||
var value = _getValue(to.x,to.y);
|
||||
if(value<1){
|
||||
if(value==-1){
|
||||
to.x = (to.x+x_length)%x_length;
|
||||
to.y = (to.y+y_length)%y_length;
|
||||
to.change = 1;
|
||||
}
|
||||
if(!steps[to.y][to.x]){
|
||||
result.push(to);
|
||||
}
|
||||
}
|
||||
};
|
||||
var _render = function(list){//找线路
|
||||
var new_list = [];
|
||||
var next = function(from,to){
|
||||
var value = _getValue(to.x,to.y);
|
||||
if(value<1){ //当前点是否可以走
|
||||
if(value==-1){
|
||||
to.x = (to.x+x_length)%x_length;
|
||||
to.y = (to.y+y_length)%y_length;
|
||||
to.change = 1;
|
||||
}
|
||||
if(to.x==options.end.x&&to.y==options.end.y){
|
||||
steps[to.y][to.x] = from;
|
||||
finded = true;
|
||||
}else if(!steps[to.y][to.x]){
|
||||
steps[to.y][to.x] = from;
|
||||
new_list.push(to);
|
||||
}
|
||||
}
|
||||
};
|
||||
list.forEach(function(current){
|
||||
next(current,{y:current.y+1,x:current.x});
|
||||
next(current,{y:current.y,x:current.x+1});
|
||||
next(current,{y:current.y-1,x:current.x});
|
||||
next(current,{y:current.y,x:current.x-1});
|
||||
});
|
||||
if(!finded&&new_list.length){
|
||||
_render(new_list);
|
||||
}
|
||||
};
|
||||
_render([options.start]);
|
||||
if(finded){
|
||||
var current=options.end;
|
||||
if(options.type=='path'){
|
||||
while(current.x!=options.start.x||current.y!=options.start.y){
|
||||
result.unshift(current);
|
||||
current=steps[current.y][current.x];
|
||||
}
|
||||
}else if(options.type=='next'){
|
||||
_next({x:current.x+1,y:current.y});
|
||||
_next({x:current.x,y:current.y+1});
|
||||
_next({x:current.x-1,y:current.y});
|
||||
_next({x:current.x,y:current.y-1});
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
//布景对象构造器
|
||||
var Stage = function(params){
|
||||
this._params = params||{};
|
||||
this._settings = {
|
||||
index:0, //布景索引
|
||||
status:0, //布景状态,0表示未激活/结束,1表示正常,2表示暂停,3表示临时,4表示异常
|
||||
maps:[], //地图队列
|
||||
audio:[], //音频资源
|
||||
images:[], //图片资源
|
||||
items:[], //对象队列
|
||||
timeout:0, //倒计时(用于过程动画状态判断)
|
||||
update:function(){} //嗅探,处理布局下不同对象的相对关系
|
||||
};
|
||||
_extend(this,this._settings,this._params);
|
||||
};
|
||||
//添加对象
|
||||
Stage.prototype.createItem = function(options){
|
||||
var item = new Item(options);
|
||||
//动态属性
|
||||
if(item.location){
|
||||
var position = item.location.coord2position(item.coord.x,item.coord.y);
|
||||
item.x = position.x;
|
||||
item.y = position.y;
|
||||
}
|
||||
//关系绑定
|
||||
item._stage = this;
|
||||
item._id = this.items.length;
|
||||
this.items.push(item);
|
||||
return item;
|
||||
};
|
||||
//重置物体位置
|
||||
Stage.prototype.resetItems = function(){
|
||||
this.status = 1;
|
||||
this.items.forEach(function(item,index){
|
||||
_extend(item,item._settings,item._params);
|
||||
if(item.location){
|
||||
var position = item.location.coord2position(item.coord.x,item.coord.y);
|
||||
item.x = position.x;
|
||||
item.y = position.y;
|
||||
}
|
||||
});
|
||||
};
|
||||
//获取对象列表
|
||||
Stage.prototype.getItemsByType = function(type){
|
||||
return this.items.filter(function(item){
|
||||
if(item.type==type){
|
||||
return item;
|
||||
}
|
||||
});
|
||||
};
|
||||
//添加地图
|
||||
Stage.prototype.createMap = function(options){
|
||||
var map = new Map(options);
|
||||
//动态属性
|
||||
map.data = JSON.parse(JSON.stringify(map._params.data));
|
||||
map.y_length = map.data.length;
|
||||
map.x_length = map.data[0].length;
|
||||
map.imageData = null;
|
||||
//关系绑定
|
||||
map._stage = this;
|
||||
map._id = this.maps.length;
|
||||
this.maps.push(map);
|
||||
return map;
|
||||
};
|
||||
//重置地图
|
||||
Stage.prototype.resetMaps = function(){
|
||||
this.status = 1;
|
||||
this.maps.forEach(function(map){
|
||||
_extend(map,map._settings,map._params);
|
||||
map.data = JSON.parse(JSON.stringify(map._params.data));
|
||||
map.y_length = map.data.length;
|
||||
map.x_length = map.data[0].length;
|
||||
map.imageData = null;
|
||||
});
|
||||
};
|
||||
//重置
|
||||
Stage.prototype.reset = function(){
|
||||
_extend(this,this._settings,this._params);
|
||||
this.resetItems();
|
||||
this.resetMaps();
|
||||
};
|
||||
//绑定事件
|
||||
Stage.prototype.bind = function(eventType,callback){
|
||||
if(!_events[eventType]){
|
||||
_events[eventType] = {};
|
||||
window.addEventListener(eventType,function(e){
|
||||
var key = 's' + _index;
|
||||
if(_events[eventType][key]){
|
||||
_events[eventType][key](e);
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
}
|
||||
_events[eventType]['s'+this.index] = callback.bind(this); //绑定事件作用域
|
||||
};
|
||||
//动画开始
|
||||
this.start = function() {
|
||||
var f = 0; //帧数计算
|
||||
var fn = function(){
|
||||
var stage = _stages[_index];
|
||||
_context.clearRect(0,0,_.width,_.height); //清除画布
|
||||
f++;
|
||||
if(stage.timeout){
|
||||
stage.timeout--;
|
||||
}
|
||||
if(stage.update()!=false){ //update返回false,则不绘制
|
||||
stage.maps.forEach(function(map){
|
||||
if(!(f%map.frames)){
|
||||
map.times = f/map.frames; //计数器
|
||||
}
|
||||
if(map.cache){
|
||||
if(!map.imageData){
|
||||
_context.save();
|
||||
map.draw(_context);
|
||||
map.imageData = _context.getImageData(0,0,_.width,_.height);
|
||||
_context.restore();
|
||||
}else{
|
||||
_context.putImageData(map.imageData,0,0);
|
||||
}
|
||||
}else{
|
||||
map.update();
|
||||
map.draw(_context);
|
||||
}
|
||||
});
|
||||
stage.items.forEach(function(item){
|
||||
if(!(f%item.frames)){
|
||||
item.times = f/item.frames; //计数器
|
||||
}
|
||||
if(stage.status==1&&item.status!=2){ //对象及布景状态都不处于暂停状态
|
||||
if(item.location){
|
||||
item.coord = item.location.position2coord(item.x,item.y);
|
||||
}
|
||||
if(item.timeout){
|
||||
item.timeout--;
|
||||
}
|
||||
item.update();
|
||||
}
|
||||
item.draw(_context);
|
||||
});
|
||||
}
|
||||
_hander = requestAnimationFrame(fn);
|
||||
};
|
||||
_hander = requestAnimationFrame(fn);
|
||||
};
|
||||
//动画结束
|
||||
this.stop = function(){
|
||||
_hander&&cancelAnimationFrame(_hander);
|
||||
};
|
||||
//事件坐标
|
||||
this.getPosition = function(e){
|
||||
var box = $canvas.getBoundingClientRect();
|
||||
return {
|
||||
x:e.clientX-box.left*(_.width/box.width),
|
||||
y:e.clientY-box.top*(_.height/box.height)
|
||||
};
|
||||
}
|
||||
//创建布景
|
||||
this.createStage = function(options){
|
||||
var stage = new Stage(options);
|
||||
stage.index = _stages.length;
|
||||
_stages.push(stage);
|
||||
return stage;
|
||||
};
|
||||
//指定布景
|
||||
this.setStage = function(index){
|
||||
_stages[_index].status = 0;
|
||||
_index = index;
|
||||
_stages[_index].status = 1;
|
||||
return _stages[_index];
|
||||
};
|
||||
//下个布景
|
||||
this.nextStage = function(){
|
||||
if(_index<_stages.length-1){
|
||||
return this.setStage(++_index);
|
||||
}else{
|
||||
throw new Error('unfound new stage.');
|
||||
}
|
||||
};
|
||||
//初始化游戏引擎
|
||||
this.init = function(){
|
||||
_index = 0;
|
||||
this.start();
|
||||
};
|
||||
}
|
||||
39
index.html
Normal file
39
index.html
Normal file
@ -0,0 +1,39 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8">
|
||||
<title>Pac-Man . 吃豆游戏</title>
|
||||
<link rel="shortcut icon" href="favicon.png">
|
||||
<style>
|
||||
*{padding:0;margin:0;}
|
||||
.wrapper{
|
||||
width: 960px;
|
||||
margin:0 auto;
|
||||
line-height:36px;
|
||||
text-align:center;
|
||||
color:#999;
|
||||
}
|
||||
canvas{display:block;background: #000;}
|
||||
.mod-botton{
|
||||
height: 32px;
|
||||
padding: 15px 0;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<canvas id="canvas" width="960" height="640">不支持画布</canvas>
|
||||
<p>按［空格］暂停或继续</p>
|
||||
<div class="mod-botton">
|
||||
<a class="github-button" href="https://github.com/mumuy" data-style="mega" data-count-href="/mumuy/followers" data-count-api="/users/mumuy#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @mumuy on GitHub">Follow @mumuy</a>
|
||||
<a class="github-button" href="https://github.com/mumuy/pacman" data-style="mega" data-count-href="/mumuy/pacman/stargazers" data-count-api="/repos/mumuy/pacman#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star mumuy/pacman on GitHub">Star</a>
|
||||
</div>
|
||||
</div>
|
||||
<script src="game.js"></script>
|
||||
<script src="index.js"></script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
<div style="display: none;">
|
||||
<script src="http://s95.cnzz.com/z_stat.php?id=1258310068&web_id=1258310068"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
557
index.js
Normal file
557
index.js
Normal file
@ -0,0 +1,557 @@
|
||||
//主程序,业务逻辑
|
||||
(function(){
|
||||
var _DATA = [ //地图数据
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
||||
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
||||
[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
|
||||
[1,0,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,0,1],
|
||||
[1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],
|
||||
[1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,1,1,2,2,1,1,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,0,0,0,0],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,2,2,2,2,2,2,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
||||
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1],
|
||||
[1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1],
|
||||
[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
|
||||
[1,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,1,0,1,1,1],
|
||||
[1,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1],
|
||||
[1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],
|
||||
[1,0,1,1,1,1,1,1,1,1,1,1,0,1,1,0,1,1,1,1,1,1,1,1,1,1,0,1],
|
||||
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
|
||||
],
|
||||
_GOODS = { //能量豆
|
||||
'1,3':1,
|
||||
'26,3':1,
|
||||
'1,23':1,
|
||||
'26,23':1
|
||||
},
|
||||
_COS = [1,0,-1,0],
|
||||
_SIN = [0,1,0,-1],
|
||||
_COLOR = ['#F00','#F93','#0CF','#F9C'],//红,橙,
|
||||
_LIFE = 3,
|
||||
_SCORE = 0; //得分
|
||||
|
||||
var game = new Game('canvas');
|
||||
//启动页
|
||||
(function(){
|
||||
var stage = game.createStage();
|
||||
//logo
|
||||
stage.createItem({
|
||||
x:game.width/2,
|
||||
y:game.height*.45,
|
||||
width:100,
|
||||
height:100,
|
||||
frames:3,
|
||||
draw:function(context){
|
||||
var t = Math.abs(5-this.times%10);
|
||||
context.fillStyle = '#FFE600';
|
||||
context.beginPath();
|
||||
context.arc(this.x,this.y,this.width/2,t*.04*Math.PI,(2-t*.04)*Math.PI,false);
|
||||
context.lineTo(this.x,this.y);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
context.fillStyle = '#000';
|
||||
context.beginPath();
|
||||
context.arc(this.x+5,this.y-27,7,0,2*Math.PI,false);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
}
|
||||
});
|
||||
//游戏名
|
||||
stage.createItem({
|
||||
x:game.width/2,
|
||||
y:game.height*.6,
|
||||
draw:function(context){
|
||||
context.font = 'bold 42px Helvetica';
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'middle';
|
||||
context.fillStyle = '#FFF';
|
||||
context.fillText('Pac-Man',this.x,this.y);
|
||||
}
|
||||
});
|
||||
//版权信息
|
||||
stage.createItem({
|
||||
x:game.width-12,
|
||||
y:game.height-5,
|
||||
draw:function(context){
|
||||
context.font = '14px Helvetica';
|
||||
context.textAlign = 'right';
|
||||
context.textBaseline = 'bottom';
|
||||
context.fillStyle = '#AAA';
|
||||
context.fillText('© passer-by.com',this.x,this.y);
|
||||
}
|
||||
});
|
||||
//事件绑定
|
||||
stage.bind('keydown',function(e){
|
||||
switch(e.keyCode){
|
||||
case 13:
|
||||
case 32:
|
||||
game.nextStage();
|
||||
break;
|
||||
}
|
||||
});
|
||||
})();
|
||||
//游戏主程序
|
||||
(function(){
|
||||
var stage,map,beans,player,times;
|
||||
stage = game.createStage({
|
||||
update:function(){
|
||||
var stage = this;
|
||||
if(stage.status==1){ //场景正常运行
|
||||
items.forEach(function(item){
|
||||
if(map&&!map.get(item.coord.x,item.coord.y)&&!map.get(player.coord.x,player.coord.y)){
|
||||
var dx = item.x-player.x;
|
||||
var dy = item.y-player.y;
|
||||
if(dx*dx+dy*dy<750&&item.status!=4){ //物体检测
|
||||
if(item.status==3){
|
||||
item.status = 4;
|
||||
_SCORE += 10;
|
||||
}else{
|
||||
stage.status = 3;
|
||||
stage.timeout = 30;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
if(JSON.stringify(beans.data).indexOf(0)<0){ //当没有物品的时候，进入结束画面
|
||||
game.nextStage();
|
||||
}
|
||||
}else if(stage.status==3){ //场景临时状态
|
||||
if(!stage.timeout){
|
||||
_LIFE--;
|
||||
if(_LIFE){
|
||||
stage.resetItems();
|
||||
}else{
|
||||
game.nextStage();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
//绘制地图
|
||||
map = stage.createMap({
|
||||
x:60,
|
||||
y:10,
|
||||
data:_DATA,
|
||||
cache:true,
|
||||
draw:function(context){
|
||||
context.lineWidth = 2;
|
||||
for(var j=0; j<this.y_length; j++){
|
||||
for(var i=0; i<this.x_length; i++){
|
||||
var value = this.get(i,j);
|
||||
if(value){
|
||||
var code = [0,0,0,0];
|
||||
if(this.get(i+1,j)&&!(this.get(i+1,j-1)&&this.get(i+1,j+1)&&this.get(i,j-1)&&this.get(i,j+1))){
|
||||
code[0]=1;
|
||||
}
|
||||
if(this.get(i,j+1)&&!(this.get(i-1,j+1)&&this.get(i+1,j+1)&&this.get(i-1,j)&&this.get(i+1,j))){
|
||||
code[1]=1;
|
||||
}
|
||||
if(this.get(i-1,j)&&!(this.get(i-1,j-1)&&this.get(i-1,j+1)&&this.get(i,j-1)&&this.get(i,j+1))){
|
||||
code[2]=1;
|
||||
}
|
||||
if(this.get(i,j-1)&&!(this.get(i-1,j-1)&&this.get(i+1,j-1)&&this.get(i-1,j)&&this.get(i+1,j))){
|
||||
code[3]=1;
|
||||
}
|
||||
if(code.indexOf(1)>-1){
|
||||
context.strokeStyle=value==2?"#FFF":"#09C";
|
||||
var pos = this.coord2position(i,j);
|
||||
switch(code.join('')){
|
||||
case '1100':
|
||||
context.beginPath();
|
||||
context.arc(pos.x+this.size/2,pos.y+this.size/2,this.size/2,Math.PI,1.5*Math.PI,false);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
break;
|
||||
case '0110':
|
||||
context.beginPath();
|
||||
context.arc(pos.x-this.size/2,pos.y+this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
break;
|
||||
case '0011':
|
||||
context.beginPath();
|
||||
context.arc(pos.x-this.size/2,pos.y-this.size/2,this.size/2,0,.5*Math.PI,false);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
break;
|
||||
case '1001':
|
||||
context.beginPath();
|
||||
context.arc(pos.x+this.size/2,pos.y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
break;
|
||||
default:
|
||||
var dist = this.size/2;
|
||||
code.forEach(function(v,index){
|
||||
if(v){
|
||||
context.beginPath();
|
||||
context.moveTo(pos.x,pos.y);
|
||||
context.lineTo(pos.x-_COS[index]*dist,pos.y-_SIN[index]*dist);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
//物品地图
|
||||
beans = stage.createMap({
|
||||
x:60,
|
||||
y:10,
|
||||
data:_DATA,
|
||||
frames:8,
|
||||
draw:function(context){
|
||||
for(var j=0; j<this.y_length; j++){
|
||||
for(var i=0; i<this.x_length; i++){
|
||||
if(!this.get(i,j)){
|
||||
var pos = this.coord2position(i,j);
|
||||
context.fillStyle = "#F5F5DC";
|
||||
if(_GOODS[i+','+j]){
|
||||
context.beginPath();
|
||||
context.arc(pos.x,pos.y,3+this.times%2,0,2*Math.PI,true);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
}else{
|
||||
context.fillRect(pos.x-2,pos.y-2,4,4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
//得分
|
||||
stage.createItem({
|
||||
x:690,
|
||||
y:100,
|
||||
draw:function(context){
|
||||
context.font = 'bold 28px Helvetica';
|
||||
context.textAlign = 'left';
|
||||
context.textBaseline = 'bottom';
|
||||
context.fillStyle = '#C33';
|
||||
context.fillText('SCORE',this.x,this.y);
|
||||
context.font = '28px Helvetica';
|
||||
context.textAlign = 'left';
|
||||
context.textBaseline = 'top';
|
||||
context.fillStyle = '#FFF';
|
||||
context.fillText(_SCORE,this.x+12,this.y);
|
||||
}
|
||||
});
|
||||
//状态文字
|
||||
stage.createItem({
|
||||
x:690,
|
||||
y:320,
|
||||
frames:25,
|
||||
draw:function(context){
|
||||
if(stage.status==2&&this.times%2){
|
||||
context.font = '24px Helvetica';
|
||||
context.textAlign = 'left';
|
||||
context.textBaseline = 'center';
|
||||
context.fillStyle = '#09F';
|
||||
context.fillText('PAUSE',this.x,this.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
//生命值
|
||||
stage.createItem({
|
||||
x:705,
|
||||
y:540,
|
||||
width:30,
|
||||
height:30,
|
||||
draw:function(context){
|
||||
for(var i=0;i<_LIFE-1;i++){
|
||||
var x=this.x+40*i,y=this.y;
|
||||
context.fillStyle = '#FFE600';
|
||||
context.beginPath();
|
||||
context.arc(x,y,this.width/2,.15*Math.PI,-.15*Math.PI,false);
|
||||
context.lineTo(x,y);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
});
|
||||
//NPC
|
||||
for(var i=0;i<4;i++){
|
||||
stage.createItem({
|
||||
width:30,
|
||||
height:30,
|
||||
orientation:3,
|
||||
color:_COLOR[i],
|
||||
location:map,
|
||||
coord:{x:12+i,y:14},
|
||||
vector:{x:12+i,y:14},
|
||||
type:2,
|
||||
frames:10,
|
||||
speed:1,
|
||||
timeout:Math.floor(Math.random()*120),
|
||||
update:function(){
|
||||
var new_map;
|
||||
if(this.status==3&&!this.timeout){
|
||||
this.status = 1;
|
||||
}
|
||||
if(!this.coord.offset){ //到达坐标中心时计算
|
||||
if(this.status==1){
|
||||
if(!this.timeout){ //定时器
|
||||
new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));
|
||||
var id = this._id;
|
||||
items.forEach(function(item){
|
||||
if(item._id!=id&&item.status==1){ //NPC将其它所有还处于正常状态的NPC当成一堵墙
|
||||
new_map[item.coord.y][item.coord.x]=1;
|
||||
}
|
||||
});
|
||||
this.path = map.finder({
|
||||
map:new_map,
|
||||
start:this.coord,
|
||||
end:player.coord
|
||||
});
|
||||
if(this.path.length){
|
||||
this.vector = this.path[0];
|
||||
}
|
||||
}
|
||||
}else if(this.status==3){
|
||||
new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));
|
||||
var id = this._id;
|
||||
items.forEach(function(item){
|
||||
if(item._id!=id){
|
||||
new_map[item.coord.y][item.coord.x]=1;
|
||||
}
|
||||
});
|
||||
this.path = map.finder({
|
||||
map:new_map,
|
||||
start:player.coord,
|
||||
end:this.coord,
|
||||
type:'next'
|
||||
});
|
||||
if(this.path.length){
|
||||
this.vector = this.path[Math.floor(Math.random()*this.path.length)];
|
||||
}
|
||||
}else if(this.status==4){
|
||||
new_map = JSON.parse(JSON.stringify(map.data).replace(/2/g,0));
|
||||
this.path = map.finder({
|
||||
map:new_map,
|
||||
start:this.coord,
|
||||
end:this._params.coord
|
||||
});
|
||||
if(this.path.length){
|
||||
this.vector = this.path[0];
|
||||
}else{
|
||||
this.status = 1;
|
||||
}
|
||||
}
|
||||
//是否转变方向
|
||||
if(this.vector.change){
|
||||
this.coord.x = this.vector.x;
|
||||
this.coord.y = this.vector.y;
|
||||
var pos = map.coord2position(this.coord.x,this.coord.y);
|
||||
this.x = pos.x;
|
||||
this.y = pos.y;
|
||||
}
|
||||
//方向判定
|
||||
if(this.vector.x>this.coord.x){
|
||||
this.orientation = 0;
|
||||
}else if(this.vector.x<this.coord.x){
|
||||
this.orientation = 2;
|
||||
}else if(this.vector.y>this.coord.y){
|
||||
this.orientation = 1;
|
||||
}else if(this.vector.y<this.coord.y){
|
||||
this.orientation = 3;
|
||||
}
|
||||
}
|
||||
this.x += this.speed*_COS[this.orientation];
|
||||
this.y += this.speed*_SIN[this.orientation];
|
||||
},
|
||||
draw:function(context){
|
||||
var isSick = false;
|
||||
if(this.status==3){
|
||||
isSick = this.timeout>80||this.times%2?true:false;
|
||||
}
|
||||
if(this.status!=4){
|
||||
context.fillStyle = isSick?'#BABABA':this.color;
|
||||
context.beginPath();
|
||||
context.arc(this.x,this.y,this.width*.5,0,Math.PI,true);
|
||||
switch(this.times%2){
|
||||
case 0:
|
||||
context.lineTo(this.x-this.width*.5,this.y+this.height*.4);
|
||||
context.quadraticCurveTo(this.x-this.width*.4,this.y+this.height*.5,this.x-this.width*.2,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x,this.y+this.height*.5,this.x+this.width*.2,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x+this.width*.4,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.4);
|
||||
break;
|
||||
case 1:
|
||||
context.lineTo(this.x-this.width*.5,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x-this.width*.25,this.y+this.height*.5,this.x,this.y+this.height*.3);
|
||||
context.quadraticCurveTo(this.x+this.width*.25,this.y+this.height*.5,this.x+this.width*.5,this.y+this.height*.3);
|
||||
break;
|
||||
}
|
||||
context.fill();
|
||||
context.closePath();
|
||||
}
|
||||
context.fillStyle = '#FFF';
|
||||
if(isSick){
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.08,0,2*Math.PI,false);
|
||||
context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.08,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
}else{
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
|
||||
context.arc(this.x+this.width*.15,this.y-this.height*.21,this.width*.12,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
context.fillStyle = '#000';
|
||||
context.beginPath();
|
||||
context.arc(this.x-this.width*(.15-.04*_COS[this.orientation]),this.y-this.height*(.21-.04*_SIN[this.orientation]),this.width*.07,0,2*Math.PI,false);
|
||||
context.arc(this.x+this.width*(.15+.04*_COS[this.orientation]),this.y-this.height*(.21-.04*_SIN[this.orientation]),this.width*.07,0,2*Math.PI,false);
|
||||
context.fill();
|
||||
context.closePath();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
items = stage.getItemsByType(2);
|
||||
//主角
|
||||
player = stage.createItem({
|
||||
width:30,
|
||||
height:30,
|
||||
type:1,
|
||||
location:map,
|
||||
coord:{x:13.5,y:23},
|
||||
orientation:2,
|
||||
speed:2,
|
||||
frames:10,
|
||||
update:function(){
|
||||
var coord = this.coord;
|
||||
if(!coord.offset){
|
||||
if(this.control.orientation!='undefined'){
|
||||
if(!map.get(coord.x+_COS[this.control.orientation],coord.y+_SIN[this.control.orientation])){
|
||||
this.orientation = this.control.orientation;
|
||||
}
|
||||
}
|
||||
this.control = {};
|
||||
var value = map.get(coord.x+_COS[this.orientation],coord.y+_SIN[this.orientation]);
|
||||
if(value==0){
|
||||
this.x += this.speed*_COS[this.orientation];
|
||||
this.y += this.speed*_SIN[this.orientation];
|
||||
}else if(value<0){
|
||||
this.x -= map.size*(map.x_length-1)*_COS[this.orientation];
|
||||
this.y -= map.size*(map.y_length-1)*_SIN[this.orientation];
|
||||
}
|
||||
}else{
|
||||
if(!beans.get(this.coord.x,this.coord.y)){ //吃豆
|
||||
_SCORE++;
|
||||
beans.set(this.coord.x,this.coord.y,1);
|
||||
if(_GOODS[this.coord.x+','+this.coord.y]){ //吃到能量豆
|
||||
items.forEach(function(item){
|
||||
if(item.status==1||item.status==3){ //如果NPC为正常状态，则置为临时状态
|
||||
item.timeout = 450;
|
||||
item.status = 3;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
this.x += this.speed*_COS[this.orientation];
|
||||
this.y += this.speed*_SIN[this.orientation];
|
||||
}
|
||||
},
|
||||
draw:function(context){
|
||||
context.fillStyle = '#FFE600';
|
||||
context.beginPath();
|
||||
if(stage.status!=3){ //玩家正常状态
|
||||
if(this.times%2){
|
||||
context.arc(this.x,this.y,this.width/2,(.5*this.orientation+.20)*Math.PI,(.5*this.orientation-.20)*Math.PI,false);
|
||||
}else{
|
||||
context.arc(this.x,this.y,this.width/2,(.5*this.orientation+.01)*Math.PI,(.5*this.orientation-.01)*Math.PI,false);
|
||||
}
|
||||
}else{ //玩家被吃
|
||||
if(stage.timeout) {
|
||||
context.arc(this.x,this.y,this.width/2,(.5*this.orientation+1-.02*stage.timeout)*Math.PI,(.5*this.orientation-1+.02*stage.timeout)*Math.PI,false);
|
||||
}
|
||||
}
|
||||
context.lineTo(this.x,this.y);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
}
|
||||
});
|
||||
//事件绑定
|
||||
stage.bind('keydown',function(e){
|
||||
switch(e.keyCode){
|
||||
case 13: //回车
|
||||
case 32: //空格
|
||||
this.status = this.status==2?1:2;
|
||||
break;
|
||||
case 39: //右
|
||||
player.control = {orientation:0};
|
||||
break;
|
||||
case 40: //下
|
||||
player.control = {orientation:1};
|
||||
break;
|
||||
case 37: //左
|
||||
player.control = {orientation:2};
|
||||
break;
|
||||
case 38: //上
|
||||
player.control = {orientation:3};
|
||||
break;
|
||||
}
|
||||
});
|
||||
})();
|
||||
//结束画面
|
||||
(function(){
|
||||
var stage = game.createStage();
|
||||
//游戏结束
|
||||
stage.createItem({
|
||||
x:game.width/2,
|
||||
y:game.height*.35,
|
||||
draw:function(context){
|
||||
context.fillStyle = '#FFF';
|
||||
context.font = 'bold 48px Helvetica';
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'middle';
|
||||
context.fillText('GAME OVER',this.x,this.y);
|
||||
}
|
||||
});
|
||||
//记分
|
||||
stage.createItem({
|
||||
x:game.width/2,
|
||||
y:game.height*.5,
|
||||
draw:function(context){
|
||||
context.fillStyle = '#FFF';
|
||||
context.font = '20px Helvetica';
|
||||
context.textAlign = 'center';
|
||||
context.textBaseline = 'middle';
|
||||
context.fillText('FINAL SCORE: '+(_SCORE+50*Math.max(_LIFE-1,0)),this.x,this.y);
|
||||
}
|
||||
});
|
||||
//事件绑定
|
||||
stage.bind('keydown',function(e){
|
||||
switch(e.keyCode){
|
||||
case 13: //回车
|
||||
case 32: //空格
|
||||
_SCORE = 0;
|
||||
_LIFE = 3;
|
||||
var st = game.setStage(1);
|
||||
st.reset();
|
||||
break;
|
||||
}
|
||||
});
|
||||
})();
|
||||
game.init();
|
||||
})();
|
||||
Loading…
x
Reference in New Issue
Block a user