在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:andrewrk/chem开源软件地址:https://github.com/andrewrk/chem开源编程语言:JavaScript 100.0%开源软件介绍:canvas-based game engine and toolchain optimized for rapid development. Features
Featured Game DemosUsage# install dependencies in ubuntu
# for other OSes see https://github.com/LearnBoost/node-canvas/wiki/
sudo apt-get install libcairo2-dev
# start with a nearly-empty project, such as a freshly created project
# from github with only a .git/ and README.md.
cd my-project
# use npm init to create a package.json file so that we can install
# dependencies locally instead of globally.
# feel free to mash enter through the series of questions.
npm init
# init the project with chem-cli
npm install chem-cli
./node_modules/.bin/chem init
# the `dev` command will run a development server which will automatically
# recompile your code, generate your spritesheets, and serve your assets.
npm run dev
# see more commands
./node_modules/.bin/chem See chem-cli for more information. SynopsisLayoutSource files
Generated files
./src/main.jsvar chem = require("chem");
var v = chem.vec2d;
var ani = chem.resources.animations;
var canvas = document.getElementById("game");
var engine = new chem.Engine(canvas);
engine.showLoadProgressBar();
engine.start();
canvas.focus();
chem.resources.on('ready', function () {
var batch = new chem.Batch();
var boom = new chem.Sound('sfx/boom.ogg');
var ship = new chem.Sprite(ani.ship, {
batch: batch,
pos: v(200, 200),
rotation: Math.PI / 2
});
var shipVel = v();
var rotationSpeed = Math.PI * 0.04;
var thrustAmt = 0.1;
var fpsLabel = engine.createFpsLabel();
engine.on('update', function (dt, dx) {
ship.pos.add(shipVel);
// rotate the ship with left and right arrow keys
var rotateAmt = rotationSpeed * dx;
if (engine.buttonState(chem.button.KeyLeft)) ship.rotation -= rotateAmt;
if (engine.buttonState(chem.button.KeyRight)) ship.rotation += rotateAmt;
// apply forward and backward thrust with up and down arrow keys
var thrust = v.unit(ship.rotation).scale(thrustAmt * dx);
if (engine.buttonState(chem.button.KeyUp)) shipVel.add(thrust);
if (engine.buttonState(chem.button.KeyDown)) shipVel.sub(thrust);
// press space to blow yourself up
if (engine.buttonJustPressed(chem.button.KeySpace)) {
boom.play();
ship.setAnimation(ani.boom);
ship.setFrameIndex(0);
ship.on('animationend', function() {
ship.delete();
});
}
});
engine.on('draw', function (context) {
// clear canvas to black
context.fillStyle = '#000000'
context.fillRect(0, 0, engine.size.x, engine.size.y);
// draw all sprites in batch
batch.draw(context);
// draw a little fps counter in the corner
fpsLabel.draw(context);
});
}); ./chemfile.js// the main source file which depends on the rest of your source files.
exports.main = 'src/main';
exports.spritesheet = {
// you can override any of these in individual animation declarations
defaults: {
delay: 0.05,
loop: false,
// possible values: a Vec2d instance, or one of:
// ["center", "topleft", "topright", "bottomleft", "bottomright",
// "top", "right", "bottom", "left"]
anchor: "center"
},
animations: {
boom: {
// frames can be a list of filenames or a string to match the beginning
// of files with. If you leave it out entirely, it defaults to the
// animation name.
frames: "explosion"
},
ship: {}
}
}; ./public/index.html<!doctype html>
<html>
<head>
<title>Chem Example</title>
</head>
<body style="text-align: center">
<canvas id="game" width="853" height="480"></canvas>
<p>Use the arrow keys to move around and space to destroy yourself.</p>
<script type="text/javascript" src="main.js"></script>
</body>
</html> More Demo Projects Using Chem
Developing With ChemChemfileStart by looking at your This file, like every other source file in your game, can be in any compile- to-JavaScript language (including JavaScript itself) that you choose.
If you leave the Use any "compile to JS" languageSupported languages:
Getting StartedThe first step is to require "chem": var chem = require('chem');
// Next, locate your canvas:
var canvas = document.getElementById("the-canvas-id");
// Create the main game engine:
var engine = new Engine(canvas);
// Display a nice loading progress bar while we serve assets:
// (it automatically goes away once loading is complete)
engine.showLoadProgressBar()
// Start the main loop:
engine.start()
// Focus the canvas so that keyboard input works:
canvas.focus()
// Finally, wait until resources are done loading:
chem.resources.on('ready', function() {
// Now you can go for it. All asssets are loaded.
}); Vec2d ConventionAs a convention, any Resource LocationsText files placed in public/text/ will be available in the Image files placed in public/img/ will be available in the
Reference API DocumentationSee doc/api.md. History / ChangelogSee doc/history.md. |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论