Création de jeux en html5 avec easeljs

Commenter

Contenu du snippet

Ce code source est tiré d'un article de mon blog technique présentant la librairie EaselJS. Cette bibliothèque tire partie de la puissance de la balise canvas d'HTML5 pour vous permettre des rendus de qualité pour vos jeux et animations directement en HTML/Javascript.
Dans cet exemple je m'attaque aux bases du célèbre Space Invaders. Retrouvez le tuto complet à l'adresse suivante:

www.codeyourweb.org/progresser-dans-la-creation-de-jeux-en-html5-avec-easeljs
IMPORTANT: le site semble buggé quand je colle l'url (vérifiez qu'il n'y a pas d'espace entre les tirets ce lien pour que cela fonction)

PS: Il m'est impossible de poster tout le code (taille du Zip limité a 1Mo), néanmoins vous pourrez trouver le code source complet a l'adresse: http://www.codeyourweb.org/test/advancedGame.zip

Source / Exemple : 


var canvas;
var stage;
var monsters = Array();
var bullets = Array();
var imgBackground = new Image();
var imgMonster = new Image();
var imgPlayer = new Image();
var imgBullet = new Image();
var loaded = 0;
var level = 0;
var difficult = 1;
var gamer;
var annonce;
var score = 0;
var lost = false;

$('document').ready(function(){
	init();
	initTicker();
	
	$('#start').click(function(){
		createMonsters(52);
	});
});

$(window).keydown(function(event) {
	gamer.vcode = event.which;
});

// init canvas and importing resources
function init(){
	canvas = document.getElementById('gfxWindow');
	imgBackground.onload = handleImageLoad;
	imgBackground.onerror = handleImageError;
	imgMonster.onload = handleImageLoad;
	imgMonster.onerror = handleImageError;
	imgPlayer.onload = handleImageLoad;
	imgPlayer.onerror = handleImageError;
	imgBullet.onload = handleImageLoad;
	imgBullet.onerror = handleImageError;
	imgBackground.src = 'images/background.png';
	imgMonster.src = 'images/spriteMonsters.png';
	imgPlayer.src = 'images/player.png';
	imgBullet.src = 'images/bullet.png';
}

// called when images loaded
function handleImageLoad(e){
	loaded++;
	if(loaded == 4){
		startGame();
	}
}

// called when something goes wrong with images loading
function handleImageError(e) {
	console.log("Error Loading Image : " + e.target.src);
}

// init game ticker after init  game
function initTicker(){
   createjs.Ticker.addListener(window);
   createjs.Ticker.useRAF = true;
   createjs.Ticker.setFPS(60);
}

// init game on the scene
function startGame(){
	stage = new createjs.Stage(canvas);
    var bg = new createjs.Bitmap(imgBackground);
	stage.addChild(bg);
	setGameText("Click START GAME when ready!");
	initPlayer();
}

// random generation of monsters
function createMonsters(m){
	stage.removeChild(annonce);
	level++;
	lost = false;
	changeLevel();
	
	var x = 20;
	var y = 20;
	for(i = 0; i < m; i++){
		var obj = new Monster(imgMonster,x,y);
		obj.IDLEWAITTIME -= (level * difficult);
		monsters.push(obj);
		stage.addChild(obj);
			if(x < 700){
				x += 60;
			}else{
				x = 20;
				y += 50;
			}
	}
}

// draw playuer on the scene
function initPlayer(){
	gamer = new Player(imgPlayer, canvas.width / 2, canvas.height - 60);
	stage.addChild(gamer);
}

// set text on the screen
function setGameText(val){
	annonce = new createjs.Text(val,"20px Arial", "#ff7700");
	annonce.x = canvas.width / 2 - 150;
	annonce.y = canvas.height / 2;
	stage.addChild(annonce);
}

// restart game after loosing
function restartGame(){
	monsters.splice(0,monsters.length);
	bullets.splice(0,bullets.length);
	stage.removeAllChildren();
	level--;
	startGame();
	
	stage.removeChild(annonce);
	if($('#lifes li').length > 0){
		$('#lifes li')[$('#lifes li').length - 1].remove();
		setGameText("You loose, press START GAME to continue");
	}else{
		setGameText("GAME OVER! You got " + score + " points this time!");
		$('#start').prop('disabled',true);
	}
}

function changeScore(){
	$('#score').html("Score: " + score);
}

function changeLevel(){
	$('#level').html("Level: " + level);
}

// main ticker (called by easelJS)
function tick(){
	if(monsters.length == 0 && !lost){
		createMonsters(52);
	}

	for (monster in monsters){
		var m = monsters[monster];
		m.tick();
		if(m.causeLoose(420)){
			lost = true;
			restartGame();
		}
	}
	
	for (bullet in bullets){
		var b = bullets[bullet];
		b.tick();
		if(b.causeLoose()){
			lost = true;
			restartGame();
		}
	}

	gamer.tick();
	stage.update();
}

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (shadow1779)