Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <title>My Second Phaser Game</title>
- <script type="text/javascript" src="js/phaser.min.js"></script>
- <style type="text/css">
- body {
- font-family: Century Gothic, Arial;
- background-color: #CCCCCC;
- margin: 0px auto;
- text-align: center;
- }
- .container {
- background-color: #999999;
- margin: auto;
- width: 1000px;
- height: 1000px;
- }
- .header {
- font-size: 22px;
- background-color: #999999;
- border: 1px dashed #666666;
- color: #444444;
- width: 800px;
- font-size: 14px;
- text-align: center;
- margin: 10px auto 0px auto;
- }
- canvas {
- padding: 0px;
- margin: auto;
- }
- #footer {
- clear:both;
- margin-top: 10px;
- border-top: 5px solid #6D7AB2;
- padding: 20px 0px;
- font-size: 80%;
- text-align:center;
- }
- a {
- color: blue;
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <div id="header">
- <p>The OrcChaser Remix</p>
- </div>
- <div id="main">
- <div id="game"></div>
- <p>OrcChaser on the Phaser framework. It's fun and awesome, you should <a href="http://http://www.photonstorm.com/phaser/">check it out!</a></p>
- </div>
- <div id="footer">
- <p>Copyrighted whenever I make my own graphics.</p>
- </div>
- <script type="text/javascript">
- var game = new Phaser.Game(512, 480, Phaser.AUTO, 'game', { preload: preload, create: create, update: update });
- function preload() {
- game.load.image('background', 'assets/pics/background.png');
- game.load.image('hero', 'assets/pics/hero.png');
- game.load.image('orc', 'assets/pics/monster.png');
- }
- var player;
- var band;
- var score = 0;
- var scoreText;
- function create() {
- // Enable the Arcade Physics system
- game.physics.startSystem(Phaser.Physics.ARCADE);
- // Add the background
- game.add.sprite(0, 0, 'background');
- // Add 'orc band' group
- band = game.add.group();
- band.enableBody = true;
- // The player and its settings
- player = game.add.sprite(game.world.width / 2, game.world.height / 2, 'hero');
- game.physics.arcade.enable(player);
- // Add 5 orcs
- for (var i = 0; i < 5; i++)
- {
- // Create a orc inside the 'band' group
- var orc = band.create(Math.random() * game.world.width - 32, Math.random() * game.world.height - 32, 'orc');
- }
- // Score text
- scoreText = game.add.text(32, 32, 'Score: 0', {font: '16px Helvetica', fill: '#000' });
- // Controls
- cursors = game.input.keyboard.createCursorKeys();
- }
- function update() {
- // Collide the player and the orcs
- game.physics.arcade.collide(player, band);
- // Checks overlap between player and orcs, if it exists call the catchOrc function
- game.physics.arcade.overlap(player, band, catchOrc, null, this);
- // Reset the player's velocity (movement)
- player.body.velocity.x = 0;
- player.body.velocity.y = 0;
- if (cursors.left.isDown)
- {
- // Move to the left
- player.body.velocity.x = -150;
- }
- if (cursors.right.isDown)
- {
- // Move to the right
- player.body.velocity.x = 150;
- }
- if (cursors.up.isDown)
- {
- // Move up
- player.body.velocity.y = -150;
- }
- if (cursors.down.isDown)
- {
- // Move down
- player.body.velocity.y = 150;
- }
- if (cursors.left.isDown && cursors.right.isDown)
- {
- // Stops horizontal movement if both left and right are pressed
- player.body.velocity.x = 0;
- }
- if (cursors.up.isDown && cursors.down.isDown)
- {
- // Stops vertical movement if both up and down are pressed
- player.body.velocity.y = 0;
- }
- // Checks if entities are inside boundaries
- if (player.x > game.world.width - 64 || player.x < 64 || player.y > game.world.height - 64 || player.y < 64)
- {
- player.x = game.world.width / 2;
- player.y = game.world.height / 2;
- }
- if (band.x > game.world.width - 64 || band.x < 64 || band.y > game.world.height - 64 || band.y < 64)
- {
- band.x = game.world.width / 2;
- band.y = game.world.height / 2;
- }
- }
- function catchOrc (player, band) {
- // Removes the orc from the screen
- band.kill();
- // Add and update the score
- score += 10;
- scoreText.text = 'Score: ' + score;
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement