Création de jeux en html5 avec easeljs

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 903 fois - Téléchargée 15 fois

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

Ajouter un commentaire

Commentaire

cs_JLN
Messages postés
373
Date d'inscription
samedi 1 juin 2002
Statut
Membre
Dernière intervention
17 juin 2013

Pour info, l'exemple de jeu Space Invaders freeze un max sur IE10.
Sinon, pour ton partage, et ton tutoriel bravo !!! Chapeau bas même !!!

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.