个人中心
gpt4 book ai didi

javascript - HTML5 Canvas 游戏静态实体元素

转载 作者：行者123 更新时间：2023-11-28 02:08:41 26 4
gpt4 key购买 nike

我正在用画架编写一个 Canvas 游戏。该项目中几乎所有内容都工作正常，唯一的问题是我无法将静态对象添加到该字段。

这是我的演示的链接:http://insidejs.com/game/

我不想带着购物车进入彩色区域。玩家应该绕过这些区域。这个游戏说明了我需要做什么。:http://www.kokogames.com/free-games/91/racing-games/138/e-racer.htm谢谢。

我的项目:

<!DOCTYPE html>
<!--[if IE 7]>         <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="tr"><!--<![endif]-->

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Game</title>

<!-- css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/screen.css" rel="stylesheet" type="text/css" />
<!-- css -->

<!-- javascript -->
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/easeljs-0.6.1.min.js"></script>
<script type="text/javascript">

var CANVAS, STAGE, Shopping, GAME;

$(function () {
    window.Shopping= {
        Game: {}
    };
    GAME = Shopping.Game;

    GAME = new Application();

    CANVAS = document.getElementById("game");
    STAGE = new createjs.Stage(CANVAS);

    GAME.init();
});


var Application = function () {
};

Application.prototype = {
    vehicle: null,
    vehicleImg: new Image(),
    map: null,
    mapImg: new Image(),
    TURN_FACTOR: 3,
    MAX_THRUST: 1,
    MAX_VELOCITY: 10,
    KEYCODE_UP: 38,
    KEYCODE_LEFT: 37,
    KEYCODE_RIGHT: 39,
    KEYCODE_DOWN: 40,
    RIGHT_KEY: false,
    LEFT_KEY: false,
    UP_KEY: false,
    DOWN_KEY: false,
    map: null,

    init: function () {
        GAME.mapImg.src = "assets/images/map.jpg";
        GAME.mapImg.name = 'map';
        GAME.mapImg.onload = GAME.loadImage();

        GAME.vehicleImg.src = "assets/images/vehicle.png";
        GAME.vehicleImg.name = 'vehicle';
        GAME.vehicleImg.onload = GAME.loadImage();

        if (!createjs.Ticker.hasEventListener("tick")) {
            createjs.Ticker.addEventListener("tick", GAME.tick);
        }
        $(document).keydown(GAME.handleKeyDown);
        $(document).keyup(GAME.handleKeyUp);
    },

    loadImage: function () {
        GAME.vehicle = new createjs.Bitmap(GAME.vehicleImg);
        GAME.vehicle.x = CANVAS.width / 2;
        GAME.vehicle.y = CANVAS.height / 2;
        GAME.vehicle.width = 100;
        GAME.vehicle.height = 69;
        GAME.vehicle.regX = GAME.vehicle.width / 2;
        GAME.vehicle.regY = GAME.vehicle.height / 2;


        GAME.map = new createjs.Bitmap(GAME.mapImg);
        GAME.map.scaleX = 1;
        GAME.map.scaleY = 1;
        GAME.map.width = 3000;
        GAME.map.height = 2000;
        GAME.map.regX = GAME.map.width / 2;
        GAME.map.regY = GAME.map.height / 2;
        GAME.map.x = CANVAS.width / 2;
        GAME.map.y = CANVAS.height / 2 - 300;
        GAME.map.speed = 0;
        GAME.map.vX = 0;
        GAME.map.vY = 0;

        STAGE.addChild(GAME.map);
        STAGE.addChild(GAME.vehicle);
        STAGE.update();
    },

//game listener
    tick: function (event) {
        if (GAME.LEFT_KEY) {
            GAME.vehicle.rotation -= GAME.TURN_FACTOR;
        }
        if (GAME.RIGHT_KEY) {
            GAME.vehicle.rotation += GAME.TURN_FACTOR;
        }
        if (GAME.UP_KEY) {
            GAME.accelarate();
            if (GAME.LEFT_KEY) {
                GAME.vehicle.rotation -= 5;
            }
            if (GAME.RIGHT_KEY) {
                GAME.vehicle.rotation += 5;
            }
        }
        if (GAME.DOWN_KEY) {
            GAME.decelerate();
            if (GAME.LEFT_KEY) {
                GAME.vehicle.rotation -= 5;
            }
            if (GAME.RIGHT_KEY) {
                GAME.vehicle.rotation += 5;
            }
        }
        STAGE.update(event);
    },

    handleKeyDown: function (e) {
        if (!e) {
            var e = window.event;
        }
        switch (e.keyCode) {
            case GAME.KEYCODE_LEFT:
                GAME.LEFT_KEY = true;
                break;
            case GAME.KEYCODE_RIGHT:
                GAME.RIGHT_KEY = true;
                break;
            case GAME.KEYCODE_UP:
                e.preventDefault();
                GAME.UP_KEY = true;
                break;
            case GAME.KEYCODE_DOWN:
                e.preventDefault();
                GAME.DOWN_KEY = true;
                break;
        }

    },

    handleKeyUp: function (e) {
        if (!e) {
            var e = window.event;
        }
        switch (e.keyCode) {
            case GAME.KEYCODE_LEFT:
                GAME.LEFT_KEY = false;
                break;
            case GAME.KEYCODE_RIGHT:
                GAME.RIGHT_KEY = false;
                break;
            case GAME.KEYCODE_UP:
                GAME.UP_KEY = false;
                break;
            case GAME.KEYCODE_DOWN:
                GAME.DOWN_KEY = false;
                break;
        }
    },

    accelarate: function () {
        var angle = GAME.vehicle.rotation;
        if (GAME.LEFT_KEY) {
            angle -= 5;
        }
        if (GAME.RIGHT_KEY) {
            angle += 5;
        }
        GAME.map.vX -= Math.cos(angle * Math.PI / 180) * 3;
        GAME.map.vY -= Math.sin(angle * Math.PI / 180) * 3;
        GAME.map.vX = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vX));
        GAME.map.vY = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vY));
        GAME.map.x += GAME.map.vX;
        GAME.map.y += GAME.map.vY;
    },

    decelerate: function () {
        var angle = GAME.vehicle.rotation;

        if (GAME.LEFT_KEY) {
            angle -= 5;
        }
        if (GAME.RIGHT_KEY) {
            angle += 5;
        }
        GAME.map.vX += Math.cos(angle * Math.PI / 180) * 3;
        GAME.map.vY += Math.sin(angle * Math.PI / 180) * 3;
        GAME.map.vX = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vX));
        GAME.map.vY = Math.min(GAME.MAX_VELOCITY, Math.max(-GAME.MAX_VELOCITY, GAME.map.vY));
        GAME.map.x += GAME.map.vX;
        GAME.map.y += GAME.map.vY;
    }

