updated 主角绘制
This commit is contained in:
郑浩乐
parent
ad0b5b4393
commit
b61eb83c41
21
game.js
21
game.js
@ -75,12 +75,27 @@ function Game(id,options){
|
||||
this[i] = options[i]||settings[i];
|
||||
}
|
||||
};
|
||||
Map.prototype.get = function(j,i){
|
||||
if(this.data[j]&&typeof this.data[j][i]!='undefined'){
|
||||
return this.data[j][i];
|
||||
//获取地图上某点的值
|
||||
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.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){
|
||||
options = options||{};
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<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="index.js"></script>
|
||||
</body>
|
||||
|
||||
177
index.js
177
index.js
@ -63,40 +63,47 @@
|
||||
});
|
||||
})();
|
||||
//游戏主程序
|
||||
var 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,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],
|
||||
[0,0,0,0,0,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,0,0,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
||||
[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]
|
||||
]; //地图数据
|
||||
(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,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],
|
||||
[0,0,0,0,0,1,0,1,1,1,1,1,0,1,1,0,1,1,1,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,0,0,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0],
|
||||
[1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0],
|
||||
[0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,1,1,0,1,1,0,1,0,0,0,0,0],
|
||||
[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]
|
||||
],
|
||||
MAP_SIZE = 20; //地图大小
|
||||
var stage = game.createStage();
|
||||
stage.bind('keydown',function(e){
|
||||
switch(e.keyCode){
|
||||
@ -107,96 +114,95 @@
|
||||
}
|
||||
});
|
||||
//绘制地图
|
||||
stage.createMap({
|
||||
x:60,
|
||||
y:15,
|
||||
data:map_data,
|
||||
var map = stage.createMap({
|
||||
x:50,
|
||||
y:10,
|
||||
data:MAP_DATA,
|
||||
draw:function(context){
|
||||
var x_length = this.data[0].length;
|
||||
var y_length = this.data.length;
|
||||
for(var i=0; i<x_length; i++){
|
||||
for(var j=0; j<y_length; j++){
|
||||
var x_length = this.data[0].length;
|
||||
for(var j=0; j<y_length; j++){
|
||||
for(var i=0; i<x_length; i++){
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle="#09c";
|
||||
if(this.get(j,i)){
|
||||
var x = this.x+i*this.size;
|
||||
var y = this.y+j*this.size;
|
||||
context.strokeStyle="#09C";
|
||||
if(this.get(i,j)){
|
||||
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){
|
||||
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){
|
||||
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){
|
||||
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){
|
||||
code += 1;
|
||||
}
|
||||
}
|
||||
if(code){
|
||||
var pos = this.coord2position(i,j);
|
||||
switch(code){
|
||||
case 1100:
|
||||
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.closePath();
|
||||
break;
|
||||
case 110:
|
||||
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.closePath();
|
||||
break;
|
||||
case 11:
|
||||
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.closePath();
|
||||
break;
|
||||
case 1001:
|
||||
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.closePath();
|
||||
break;
|
||||
default:
|
||||
if(Math.floor(code/1000)){
|
||||
context.beginPath();
|
||||
context.moveTo(x,y);
|
||||
context.lineTo(x,y-this.size/2);
|
||||
context.moveTo(pos.x,pos.y);
|
||||
context.lineTo(pos.x,pos.y-this.size/2);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
}
|
||||
code %= 1000;
|
||||
if(Math.floor(code/100)){
|
||||
context.beginPath();
|
||||
context.moveTo(x,y);
|
||||
context.lineTo(x+this.size/2,y);
|
||||
context.moveTo(pos.x,pos.y);
|
||||
context.lineTo(pos.x+this.size/2,pos.y);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
}
|
||||
code %= 100;
|
||||
if(Math.floor(code/10)){
|
||||
context.beginPath();
|
||||
context.moveTo(x,y);
|
||||
context.lineTo(x,y+this.size/2);
|
||||
context.moveTo(pos.x,pos.y);
|
||||
context.lineTo(pos.x,pos.y+this.size/2);
|
||||
context.stroke();
|
||||
context.closePath();
|
||||
}
|
||||
code %= 10;
|
||||
if(Math.floor(code/1)){
|
||||
context.beginPath();
|
||||
context.moveTo(x,y);
|
||||
context.lineTo(x-this.size/2,y);
|
||||
context.moveTo(pos.x,pos.y);
|
||||
context.lineTo(pos.x-this.size/2,pos.y);
|
||||
context.stroke();
|
||||
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.nextStage(); //测试游戏主布景
|
||||
})();
|
||||
Loading…
x
Reference in New Issue
Block a user