Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 54 results

  1. Mouse Hover Events

    Hey everyone! I wanted to get a bit of help getting a function working whereby when I hover my mouse over character sprites it will show a there name and title just above the mouse position for each different sprite, I'm unsure if I need to look at going down the route of a mouse hover/mouse over function or i need to create an event listener. If anyone could make a demo that I could play with and learn from or something that would be perfect! Thanks guys! Mezz
  2. Hi All! Do you have experience in HTML Game Developement? And the following skill set? JavaScript, JQuery HTML/HTML5 CSS/CSS3 Pixi JS / Spine JS Google Closure Active knowledge of English Send me a PM if you would like to know more details about this. Relocation is required and VISA is supported. Please don't contact me if you are selling services from company's. Only looking for people who are willing to move to Prague and have a full time contract with us.
  3. Hey Guys! I have a question! I wanted to know if there is a way that when you click on a sprite can you set the css value for display to none for all other sprites - so essentially, when one sprite is clicked(chosen) all others display:none the chosen is set to display:block. I'm going for the effect of click on one character and it hides the others so you see your selected character and there bio(name, description etc...) appears next to them as display: block whereas all others are display: none. I am struggling as I can't call the sprite elements within the canvas by flat css - so was wandering if and how it is possible to achieve my hoped functionality! This might be something for you @Wingnut? Thankss! Mezz out!
  4. Player and Colliding Objects

    Hi, I need some help with my code, I am trying to create a fenced in area for my character to go in, but he cannot fit through because of the objects that he collides with. How do I change the area that the character collides with? can I reduce the size of the collidable area? The hole in the fence seems quite large enough, but he just won't go through. My game.js // variables for items, walls, etc. var walls; var house; var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); //add house to game function addHouse(image) { house = game.add.physicsGroup(); house.create(-250, -240, 'greenhouse'); house.setAll('body.immovable', true); } // add fences/walls to the game function addWalls(image) { walls = game.add.physicsGroup(); // fences up top walls.create(-90, -200, 'fencefront'); walls.create(5, -200, 'fencefront'); walls.create(100, -200, 'fencefront'); walls.create(195, -200, 'fencefront'); // fences to right walls.create(288, -200, 'fenceright'); walls.create(288, -135, 'fenceright'); walls.create(288, -70, 'fenceright'); walls.create(288, -5, 'fenceright'); // fences at bottom walls.create(-90, 59, 'fencefront'); walls.create(5, 59, 'fencefront'); walls.create(100, 59, 'fencefront'); walls.create(195, 59, 'fencefront'); // fences to left walls.create(-91, -200, 'fenceright'); walls.create(-91, -135, 'fenceright'); walls.create(-91, -70, 'fenceright'); // set the walls to be static walls.setAll('body.immovable', true); } // preload items, walls, players, etc. function preload() { // preload player game.load.spritesheet('player', 'hero.png', 64, 64); // preload houses game.load.image('greenhouse', 'greenhouse.png'); // preload fences game.load.image('fencefront', 'fencefront.png'); game.load.image('fenceleft', 'fenceleft.png'); game.load.image('fenceright', 'fenceright.png'); } // variables for character var cursors; var player; var left; var right; var up; var down; // add what will be in game function create() { game.world.setBounds(-250, -250, 550, 550); // set background color game.stage.backgroundColor = ('#3c6f42'); // add player image and place in screen player = game.add.sprite(-232, -100, 'player', 1); player.smoothed = false; player.scale.set(1); // player will "collide" with certain images like walls and houses player.collideWorldBounds = true; // ANIMATION FOR PLAYER CONTROLS down = player.animations.add('down', [0,1,2,3], 10, true); left = player.animations.add('left', [4,5,6,7], 10, true); right = player.animations.add('right', [8,9,10,11], 10, true); up = player.animations.add('up', [12,13,14,15], 10, true); // enable physics in the game (can't go through walls, gravity, etc.) game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.enable(player); // make sure to add this code to add items/walls/buildings addHouse(); addWalls(); // enable keyboard arrows for controls cursors = game.input.keyboard.createCursorKeys(); // camera will follow the character game.camera.follow(player); } // what happens when player does something function update() { // player will now collide with these images rather than pass over them game.physics.arcade.collide(player, house); game.physics.arcade.collide(player, walls); // PLAYER CONTROLS player.body.velocity.set(0); // player presses left key if (cursors.left.isDown) { player.body.velocity.x = -100; player.play('left'); } // player presses right key else if (cursors.right.isDown) { player.body.velocity.x = 100; player.play('right'); } // player presses up key else if (cursors.up.isDown) { player.body.velocity.y = -100; player.play('up'); } // player presses down key else if (cursors.down.isDown) { player.body.velocity.y = 100; player.play('down'); } // player does not press anything else { player.animations.stop(); } } function render() { } The HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <link href="https://fonts.googleapis.com/css?family=Syncopate:700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html { background: black } canvas { margin: auto; } h1 { font-family: 'Syncopate', sans-serif; color: rgb(194, 68, 91); text-align: center; margin: 0 auto; font-size: 25px; } </style> </head> <body> <header> <h1>Crafty Heroes</h1> </header> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html>
  5. loadingUI positioning

    Hello! This is no insurmountable problem on my end, but I am implementing Babylon as a lightbox with no iframe. In other words, my canvas has its CSS position property set to "fixed". This breaks the placement of the loading screen. Obviously I will patch it up on my end for now, but to make it work out of box, you could replace line 137 in https://github.com/BabylonJS/Babylon.js/blob/preview/src/Loading/babylon.loadingScreen.ts with something like: var canvasPositioning = window.getComputedStyle(this._renderingCanvas).position; this._loadingDiv.style.position = (canvasPositioning == "fixed") ? "fixed" : "absolute"; I'm pretty sure that would have it working out of box in my case.
  6. How to add controls to image/sprite?

    So to get right to the point. I am having issues with my ship image/sprite and my drawn objects on screen disappearing as soon as I try and addEventListener to code. why does my code essentially break when i add the EventListener? is it not possible to add controls to image or sprite within Html canvas? Ship game code = https://codepen.io/BlaineP16/pen/VpQBZV
  7. Remove child

    So i am trying to orbit a small sphere around a bigger sphere like so: var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= Gball.x*1.3; orbit.position.y = Gball.y/3; orbit.scale.set(0.15, 0.15); Gball.addChild(orbit); animate(); function animate() { requestAnimationFrame(animate); // just for fun, let's rotate mr Honeypot a little Gball.rotation -= 0.05; // render the container renderer.render(stage); } now the only problem is that when i click on the button to remove the child, but want him to keep the position he had in the animation: var ballX = orbit.x; var ballY = orbit.y; document.getElementById("bot").addEventListener("click", function () { var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= ballX; orbit.position.y = ballY; orbit.scale.set(0.15, 0.15); Gball.removeChild(orbit); return false; }); does anyone know how i might be able to do that?
  8. CSS and Phaser input problem.

    Hey guys, I have made some scaling of the game via CSS so I can have my game always the proper size in the browser window. However, I lose my onInputDown because for some reason the game container overflows but visually is okay.... here is my CSS styling (visually it looks perfect): html { height: 100%; margin: 0; padding: 0; } body { height: 100%; margin: 0; padding: 0; } #content { height: 100%; } #content > canvas { margin: 0 auto; height: auto !important; width: auto !important; max-height: 100%; max-width: 100%; position: relative; top: 50%; transform: translateY(-50%); } Here is my game init class: import Boot from 'states/Boot'; import Preload from 'states/Preload'; import GameState from 'states/GameState'; import * as Constants from 'data/Constants.js' class Game extends Phaser.Game { constructor() { let height = window.screen.height; let width = window.screen.height / Constants.SIXTEEN_TO_NINE; super(width, height, Phaser.AUTO, 'content', null); this.state.add('Boot', Boot, false); this.state.add('Boot', Preload, false); this.state.add('GameState', GameState, false); this.state.start('Boot'); }; } new Game(); If I don't have any css code - the input works. I believe it is because the game is still bigger than what it visually appears. Has anyone had this issue?
  9. [PoC] The monster's vault

    Hi everyone! Just wanted to share a small proof-of-concept game I've been working on for a while. It's called The monster's vault. The main goal is to find a way out of a dark creepy dungeon, pull a lever that opens the exit door, while not being caught by a wandering monster that dwells in the darkness, and bla-bla-bla... the whole point here is not about gameplay anyway. This game is inspired by Keith Clark's demo of an HL2 location made entirely by CSS 3d transforms. I tried to repeat his approach by making a browser 3d game with first-person view based on CSS transforms without any use of canvas graphics. My other goal was to try out a number of modern web technologies and APIs available in the browser, so here's what I came out with. ReactJS as a rendering framework and Redux as a game state manager. Kind of a questionable choice for a game, one may think, but hey, as I said, it's a proof-of-concept WIP demo pet home project =) Pointer lock events to control the cursor so that it cannot flow out of the screen. Gamepad api to support my Xbox One gamepad. I haven't been more happy when it actually worked (not sure about other controllers though). Web audio api to control the sounds and the music. It provides a way to place a sound in a 3d space and even make it spread in a certain direction, and that's really awesome. Using your headphones while playing is highly recommended. Service worker makes the game work offline as it caches all the resources after the first load. It can get annoying though, when you start facing the problems with invalidating the cache. I also tried out the svg lighting filters to simulate some shaders on the textures (set on highest graphics quality value in the Settings section). It looks neat but drops the fps dramatically. Some conclusions: declarative 3d graphics with CSS 3d transforms and animations are cool and relatively easy to use, but not performant enough (which is totally fine) modern browsers have some really great APIs helpful for creating various web games making horror games is a huge, huge fun PLEASE NOTE: The monster's vault is only a desktop game and is viewed best in latest Google Chrome. It is inconceivably untested and may not work as expected on most machines and browsers. Some of the technologies used here are still not standardized and may break in the future. Also, the code is not optimised in any way, it weights some MBs. The low rendering FPS is compensated by the high cooler's RPS =) Anyway, I warned you. The game's github repo with some gifs, controls and credits — https://github.com/alvov/the-monsters-vault-game. You can play the game here: https://alvov.github.io/the-monsters-vault-game. Thanks!
  10. Greetings, When adding CSS border-style or padding to the canvas element, I found that the hit zones of dragged objects shift off the sprite, presumably in proportion to the CSS values. Below code shows this error (FF & Chrome). For test.png I used a 100x100 square. If you try to drag the sprite while the mouse pointer is directly over it, it won't move. Move the pointer outside & to the left of the sprite & you'll be dragging it. Even with setting: this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE; this.scale.pageAlignHorizontally = false; this issue still occurs. I came to this, because I wanted a border or side alley to the left & right of the game canvas in a different color. It seems Phaser hijacks the entire width & adding padding to wrapper divs showed up outside the entire width, not next to the canvas element. Anyone know a way to control the padding outside & to the left/right of the canvas element that Phaser creates? Thank You! <html> <head> <script src="assets/js/lib/phaser.js" type="text/javascript"></script> <script> window.onload = function () { var game = new Phaser.Game(768, 1024, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function preload() { console.log('Hey World'); this.game.load.image('test', 'assets/img/test.png'); } function create() { this.test = this.game.add.sprite(this.world.centerX, this.world.centerY, 'test'); this.test.anchor.setTo(0.5, 0.5); this.test.inputEnabled = true; this.test.input.enableDrag(); } function update() { } }; </script> <style> canvas { border-color: #ffffff; border-width: 3em; border-left-style: solid; border-right-style: solid; border-top-style: none; border-bottom-style: none; padding-left: 3em; padding-right: 3em; } </style> </head> <body> <div id='game-wrapper'><div id='game'></div></div> </body> </html>
  11. Hi Guys, I am new to interactive HTML5 stuff, so I'm hoping you good folks can help me with this. I'm no professional developer, but I am a professional audio editor. I have a little bit of experience with HTML code and javascript/c# and enjoy working on small projects as a sideline. To make my first interactive/game-like project a bit easier, I decided to try Google Web Designer. I had some problems with the first attempt, so this time, I coded the CSS content and some other bits myself. The problem I am stuck on now is where I want a spritesheet animation to change play direction with a click event. I recreated the problem in a small project: This is the outcome When Reverse is clicked, I created a function event which adds reverseplay="" to the element which is a boolean attribute. When I add this in the HTML, then run it, it works, it changes the direction of the animation. But when I change it dynamically, it doesn't work. So how do you guys work around this kind of screen/GUI update problem? To test if changing a different attribute works, I dynamically change loopcount="1" to loopcount="2", which works fine. So the Loop = 2 button makes the animation loop twice. I appreciate any help with this; If you need to know anything else about the project, just ask. Thanks
  12. Pause Button

    I am creating an HTML, JS ,CSS game for android. Can someone write an example for a pause button. PS:I have a timer and it need to be stoped when button is presst.
  13. Multi Touch

    Soo... I am creating an android game for 2 players. Its made in JS , HTML5 , CSS Only thing that is mising is multi touch. Can someone type en exsample of a code for multi touch.
  14. Your tasks - Development of a smartphone application for iOS, Android and BlackBerry devices using a cross-platform frameworks and native programming in Objective-C and Java - Project management (if desired) Your profile - Excellent understanding of code and very good technical knowledge in the areas of web and mobile applications - Higher education with excellent achievement in computer science or very good practical experience - Experience in the field of web applications including MVC and JS frameworks are prerequisites - Web design with HTML5 and CSS3 skills are desirable - Project experience with native development (Android, iOS) or Ruby-onRails What we offer - Attractive paid full-time employment - Work in the center of Berlin, on a campus with 4 other startups at Humboldt University - Startup Culture: No hierarchies, early responsibility and cooperation on an equal footing between all employees - Open space: You get enough freedom to implement projects and tasks independently. We value new ideas - Product is live: Apps for iPhone and Android online since september - Skillful and motivated development team - English is working language Application Please send us your complete application documents (cover letter, curriculum, portfolio) and possible starting date via email. Contact us if you have any questions left. We look forward to meet you personally! Daniel de la Cuesta (CTO) Email: jobs@bettertaxi.de Phone: +49 (0) 30/220 137 330 www.bettertaxi.com/jobs https://www.bettertaxi.com
  15. Mouse cursor png

    Hello, I have this weird problem, I am trying to add a specific cursor png for my game. I couldn't find any solutions on how to do it with phaser, so I did it with css for the specific div, but somehow it works for the first three seconds, but when I hover a button in the game the png disappears, on reload it shows up again, and when I hover a button it disappears again? Is there a way to do this with phaser? Am I missing something? Thanks!
  16. WIP Three Point Shootout

    Hello guys, This is my first HTML5 game, it is a classic arcade basketball game. The goal is to score as many points as possible within the 35 second shot clock. Click and hold on the basketball until the power meter is filled green and then release to shoot the ball. Feedback for timing is shown in the top right corner. Everything was done with HTML5, JavaScript, jQuery, and CSS Please feel free to leave any feedback (positive and negative welcome) or advice for improvement! http://brycekrah.github.io/Three-Point-Shootout/
  17. Circle Battle

    Hi there, http://www.circlebattle.com The code is at https://github.com/chiefsmurph/circle-game This is my game called Circle Battle. I currently have it set up where there are different "rooms" which have different kinds of gameplays. But because there are not a lot of players currently, I am thinking of going to a system where players are paired up as they arrive and then I would set up a way where they could set the circle radius, speed and whether or not intensity mode. It's still very much a work in progress, but there has been many hours put into developing the game. John
  18. Injecting Phaser in a Flexbox div

    Good afternoon everyone, I'm having some problems fitting Phaser inside a responsive div. I have already achieved this with bootstrap, but this project requires flexbox -- and it's not working as intended. I have noticed that when Phaser is injected in a div inside a flexbox container, the resize event is not fired when the window changes size. I have tried fitting it in a div with "position: absolute" that follows x, y, width and height properties of the flexbox item, but with no success. Has anyone tried this before? Maybe it's something trivial that I'm missing. Thanks in advance, Pedro Antoninho
  19. [Ask how]Create game for moodle LMS

    Hi All, Anybody in here already create game using phaserjs and embeed to moodle ? i have some problem to do that, if anyone have success, please give me advise. Thank You, P
  20. media queries help

    Hello my game working good in browser but not working good in mobile phone or tablet here is my style sheet can anyone tell me how to fix it http://paste.ubuntu.com/14652149/
  21. Hello, A complete newbie here. So, I selected my project within 3 weeks as " Mario like game with level editor" for my college and can only use plain javascript and nothing else. I have done some research and i found that i have to make it on canvas. My logic was to first create a json data and render the map from that and make it playable. Then make an editor where the user can drag and drop tiles which after finished creates a json data, from which the game can render from. But, how do i start on this? Any guidance? How do i render the json and provide collision detection. Also, how to let user create their own level and create the json data. Help is much appreciated, Thank you!
  22. Hey Guys, I'm a freelance developer since 2005. I'm developed about 100 slotmachines and other gambling stuff, build some casual games and working as webdeveloper on serveral projects like cashboard.de (winner of the SevenVentures Pitch Day 2014). At the last weeks I worked a lot with phaser and build some HTML5-Slots with it. Now I'm searching for some new experiences. If you need a programmer for your website or a game, feel free to contact me. MySkills: HTML5, CSS, JS, jQuery, Bootstrap, Phaser PHP, MySQL, Symfony2, Doctrine, Twig, RedbeanPHP Flash, ActionScript 2/3 Some Demos: Arthur - Be A King HTML5 | Phaser | Slotmachine Lost City Treasures HTML5 | Phaser | Slotmachine West Wind Pirates Flash ActionScript3 | 50:50 BubbleCrusher Flash ActionScript2 | Match-3 Find the Mistakes | HTML5 | Phaser | Find Differences IdleTower | HTML5 | no game framework just jQuery + jStorage | Idle-Game BloxxClicker | Flash ActionScript3 | Idle-Game
  23. Hi, I wanted to show my first game html5 game. It is written in angularJS and uses CSS for responsiveness. It looks like that: It has got: webpage: http://squaredlines.com/ playstore page: https://play.google.com/store/apps/details?id=com.linessquared and as I am posting it in Html5GameDev community, I made it available in the browser: http://squaredlines.com/stratagemone/ on the page there is also twitter/facebook. I wanted to write a game for like two years, since I like a game. Nine months ago I have been discussing media and mathematics with my friend. We were talking about cutting a binary chain (array of binaries) into pieces and reconstructing it. What happens when you represent the chain as line or surface, what happens with size of elements, limits on cutting etc. I have done some experimenting and choose for the first game the most elementary from UX perspective - 2d blocks of binaries. I did not know how to program almost at all, I have been skipping through this forum, I have learned some basic html/css (by writing a very primitive blog engine) I knew how to write in python but I did not know how to run python, I knew set theory and boolean logic, but I did not know what a console in web browser is etc. I decided to go for AngularJS/CSS combo. Then I have added HammerJS/AngularHammer for touch control. The font is open font Teko from Indian Foundry. For sound I use synth in webaudio. Then, as I did not know about publishing games, I went for publishing it on Android. To publish it I used cordova with: cc.fovea.cordova.purchase 3.11.0 "Purchase" cordova-plugin-admobpro 2.8.3 "AdMob Plugin Pro" cordova-plugin-crosswalk-webview 1.2.0 "Crosswalk WebView Engine" cordova-plugin-extension 1.1.4 "Cordova Plugin Extension" cordova-plugin-globalization 1.0.1 "Globalization" cordova-plugin-google-analytics 0.8.0 "Google Universal Analytics Plugin" cordova-plugin-splashscreen 2.1.0 "Splashscreen" cordova-plugin-whitelist 1.0.0 "Whitelist"/nl.x-services.plugins.socialsharing 4.3.19 "SocialSharing" Crosswalk is very nice, it works only for 4.0+ but it makes it work there. I think the game has got some problems which are hard to undo. For example control was previously meant for hoover. Hoover had been eliminated on mobile for long. After rewritting hoover mechanic in touch control it is not perfect on mobile and it is not perfect on desktop. Tutorial has some issues, including the fact that it is not working in game engine, it is more of a separate interactive animation. Combo system is too clever for its own good - almost nobody gets it. Bonus/overflow system also is overcomplicated. In the end one may say there are too many game mechanics/no visible progression. I like it anyway. The single biggest problems in development was lack of knowledge about the tools. I did not know that there is a console in the browser/which text editor to get, its role (I use Brackets)/basic commands and package system - npm / git usage, cmd for windows etc. I have learned a lot and I am thinking about making the last, final version by modifying my js13k entry, which was written for scratch and has got better controls, and rewriting it in panda. I want to keep the resizing from css by writing it myself and I want it to be my first linted code. Then I want to do some game jams using html5. js13k was a lot of fun. If you could tell what would you do to improve on the game / or maybe havegot some idea for distribution, I would be glad to listen.
  24. Hi everyone, I'm searching a framework or engine js for create a game like travian (obviously more small and experimental). I don't know if is better to use frameworks in base to CANVAS or just JavaScript using Divs, images and CSS. To level of graphics should be simple, without much collisions and interactions between object in the scenario. I was searching ideas like the following: http://rotates.org/phaser/iso/ some recomendation or idea? Thanks and I hope your help
  25. Hi, I was looking for some advice from the game dev community. I am an experienced front-end developer and have been making and designing web interface for 10+ years. I have always had a passion for playing and editing games and recently I have decided to try to build a HTML5 game, mostly as a fun personal project and to improve my JS development skills. The game will be a 2D roguelike board game port which I will be happy to get working on modern desktop and device browsers. My question is: Are all my skills with HTML, CSS, responsive, cross browser etc stuff relevant in making an HTML5 game? All the examples and tutorials I see use canvas for everything including the interface. Is there any reason game developers do not build interfaces with CSS? It makes sense to me to use it considering CSS is now quite good at responsive, cross browser/device interactions and can even do most simple animations.