//class end
};


</script>
<!-- javascript -->

</head>
<body>
    <div id="page">
        <canvas id="game" width="640" height="480"></canvas>
    </div>
</body>
</html>

最佳答案

要使碰撞检测适用于您的游戏，您需要对项目进行相当多的更改:目前您有一张大 JPG 作为 map ，如果您尝试让对象与其他对象发生碰撞，这不是一个好主意。

1) 如果您愿意拆分大 JPG map (可能是最快的可接受的解决方案):您可以使用一张大灰色 JPG 作为地板，并将单个绿色位图放置在该地板顶部。然后你可以使用 @WiredPrairie ( https://github.com/olsn/Collision-Detection-for-EaselJS ) 建议的碰撞检测 - 以这种方式进行碰撞检查应该大约需要 3-4 行代码(+分割当前 map.jpg 的工作)。

2)如果您想将该 JPG 保留为 map :我建议您为绿色区域创建自定义矩形，并检查每个帧是否购物车位于此类矩形内。另一种选择是实现一个像 Box2D 这样的物理库(我知道，这需要一些时间才能进入 Box2D 或其他库，我猜你正在寻找一个快速的解决方案，但相信我:这是值得的它)

作为一个不相关的提示:对于像您这样的项目，确实值得一看 Box2D 或其他物理引擎，一旦您掌握了它的工作原理，使用物理库确实有很大帮助;-)

关于javascript - HTML5 Canvas 游戏静态实体元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17424493/

26 4 0
文章推荐： javascript - OpenWeatherMap - map 仅显示莫斯科
文章推荐： javascript - js 按类在按钮上堆叠
文章推荐： javascript - 将简短的 jquery 转换为独立的 javascript
文章推荐： javascript - 使用 timezone-js 进行 JS 时区转换
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com