html 5-巻物ゲーム初試験
8588 ワード
自分で1つの巻物のゲームをしてみて、その中に2つのピクチャーのファイルがあって、導入していません
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="msg" style="position:absolute;top:300px;left:500px;"></div>
<canvas style="float:left;background:url(bg.jpg);" width="480" height="800" id="ctx"></canvas>
<script type="text/javascript">
var msg = document.getElementById("msg");
function showMsg(s){
msg.innerHTML = s;
}
var WIDTH = 480;
var HEIGHT = 800;
var n = 0;
var FPS = 30;
var Game = function(){
var main = {
ku:[],
init:function(){
this.ctx = document.getElementById("ctx").getContext("2d");
this.stage = this.ku["Stage"](this);
this.map = this.ku["Map"](this);
this.sprite = this.ku["Sprite"](this);
this.controller = this.ku["Controller"](this);
this.ctx.translate(0,800);//
//
this.bImage = new Image();
this.bImage.src = "b.png";
},
start:function(){
n++;
this.step();
},
step:function(){
this.stage.step();//
var that = this;
this.timer = setTimeout(function(){that.step()},1000/FPS);
},
pause:function(){
clearTimeout(this.timer);
},
over:function(){
delete step;
this.stage.drawCurtain();
this.ctx.fillText = (" ",300,400);
},
module:function(name,fun){
this.ku[name] = fun;
}
};
return main;
}();
Game.module("Stage",function(main){
var stage = {
drawCurtain:function(){
var everyHeight= HEIGHT / main.map.everyRow;
main.ctx.clearRect(0,-(main.sprite.oY) * everyHeight - HEIGHT - HEIGHT / 2,WIDTH,HEIGHT + HEIGHT);// curtain
//main.ctx.drawImage(main.bgImage,0,-(main.sprite.oY) * everyHeight - HEIGHT);
},
step:function(){
this.drawCurtain();
main.map.step();//
main.sprite.step();//
}
}
return stage;
});
Game.module("Map",function(main){
var everyRow = 10;// ， ，
var N = 0;//
var map = {
everyRow : everyRow,
mapArr:[
[0,1,2,0,0,0,0],
[0,0,0,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[1,2,0,1,2,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,2,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[0,0,0,0,0,1,2],
[0,1,2,0,0,0,0],
[0,0,0,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[1,2,0,1,2,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,2,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[0,0,0,0,0,1,2],
[0,1,2,0,0,0,0],
[0,0,0,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[1,2,0,1,2,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,2,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[0,0,0,0,0,1,2],
[0,1,2,0,0,0,0],
[0,0,0,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[1,2,0,1,2,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,2,0,0,1,2],
[0,0,0,0,0,0,0],
[0,0,0,0,0,0,0],
[0,0,0,0,0,1,2]
],
hasPull:0,
step:function(){
if(n == 1) this.draw(0);
if(this.hasPull && N < this.needFrames){//
main.ctx.translate(0,this.everyPullHeight); // ： ， ， ,
var everyHeight= HEIGHT / main.map.everyRow;
N ++;
}
},
draw:function(start){
var everyWidth = WIDTH / this.mapArr[0].length;
var everyHeight= HEIGHT / everyRow;
for(var i = start;i < this.mapArr.length;i++){
for(var j = 0;j < this.mapArr[i].length;j++){
tempX = j * everyWidth;
tempY = (i - start + 1 ) * everyHeight;
if(this.mapArr[i][j] == 1){
main.ctx.fillRect( tempX,-tempY,everyWidth,everyHeight);
//main.ctx.drawImage(main.bImage,tempX,-tempY);
}
}
}
},
mapPullDown:function(needFrames,pullHeight){//
var everyWidth = WIDTH / this.mapArr[0].length;
var everyHeight= HEIGHT / everyRow;
this.everyPullHeight = pullHeight / needFrames;
this.hasPull = 1;
this.needFrames = needFrames;
N = 0;
}
}
return map;
});
Game.module("Sprite",function(main){
var R = 20;
var G = 950;// px/s^2
var V = -910;// px/s
var t = -V/G;// / (s)
var needFrames = Math.floor(t * FPS);// /
var N = 0;//
var sprite = {
x:200,
y:-70,
vNow:V,// -， +
vLeft:0,//
oY:0,// y
needPullDownHeight:0,
step:function(){
this.jump();
},
draw:function(){
main.ctx.beginPath();
main.ctx.arc(this.x,this.y,R,0,2*Math.PI,true);
main.ctx.fill();
},
jump:function(){
var flag = 0;
var everyHeight= HEIGHT / main.map.everyRow;
if(this.y > -this.oY * everyHeight){
main.over();
return;
}
if(this.vNow > 0 && this.check() ) {// ，
N = 0;
this.vLeft = 0;
this.vNow = V;
main.map.mapPullDown(20,this.needPullDownHeight);
}
this.vNow += G * (1/FPS);
var dY = this.vNow * 1/FPS;
var dX = this.vLeft / FPS;
this.y += dY;
this.x += dX;
N ++;
this.draw();
},
check:function(){//
var everyWidth = WIDTH / main.map.mapArr[0].length;
var everyHeight= HEIGHT / main.map.everyRow;
var tX = Math.floor(this.x / everyWidth);
var tY = Math.floor((-this.y - R) / everyHeight);
if(main.map.mapArr[tY][tX] == 1) {//
if(((-this.y - R) /everyHeight - tY) < 0.8){//
this.needPullDownHeight = (tY - this.oY ) * everyHeight;
this.oY = tY;// tY
return 1;
}
}
}
}
return sprite;
});
Game.module("Controller",function(main){
window.addEventListener('keydown',function(e){
if(e.keyCode == 39) {
if(main.sprite.vLeft >= 250) main.sprite.vLeft = 250;
else main.sprite.vLeft += 50;
}
if(e.keyCode == 37) {
if(main.sprite.vLeft <= -250) main.sprite.vLeft = -250;
else main.sprite.vLeft -= 50;
}
if(e.keyCode == 38) Game.pause();
},false);
window.addEventListener('keyup',function(e){
if(e.keyCode == 39) {main.sprite.vLeft ; }
if(e.keyCode == 37) main.sprite.x -= 1;
if(e.keyCode == 38) Game.pause();
},false);
});
Game.init();
Game.start();
</script>
</body>
</html>