<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<title>Document</title>
</head>
<body onload="init()">
<button onclick="btn1()">攻击1</button>
<button onclick="btn2()">攻击2</button>
<canvas
id="mainView"
width="1200"
height="600"
style="background-color: black"
></canvas>
<script>
var canvas, stage, container,sprite;
canvas = document.getElementById("mainView");
function init() {
stage = new createjs.Stage(canvas);
// createjs.Touch.enable(stage);
var loader = new createjs.LoadQueue(false);
loader.addEventListener("complete", loadCompleteHandler);
loader.loadManifest([{ src: "images/man.png", id: "woody_0" }]);
container = new createjs.Container();
stage.addChild(container);
createjs.Ticker.setFPS(40);
createjs.Ticker.addEventListener("tick", stageBreakHandler);
}
function loadCompleteHandler(event) {
event.currentTarget.removeEventListener(
"complete",
loadCompleteHandler
);
var spriteData = {
images: ["images/man.png"],
frames: { width: 80, height: 80, regX: 40, regY: 40 },
animations: {
stand: [0, 3, "stand", 0.01],
walk: {
frames: [4, 5, 6, 7, 6, 5],
next: "walk",
speed: 0.3,
},
run: {
frames: [20, 21, 22, 21],
next: "run",
speed: 0.3,
},
somersault: {
frames: [58, 59, 69],
next: "stand",
speed: 0.3,
},
attack1: [10, 13, "stand", 0.3],
attack2: [14, 17, "stand", 0.3],
attack3: {
frames: [8, 9, 19],
next: "stand",
speed: 0.3,
},
jump: {
frames: [60, 61, 62],
next: "jumpSky",
speed: 0.3,
},
jumpSky: {
frames: [62],
speed: 0.3,
},
crouch: {
frames: [61],
next: "stand",
speed: 0.3,
},
runJump: {
frames: [112],
speed: 0.3,
},
},
};
var spriteSheet = new createjs.SpriteSheet(spriteData);
sprite = new createjs.Sprite(spriteSheet, "stand");
container.addChild(sprite);
sprite.x = 600;
sprite.y = 200;
sprite.gotoAndPlay("attack1");
}
function stageBreakHandler(event) {
stage.update();
}
function btn1()
{
sprite.gotoAndPlay("attack2");
}
function btn2()
{
sprite.gotoAndPlay("attack3");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<title>Document</title>
</head>
<body onload="init()">
<canvas
id="gameCanvas"
width="1200"
height="600"
style="background-color: black"
></canvas>
<script>
// 初始化舞台
// var mycanvas = document.getElementById("gameCanvas");
var sprite,stage
function init() {
stage = new createjs.Stage("gameCanvas");
var spriteData = new createjs.SpriteSheet({
images: ["images/man.png"],
frames: { width: 80, height: 80, regX: 40, regY: 40 },
animations: {
stand: [0, 3, "stand", 0.01],
walk: {
frames: [4, 5, 6, 7, 6, 5],
next: "walk",
speed: 0.3,
},
run: {
frames: [20, 21, 22, 21],
next: "run",
speed: 0.3,
},
somersault: {
frames: [58, 59, 69],
next: "stand",
speed: 0.3,
},
attack1: [10, 13, "stand", 0.3],
attack2: [14, 17, "stand", 0.3],
attack3: {
frames: [8, 9, 19],
next: "stand",
speed: 0.3,
},
jump: {
frames: [60, 61, 62],
next: "jumpSky",
speed: 0.3,
},
jumpSky: {
frames: [62],
speed: 0.3,
},
},
});
sprite = new createjs.Sprite(spriteData);
stage.addChild(sprite);
createjs.Ticker.framerate = 30;
createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
if (sprite.currentAnimation != "run") {
sprite.gotoAndPlay("run");
}
sprite.x += 10;
sprite.y += 10;
stage.update(event);
}
</script>
</body>
</html>
