createjs打飞机
程序员文章站
2024-03-16 21:11:46
...
- 此文章代码来源于createjs打飞机
- 我只是将他教程代码，一步步写出来了而已
- 下面给出完整代码，其中有一张雪碧图和音效资源，包含在源文章中，这里没有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/easeljs.js"></script>
<script src="js/soundjs.js"></script>
<script src="js/preloadjs.js"></script>
<script src="js/tweenjs.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="game" width="500" height="700" style="background-color: black"></canvas>
<div id="btn"></div>
<script>
var stage;
var starArr = [];
const ARROW_KEY_LEFT = 37; //键盘左键
const ARROW_KEY_RIGHT = 39; //键盘右键
const SPACE_KEY = 32; //键盘空格
var leftKeyDown = false,
rightKeyDown = false; // 左右按键的状态
var fireAble = true; // 被摧毁
// 剩余战机
var lives = 24;
// 得分
var score = 0;
// 敌机
var enemyClip = [];
// 复制后的敌机
var enemy = [];
// 战机
var player;
// 战机移动速度
var speed = 5;
// 子弹
var fires = [];
// c重新开始
breakAble = true;
function init() {
//1.导入资源，并在资源加载完成后调用处理函数handleComplete
//2.创建舞台stage
stage = new createjs.Stage('game');
sWidth = stage.canvas.width;
sHeight = stage.canvas.height;
queue = new createjs.LoadQueue(true);
createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);
queue.installPlugin(createjs.Sound);
queue.on("complete", handleComplete);
queue.loadFile({
id: "shot",
src: "music/aa.mp3"
});
queue.loadManifest([{
id: "sprite",
src: "./img/sprites.png"
},
// { id: "shot", src: "music/aa.mp3" },
//{id:"explosion", src:"music/explosion.mp3"}
]);
}
init();
var instance = null;
function handleComplete() {
console.log(queue.getResult('shot'));
queue.getResult('shot').setAttribute('webkit-playsinline', 'true');
queue.getResult('shot').setAttribute('playsinline', 'true');
$('#btn').click(function () {
var instance = createjs.Sound.play("shot");
});
$('#btn').click();
// instance.paused = true;
// instance.on("complete", audioComplete, this);
// buildGame(); //3.创建游戏界面，星空，玩家飞机，敌机，计分版等
// setControl(); //4.设置按键控制，让玩家可以左右移动并发射子弹
// startGame(); //5.进入游戏循环，使用tick事件实现游戏的变化，发展
}
function audioComplete(e) {
console.log('d');
console.log(e);
}
function buildGame() {
buildMsg(); //计分，和 玩家剩余的飞机数
buildPlayer(); //创建玩家的飞机
buildEnemy(); //创建敌机
buildSpace(); //星空背景，因为我没有找到星空图片
}
function updateGame() {
updateStar();
updatePlayer();
updateFire();
updateEnemy();
updateMsg();
}
// 背景
function buildSpace() {
var i, star, w, h, alpha;
// 容器
starSky = new createjs.Container();
for (i = 0; i < 200; i++) {
// 画布
star = new createjs.Shape();
w = Math.floor(Math.random() * stage.canvas.width);
h = Math.floor(Math.random() * stage.canvas.height);
alpha = Math.random();
star.graphics.beginFill("#FFF").drawCircle(0, 0, 1);
star.x = w;
star.y = h;
star.alpha = alpha;
starSky.addChild(star);
starArr.push(star);
stage.addChild(starSky);
}
}
// 创建玩家的飞机
function buildPlayer() {
var data = {
images: [queue.getResult("sprite")],
frames: [
[0, 0, 37, 42],
[37, 0, 42, 42],
[79, 0, 37, 42],
[116, 0, 42, 42],
[158, 0, 37, 42],
[0, 70, 64, 64],
[64, 70, 64, 64],
[128, 70, 64, 64],
[192, 70, 64, 64],
[256, 70, 64, 64],
[320, 70, 64, 64],
[384, 70, 64, 64],
[448, 70, 64, 64],
[512, 70, 64, 64],
[576, 70, 64, 64],
[640, 70, 64, 64],
[704, 70, 64, 64],
[768, 70, 64, 64]
],
animations: {
ship: 0,
enemy1: 1,
enemy2: 2,
enemy3: 3,
enemy4: 4,
exp: {
frames: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
speed: .5
}
}
};
spriteSheet = new createjs.SpriteSheet(data);
// createjs.Sound.registerSound("./music/explosion.mp3", explosion);
player = new createjs.Sprite(spriteSheet, "ship");
player.x = sWidth / 2;
player.y = sHeight - player.getBounds().height;
stage.addChildAt(player, 0);
}
function setControl() {
window.onkeydown = handleKeyDown;
window.onkeyup = handleKeyUp;
}
// 按下
function handleKeyDown(e) {
e = !e ? window.event : e;
switch (e.keyCode) {
case ARROW_KEY_LEFT:
leftKeyDown = true;
break;
case ARROW_KEY_RIGHT:
rightKeyDown = true;
break;
}
}
// 键盘 抬起
function handleKeyUp(e) {
e = !e ? window.event : e;
switch (e.keyCode) {
case ARROW_KEY_LEFT:
leftKeyDown = false;
break;
case ARROW_KEY_RIGHT:
rightKeyDown = false;
break;
case SPACE_KEY:
playFire();
}
}
// 发射子弹 播放声音
function playFire() {
if (fireAble) {
var fire = new createjs.Shape();
fire.graphics.beginFill("#FF0").drawRect(0, 0, 2, 5).endFill();
fire.x = player.x + 18;
fire.y = 658;
createjs.Sound.play("shot");
fires.push(fire);
stage.addChild(fire);
}
}
// 创建文字
function buildMsg() {
livesTxt = new createjs.Text("lives:" + lives, "20px Times", "#FFF");
livesTxt.y = 5;
livesTxt.x = 10;
stage.addChild(livesTxt);
scoreTxt = new createjs.Text("score:" + score, "20px Times", "#FFF");
scoreTxt.y = 5;
scoreTxt.x = sWidth - 100;
stage.addChild(scoreTxt);
}
// 创建飞机
function buildEnemy() {
var i, e1, e2, e3, e4;
e1 = new createjs.Sprite(spriteSheet, "enemy1");
e2 = new createjs.Sprite(spriteSheet, "enemy2");
e3 = new createjs.Sprite(spriteSheet, "enemy3");
e4 = new createjs.Sprite(spriteSheet, "enemy4");
enemyClip.push(e1, e2, e3, e4);
console.log(enemyClip);
buildEnemis();
}
function buildEnemis() {
var i, j = 0,
en, en1;
var k = 0;
for (i = 0; i < 4; i++) {
en = enemyClip[i].clone();
for (j = 0; j < 6; j++) {
k++;
en1 = en.clone();
enemy.push(en1);
createjs.Tween.get(en1).wait(5000 * k).to({
x: 300,
y: 800
}, 5000, createjs.Ease.sineInOut(-2))
stage.addChild(en1);
}
}
console.log(enemy);
}
//更新星星
function updateStar() {
var i, star, yPos;
for (i = 0; i < 200; i++) {
star = starArr[i];
yPos = star.y + 5 * star.alpha;
if (yPos >= stage.canvas.height) {
yPos = 0;
}
star.y = yPos;
}
}
//根据按键来更新战机的位置
function updatePlayer() {
var nextX = player.x;
if (leftKeyDown) {
nextX = player.x - speed;
if (nextX < 0) {
nextX = 0;
}
} else if (rightKeyDown) {
nextX = player.x + speed;
if (nextX > (sWidth - 37)) {
nextX = sWidth - 37;
}
}
player.x = nextX;
}
//更新战机发射的子弹
function updateFire() {
var i, nextY, fire;
for (i = 0; i < fires.length; i++) {
fire = fires[i];
nextY = fire.y - 10;
if (nextY == 0) { //如果子弹飞出屏幕，在子弹数组中去掉，并在stage中删除元素
fires.splice(i, 1)
stage.removeChild(fire);
continue;
}
fire.y = nextY;
}
}
//敌机与子弹的碰撞检测
function updateEnemy() {
var i, j, fire, enemy1;
for (i = 0; i < fires.length; i++) {
for (j = 0; j < enemy.length; j++) {
fire = fires[i];
enemy1 = enemy[j];
var fx = fire && fire.x;
var fy = fire && fire.y;
var ex = enemy1.x;
var ey = enemy1.y;
var ew = enemy1.getBounds().width;
var eh = enemy1.getBounds().height;
// 敌机超出屏幕了就清除掉
if (ey >= 800 || ex >= 600) {
enemy.splice(j, 1);
stage.removeChild(enemy1);
}
// 碰撞检测
if (fy < ey + eh && fy > ey && fx > ex && fx < ex + ew && ey > 0) {
// 分数
score += 10;
fires.splice(i, 1);
enemy.splice(j, 1);
stage.removeChild(fire);
stage.removeChild(enemy1);
createjs.Sound.play("explosion");
var exp1 = new createjs.Sprite(spriteSheet, "exp");
exp1.x = ex;
exp1.y = ey;
exp1.addEventListener('animationend', function(e) {
stage.removeChild(e.target);
});
stage.addChild(exp1);
}
}
}
}
//更新分数和剩余生命值
function updateMsg() {
scoreTxt.text = "score:" + score;
livesTxt.text = "lives:" + lives;
}
// 检查游戏运行状态
function checkGame() {
var i, en, pl;
if (enemy.length == 0) {
buildEnemis();
}
pl = player;
plx = player.x;
ply = player.y;
plw = player.getBounds().width;
plh = player.getBounds().height;
for (i = 0; i < enemy.length; i++) {
en = enemy[i];
enx = en.x;
eny = en.y;
enw = en.getBounds().width;
enh = en.getBounds().height;
if (eny + enh < 800 && eny + enh > ply && enx > plx && enx < plx + plw && breakAble) {
stage.removeChild(player);
pl = null;
player = null;
fireAble = false;
breakAble = false;
setTime = setTimeout(newPlayer, 10);
break;
}
}
}
function newPlayer() {
clearTimeout(setTime);
player = new createjs.Sprite(spriteSheet, "ship");
player.x = sWidth / 2;
player.y = sHeight - player.getBounds().height;
player.alpha = 0;
createjs.Tween.get(player).to({
alpha: 1
}, 1000, createjs.Ease.getPowIn(1)).call(function() {
lives--;
fireAble = true;
breakAble = true;
});
stage.addChildAt(player, 0);
}
function startGame(event) {
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', function() {
updateGame(); //6.更新游戏元素的位置，更新分数等
checkGame();//7.检查游戏中的元素是否发生碰撞，敌机被击落，还是飞出屏幕等等
stage.update();
});
}
</script>
</body>
</html>
上一篇： 聊聊聚集索引和辅助索引