Exemple de processus de développement d'un mini-jeu createjs

Mise en œuvre de l'idée générale du jeu

1 Implémenter une image d'arrière-plan parfaitement connectée pour simuler l'état de l'accélération de la voiture.

this.backdrop = new createjs.Bitmap(bg);this.backdrop.x = 0;this.backdrop.y = 0;this.stage.addChild(that.backdrop);this.w = bg.width;this.h = bg.height;//创建一个背景副本，无缝连接var copyy = -bg.height;this.copy = new createjs.Bitmap(bg);this.copy.x = 0;this.copy.y = copyy;  //在画布上y轴的坐标为负的背景图长//使用createjs的tick函数，逐帧刷新舞台createjs.Ticker.addEventListener("tick", tick);function tick(e) {   if (e.paused !== 1) {//舞台逐帧逻辑处理函数that.backdrop.y = that.speed + that.backdrop.y;
        that.copy.y = that.speed + that.copy.y;if (that.copy.y > -40) {
              that.backdrop.y = that.copy.y + copyy;
        }if (that.copy.y > -copyy - 100) {
              that.copy.y = copyy + that.backdrop.y;
        }
        that.stage.update(e);
    }          
}

2. Dessinez au hasard les obstacles

Parce qu'il y en aura. ce sera définitivement une piste. Il y a de nombreux obstacles, et nous devons effectuer une « récupération de ressources » pour les obstacles qui dépassent l'écran, sinon le jeu deviendra de plus en plus lent par la suite.

// 删除越界的元素for (var i = 0, flag = true, len = that.props.length; i < len; flag ? i++ : i) {if (that.props[i]) {if (that.props[i].y > height + 300) {
            that.stage.removeChild(that.props[i]);
            that.props.splice(i, 1);
            flag = false;
        } else {
            flag = true;
        }
    }
}

Il y a 3 pistes au total. Nous ne pouvons pas faire apparaître 3 accessoires sur la ligne horizontale en même temps, nous choisirons donc au hasard 1 à 2 valeurs​​ dessiner des obstacles. Nous devrions avoir des paramètres pour contrôler la difficulté de tous les jeux, de sorte que lorsque le jeu est sur le point d'être mis en ligne, le patron aura l'impression que le jeu est trop difficile après l'avoir vécu... ce qui serait très embarrassant. Par conséquent, nous définirons la proportion d’objets d’accélération, d’objets de décélération et de bombes. Cette proportion pourra être ajustée ultérieurement pour définir la difficulté du jeu.

var num = parseInt(2 * Math.random()) + 1, i;for (i = 0; i < num; i++) {var type = parseInt(10 * Math.random()) + 1;// 设置道具出现比例if (type == 1) {/绘制炸弹
        } else if ((type >= 2) && (type <= 5)) {//绘制加速道具} else if ((type >= 6) && (type <= 10)) {//绘制减速道具        }
    }

Une fois le premier obstacle tiré, le prochain obstacle sera tiré à un moment aléatoire.

var time = (parseInt(3 * Math.random()) + 1);  //随机取1～3整数// 随机时间绘制障碍物setTimeout(function () {
    that.propsTmp = [];  //清空    that.drawObstacle(obj);
}, time * 400);  //400ms ~ 1200ms

3. Détection de collision

Nous utilisons un tableau pour stocker les voitures La zone rectangulaire occupée par l'obstacle et la zone rectangulaire occupée par l'obstacle sont parcourues en boucle dans le tableau à chaque tick pour voir s'il y a chevauchement. S'il y a chevauchement, une collision s'est produite.

Quelques conseils sur createjs :

1. Mettre en pause et reprendre le rendu de la scène

createjs.Ticker.addEventListener(“tick”, tick); 
function tick(e) { if (e.paused === 1) { //处理     }
}     
createjs.Ticker.paused = 1; //在函数任何地方调用这个，则会暂停tick里面的处理 createjs.Ticker.paused = 0; //恢复游戏

2. Parce que la voiture aura pour effet d'accélérer, de décélérer et de faire éclater des bulles. Par conséquent, nous dessinons ces effets dans le même conteneur pour faciliter une gestion unifiée. Nous définissons l'attribut name pour ces effets, puis nous pouvons directement utiliser getChildByName pour obtenir l'objet.

container.name = ‘role’; //设置name值car = this.stage.getChildByName(“role”);  //使用name值方便获取到该对象

3. Préchargement (le préchargement de createjs est très pratique)

Au début, j'ai écrit le préchargement moi-même, j'ai trouvé ça. il existe un traitement inter-domaines pour les images dans createjs. Il est plus difficile de traiter les images inter-domaines par vous-même, j'utilise donc directement le préchargement de createjs.

//放置静态资源的数组
var manifest = [
    {src: __uri('./images/car_prop2_tyre@2x.png'), id: 'tyre'}
];
var queue = new createjs.LoadQueue();
queue.on('complete', handleComplete, this);
queue.loadManifest(manifest);
//资源加载成功后,进行处理
function handleComplete() {
   var tyre = queue.getResult('tyre');  //拿到加载成功后的img
}

Généralement, lorsque nous créons un jeu, nous construisons généralement une classe de jeu pour l'héberger. Ce qui suit est une interface normale pour le jeu :

;(function () {function CarGame(){}
    CarGame.prototype = {
        init:function(manifest) {this.preLoad(manifest);  //资源预加载//时间倒计时this.prepare(3, 3);  //倒计时3秒this.bindEvent(); 
        },
        render:function() {           this.drawBg(bg1);           this.drawRole(car, effbomb, effquick);           this.drawObstacle(obj);
        },//在游戏结束的时候批量销毁destroy:function(){//移除tick事件createjs.Ticker.removeEventListener("tick", this.tick);//暂停里程，倒计时clearInterval(this.changem);
            clearTimeout(this.gametime);
        }，//由于期间用户可能切出程序进行其他操作，因此都需要一个暂停的接口pause:function() {//暂停里程，倒计时clearInterval(this.changem);
            clearTimeout(this.gametime);//暂停页面滚动createjs.Ticker.paused = 1;
        },//重新开始游戏reStart:function(){           this.destroy();           this.init(manifest);
        },
        gameOver:function(){           //显示爆炸效果   var car = this.stage.getChildByName("role");
           car.getChildByName('bomb').visible = true;
           car.getChildByName('quick').visible = false;           this.destroy();
        }
    }
})()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!