Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Tip Tap!</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
	<style>
		body{
			margin: 0;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(to top, rgba(169, 207, 19, 0.2) 0%,
			                                    rgba(39, 210, 36, 0.2) 100%),
																					url("img/paper.png");
		}
		canvas{
			background: url(img/background.png);
		}
	</style>
</head>
<body>
  	<canvas></canvas>
<script>

// Création d'un Sprite
var Sprite = {
	// Propriétés
	x: null,
	y: null,
	scale: 1,
	width: 100,
	height: 100,

	sW: 100,
	sH: 100,
	sX: 0,
	sY: 0,


	column: 10,
	numberOfFrames: 10,
	currentFrame:0,

	// Méthode init de positionnement
	init: function(x, y){
		this.x = x;
		this.y = y;
		this.sX = 0;
		this.sY = 0;
		this.width = 100;
		this.height= 100;

		this.scale = Math.random()*2+0.1;
		this.width = Math.floor(this.scale*this.width);
		this.height = Math.floor(this.scale*this.height);

	},
	// Update l'image du Sprite
	updateSprite: function(){
		this.sX = (this.currentFrame%this.column)*this.sW;
		this.sY = Math.floor(this.currentFrame/this.column)*this.sH;
		this.currentFrame++;

		if(this.currentFrame==this.numberOfFrames){
			this.currentFrame=0;
		}
	},

	hit: function(mouse){
		return(mouse.x>=this.x && mouse.x<=(this.x+this.width)
				&& mouse.y>=this.y && mouse.y<=(this.y+this.height)
		)
	}
}

var GameTimer = {
	time: null,
	interval: null,
	start: function(t){
		this.time = t;
		this.interval = setInterval(function(){GameTimer.tick()}, 1000);
	},

	thick: function(){
		this.time--;
	},

	stop: function(){
		clearInterval(this.interval);
	}
}

var model = {
	sprites: [],
	width: 600,
	height: 800,
	fpsLimit:10,
	nb: 10,
	score: 0,
	timer: GameTimer,

	// ÉTATS DU JEU
	INIT: 0,
	MENU: 1,
	PLAYING: 2,
	OVER: 3,
	gameState: 0,
	gameMessage:'',

	init: function(){
			// Creation d'une 'Instance de Sprite' + init
			for(var i=0; i<this.nb; i++){
				var tmp = Object.create(Sprite);
				tmp.init(Math.floor(Math.random()*500+50),Math.floor(Math.random()*500+50));
				this.sprites.push(tmp);
			}
	},
	update: function(){
			// update les sprites
			this.sprites.forEach(function(tmp){
				tmp.updateSprite();
			})
	},

	setScore: function(){
		this.score++;
	},

	setFps: function(){
		this.fpsLimit++;
	}
}

var octopus = {

	previousDelta: 0,

	init: function(){
		model.init();
		octopus.gameLoop();
	},

	gameLoop: function(currentDelta){
		// requestAnimationFrame : en moyenne 60 fois par 1000ms
		// ce qui est un peu rapide pour nous...
		window.requestAnimationFrame(octopus.gameLoop);

		// Le paramètre currentDelta correspond au temps écoulé en ms
		// depuis le lancement de requestAnimationFrame
		// Nous pouvons calculer le laps de temps écoulé depuis notre dernière loop (tjs en ms)
		var delta = currentDelta - octopus.previousDelta;

		// return si celui-ci est inférieur au laps de temps de notre fps
		if (model.fpsLimit && delta < 1000 / model.fpsLimit) {
        	return;
    }

		switch(model.gameState){
			case model.INIT:
				view.init();
				model.gameMessage="LOADING";
				view.loadImage();
				break;
			case model.MENU:
				model.gameMessage="CLICK!";
				model.update();
				view.bindEvents();
				break;
			case model.PLAYING:
				model.gameMessage="";
				model.update();
				if(model.timer.time<0){

				}
				break;
			case model.OVER:
				break;
		}
		view.render();
		octopus.previousDelta = currentDelta;
	},

	getSprites: function(){
		var sprites = model.sprites;
		return sprites;
	},

	getWidth: function(){
		var width = model.width;
		return width;
	},
	getHeight: function(){
		var height = model.height;
		return height;
	},
	getGameMessage: function(){
		var message = model.gameMessage;
		return message;
	},

	getScore: function(){
		var score = model.score;
		if(score<10)
			score="0"+score;
		return score;
	},

	handlerLoad: function(){
		// Changement d'état du jeu
		model.gameState=1;
	},
	handlerMouseDown: function(e){
		if(model.gameState == model.MENU){
			model.gameState = model.PLAYING;
			model.timer.start(10);
			return;
		}
		var mouse={};
		mouse.x= e.pageX - e.target.offsetLeft;
		mouse.y= e.pageY - e.target.offsetTop;
		for(var i=model.sprites.length-1; i>=0; i--){
			if(model.sprites[i].hit(mouse)){
				model.sprites[i].init(Math.floor(Math.random()*500+50),Math.floor(Math.random()*500+50));
				model.setScore();
				model.setFps();
				return;
			}
		}
	}
}

var view = {
	canvas: null,
	ctx: null,
	image: null,
	init: function(){
		view.canvas = document.querySelector("canvas");
		view.ctx = view.canvas.getContext('2d');
		view.canvas.width = octopus.getWidth();
		view.canvas.height = octopus.getHeight();
	},

	loadImage: function(){
		view.image = new Image();
		view.image.src = "img/sprite.png";
		view.image.addEventListener("load", octopus.handlerLoad)
	},

	bindEvents: function(){
		view.canvas.addEventListener('mousedown',octopus.handlerMouseDown)
	},

	render: function(){
		view.ctx.clearRect(0,0,view.canvas.width, view.canvas.height);

		// Render sprites
		var sprites = octopus.getSprites();

		for(var i=0; i< sprites.length; i++){
			var tmpSprite = sprites[i];
			view.ctx.drawImage(view.image,
												tmpSprite.sX,
												tmpSprite.sY,
												tmpSprite.sW,
												tmpSprite.sH,
												tmpSprite.x,
												tmpSprite.y,
												tmpSprite.width,
												tmpSprite.height)
		}


		// Dessine le gameMessage
			view.ctx.font = "40px 'Press Start 2P'";
			view.ctx.fillStyle = "rgba(0,0,0,1)";
			view.ctx.fillText(octopus.getScore(), 70, 80);
			view.ctx.fillText(octopus.getGameMessage(),160,400);


	}
}
octopus.init();

</script>

</body>
</html>