Canvas

var Game = function(ctx){
	// canvas


	// キーボード
	var rightDown;
	var leftDown;	
	var upDown;
	var downDown;	
	var spaceDown;
	var sDown;
	var keyDown = [];

	//var background = new Background();
	var player = new Player();

  var blocks = [];
  for (var i=0; i<16; i++){
    var j = Math.floor(Math.random() * 8);
	  blocks[i] = new Block();
	  blocks[i].setPosition(i*32, j*32);
  }
  for (var i=0; i<16; i++){
    blocks[i].setSpeed(-1,0);
  }
	// タイマー
	var FPS = 50;
	var INTERVAL = (1000 / FPS).toFixed(1);
	var intervalId;
  var INPUT_WAIT_TIME = 10;
  var input_wait_count = 0;

	var sprites = [
		player
	];

	var that = {};

	that.init = function() {
	
		// 画像のプリロード完了後、ゲームループ開始
		for (var i = 0; i < sprites.length; i++) {
			sprites[i].init();
		}
    setTimeout(function() {
      var loaded = true;
			for (var i = 0; i < sprites.length; i++) {
				if (!sprites[i].isReady()) {
					loaded = false;
				}
			}
	      
	    if (loaded) {
		  	intervalId = setInterval(run, INTERVAL);
	    } else {
	      arguments.callee();
	    } 
	  }, 500);
	};

  var run = function(){

    if(rightDown){
      player.go(1,0);
    } else if (leftDown){
      player.go(-1,0);
    } else if (upDown){
      player.go(0,-1);
    } else if (downDown){
      player.go(0,1);
    }

		var vx = 0, vy = 0;
		if(leftDown){
			vx = -1;
		} else if (rightDown){
			vx = 1;
		}
		 if (upDown){
			vy = -1;
		} else if (downDown){
			vy = 1;
		}
		if(spaceDown){
			player.jump();
		}


    for (var i=0; i<16; i++){
      blocks[i].run();
      blocks[i].overMap();
    }
		player.run();
		draw();
		view();
  };

	var overMap = function(){
		var min = 1;
		var max = 3;
		if(player.mapX < min){player.mapX = max;}
		else if(player.mapX >max){player.mapX = min;}
		if(player.mapY < min){player.mapY = max;}
		else if(player.mapY >max){player.mapY = min;}
	}

	var draw = function(){
		ctx.clearRect(0, 0, 512, 512);
		ctx.fill();
    for(i in sprites){
      sprites[i].draw(ctx);
    }
    for (var i=0; i<16; i++){
      blocks[i].draw(ctx);
    }
	};
	var view = function(){
		player.view();
	};




	// キーボード
	var keydown = function(e) {
    keychar = String.fromCharCode(e.which).toUpperCase(); 
		if (e.which == 39) {
			rightDown = true;
		}
		else if (e.which == 37) {
			leftDown = true;
		}
		else if (e.which == 38) {
			upDown = true;
		}
		else if (e.which == 40) {
			downDown = true;
		}
		else if (e.which == 32) {
			spaceDown = true;
		}
		else if (e.which == 83) {
			sDown = true;
		}
		else if (e.which > 60 && e.which < 99) {
			console.log('keychar' + keychar);
			keyDown[keychar] = true;
		} else if(e.keyCode == 116){ // F5 更新
      return true;
    }
		return false;
	};
	
	var keyup = function(e) {
    keychar = String.fromCharCode(e.which).toUpperCase(); 
		if (e.which == 39) {
			rightDown = false;
		}
		else if (e.which == 37) {
			leftDown = false;
		}
		else if (e.which == 38) {
			upDown = false;
		}
		else if (e.which == 40) {
			downDown = false;
		}
		else if (e.which == 32) {
			spaceDown = false;
		}
		else if (e.which == 83) {
			sDown = false;
		}
		else if (e.which > 60 && e.which < 99) {
			keyDown[keychar] = false;
		}
    return false;
	};
	// キーボード
	$(document)
		.keydown(keydown)
		.keyup(keyup)
        .keypress(function() {return false;});



	return that;
};

uuCanvas.ready(function(){
  var canvas = $('canvas')[0];
	var ctx = canvas.getContext('2d');	// コンテキスト
  var game = new Game(ctx);
  game.init();
	var WIDTH = canvas.width;
	var HEIGHT = canvas.height;
  ctx.beginPath();
  ctx.strokeRect(0, 0, WIDTH, HEIGHT);
  //util.drawRect(ctx, 0 ,0 ,WIDTH ,HEIGHT);
});

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-canvas-blocks/