docker/pacman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated 主角绘制

Browse Source
This commit is contained in:
郑浩乐 2016-01-04 10:58:11 +08:00
parent ad0b5b4393
commit b61eb83c41
3 changed files with 136 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
game.js
View File

@ -75,12 +75,27 @@ function Game(id,options){
this[i] = options[i]||settings[i]; this[i] = options[i]||settings[i];
} }
}; };
Map.prototype.get = function(j,i){ //获取地图上某点的值
if(this.data[j]&&typeof this.data[j][i]!='undefined'){ Map.prototype.get = function(x,y){
return this.data[j][i]; if(this.data[y]&&typeof this.data[y][x]!='undefined'){
return this.data[y][x];
} }
return -1; return -1;
}; };
//地图坐标转画布坐标
Map.prototype.coord2position = function(x,y){
return {
x:this.x+x*this.size+this.size/2,
y:this.y+y*this.size+this.size/2
};
};
//画布坐标转地图坐标
Map.prototype.position2coord = function(x,y){
return {
x:Math.floor((x-this.x)/this.size-.5),
y:Math.floor((y-this.y)/this.size-.5)
};
};
//布景对象构造器 //布景对象构造器
var Stage = function(options){ var Stage = function(options){
options = options||{}; options = options||{};

2
index.html
View File

@ -9,7 +9,7 @@
</style> </style>
</head> </head>
<body> <body>
<canvas id="canvas">Canvas not supported</canvas> <canvas id="canvas" width="960" height="640">Canvas not supported</canvas>
<script src="game.js"></script> <script src="game.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>

115
index.js
View File

@ -63,7 +63,14 @@
}); });
})(); })();
//游戏主程序 //游戏主程序
var map_data = [ (function(){
var MAP_ORIENTATION = { //地图方向
'38':0,
'39':1,
'40':2,
'37':3
},
MAP_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,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,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],
@ -95,8 +102,8 @@
[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,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] [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]
]; //地图数据 ],
(function(){ MAP_SIZE = 20; //地图大小
var stage = game.createStage(); var stage = game.createStage();
stage.bind('keydown',function(e){ stage.bind('keydown',function(e){
switch(e.keyCode){ switch(e.keyCode){
@ -107,96 +114,95 @@
} }
}); });
//绘制地图 //绘制地图
stage.createMap({ var map = stage.createMap({
x:60, x:50,
y:15, y:10,
data:map_data, data:MAP_DATA,
draw:function(context){ draw:function(context){
var x_length = this.data[0].length;
var y_length = this.data.length; var y_length = this.data.length;
for(var i=0; i<x_length; i++){ var x_length = this.data[0].length;
for(var j=0; j<y_length; j++){ for(var j=0; j<y_length; j++){
for(var i=0; i<x_length; i++){
context.lineWidth = 2; context.lineWidth = 2;
context.strokeStyle="#09c"; context.strokeStyle="#09C";
if(this.get(j,i)){ if(this.get(i,j)){
var x = this.x+i*this.size;
var y = this.y+j*this.size;
var code = 0; var code = 0;
if(this.get(j-1,i)&&!(this.get(j-1,i-1)&&this.get(j-1,i+1)&&this.get(j,i-1)&&this.get(j,i+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))){
if(j){ if(j){
code += 1000; code += 1000;
} }
} }
if(this.get(j,i+1)&&!(this.get(j-1,i+1)&&this.get(j+1,i+1)&&this.get(j-1,i)&&this.get(j+1,i))){ 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))){
if(i<x_length-1){ if(i<x_length-1){
code += 100; code += 100;
} }
} }
if(this.get(j+1,i)&&!(this.get(j+1,i-1)&&this.get(j+1,i+1)&&this.get(j,i-1)&&this.get(j,i+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))){
if(j<y_length-1){ if(j<y_length-1){
code += 10; code += 10;
} }
} }
if(this.get(j,i-1)&&!(this.get(j-1,i-1)&&this.get(j+1,i-1)&&this.get(j-1,i)&&this.get(j+1,i))){ 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))){
if(i){ if(i){
code += 1; code += 1;
} }
} }
if(code){ if(code){
var pos = this.coord2position(i,j);
switch(code){ switch(code){
case 1100: case 1100:
context.beginPath(); context.beginPath();
context.arc(x+this.size/2,y-this.size/2,this.size/2,.5*Math.PI,1*Math.PI,false); 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.stroke();
context.closePath(); context.closePath();
break; break;
case 110: case 110:
context.beginPath(); context.beginPath();
context.arc(x+this.size/2,y+this.size/2,this.size/2,Math.PI,1.5*Math.PI,false); 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.stroke();
context.closePath(); context.closePath();
break; break;
case 11: case 11:
context.beginPath(); context.beginPath();
context.arc(x-this.size/2,y+this.size/2,this.size/2,1.5*Math.PI,2*Math.PI,false); 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.stroke();
context.closePath(); context.closePath();
break; break;
case 1001: case 1001:
context.beginPath(); context.beginPath();
context.arc(x-this.size/2,y-this.size/2,this.size/2,0,.5*Math.PI,false); context.arc(pos.x-this.size/2,pos.y-this.size/2,this.size/2,0,.5*Math.PI,false);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
break; break;
default: default:
if(Math.floor(code/1000)){ if(Math.floor(code/1000)){
context.beginPath(); context.beginPath();
context.moveTo(x,y); context.moveTo(pos.x,pos.y);
context.lineTo(x,y-this.size/2); context.lineTo(pos.x,pos.y-this.size/2);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
} }
code %= 1000; code %= 1000;
if(Math.floor(code/100)){ if(Math.floor(code/100)){
context.beginPath(); context.beginPath();
context.moveTo(x,y); context.moveTo(pos.x,pos.y);
context.lineTo(x+this.size/2,y); context.lineTo(pos.x+this.size/2,pos.y);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
} }
code %= 100; code %= 100;
if(Math.floor(code/10)){ if(Math.floor(code/10)){
context.beginPath(); context.beginPath();
context.moveTo(x,y); context.moveTo(pos.x,pos.y);
context.lineTo(x,y+this.size/2); context.lineTo(pos.x,pos.y+this.size/2);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
} }
code %= 10; code %= 10;
if(Math.floor(code/1)){ if(Math.floor(code/1)){
context.beginPath(); context.beginPath();
context.moveTo(x,y); context.moveTo(pos.x,pos.y);
context.lineTo(x-this.size/2,y); context.lineTo(pos.x-this.size/2,pos.y);
context.stroke(); context.stroke();
context.closePath(); context.closePath();
} }
@ -207,6 +213,57 @@
} }
} }
}); });
//主角
var pos = map.coord2position(14,23);
var player = stage.createItem({
x:pos.x-MAP_SIZE/2,
y:pos.y,
width:30,
height:30,
orientation:3,
speed:10,
draw:function(context){
context.fillStyle = '#FC3';
context.beginPath();
switch(this.orientation){
case 0:
if(this.frames%2){
context.arc(this.x,this.y,this.width/2,1.70*Math.PI,1.30*Math.PI,false);
}else{
context.arc(this.x,this.y,this.width/2,1.51*Math.PI,1.49*Math.PI,false);
}
break;
case 1:
if(this.frames%2){
context.arc(this.x,this.y,this.width/2,.20*Math.PI,1.80*Math.PI,false);
}else{
context.arc(this.x,this.y,this.width/2,.01*Math.PI,1.99*Math.PI,false);
}
break;
case 2:
if(this.frames%2){
context.arc(this.x,this.y,this.width/2,.70*Math.PI,.30*Math.PI,false);
}else{
context.arc(this.x,this.y,this.width/2,.51*Math.PI,.49*Math.PI,false);
}
break;
case 3:
if(this.frames%2){
context.arc(this.x,this.y,this.width/2,1.20*Math.PI,.80*Math.PI,false);
}else{
context.arc(this.x,this.y,this.width/2,1.01*Math.PI,.99*Math.PI,false);
}
break;
}
context.lineTo(this.x,this.y);
context.closePath();
context.fill();
}
});
stage.bind('keydown',function(e){
player.orientation = MAP_ORIENTATION[e.keyCode];
});
})(); })();
game.init(); game.init();
game.nextStage(); //测试游戏主布景
})(); })();