`
王斌_code
  • 浏览: 31441 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

html5-卷轴游戏初试

 
阅读更多
自己试做一个卷轴游戏,其中有两个图片文件，未引入 
<!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>
分享到：
| 手机网站开发的一些总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics