第一次使用 IntelliJ IDEA写一个html动作

最新推荐文章于 2025-06-12 09:14:12 发布

原创最新推荐文章于 2025-06-12 09:14:12 发布 · 1.1w 阅读

CC 4.0 BY-SA版权

本文展示了如何在IntelliJ IDEA中编写一个HTML页面，该页面包含一个JavaScript动作，使用EaselJS库创建了一个动画效果。通过创建Bitmap对象、SpriteSheet和Sprite，实现了角色跑动和跳跃的动画效果。

<img src="https://img-blog.youkuaiyun.com/20160529111805531?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><pre name="code" class="html">使用IntelliJ IDEA写的一个网页动作

js：代码

var canvas, stage, grant;

function init() {
    canvas = document.getElementById("view");
    stage = new createjs.Stage(canvas);

    var img = new createjs.Bitmap("backgroup.jpg");
    stage.addChild(img);

    var spriteSheet = new createjs.SpriteSheet({
        framerate: 30,
        "images": ["spritesheet_grant.png"],
        "frames": {"regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165},
        // define two animations, run (loops, 1.5x speed) and jump (returns to run):
        "animations": {
            "run": [0, 25, "run", 1.5],
            "jump": [26, 63, "run"]
        }
    });

    grant = new createjs.Sprite(spriteSheet, "run");
    grant.scaleX = grant.scaleY = 0.6;
    grant.x = stage.canvas.width / 2;
    grant.y = 150;

    stage.addChild(grant);

    createjs.Ticker.setFPS(24);
    createjs.Ticker.addEventListener("tick", TickHandler);
}

function TickHandler(event) {
    stage.update(event);
}

init();

html代码：

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="easeljs-0.8.2.min.js"></script>
    <script src="tweenjs-0.6.2.min.js"></script>

</head>
<body>
<canvas id="view" width="700" height="400" style="background-color: cornflowerblue"></canvas>
<script src="app_04.js">
</script>

</body>
</html>