Search the Community
Showing results for tags 'html'.
-
Why is the following CSS code not centering my button horizontally within a div element? It appears off-center in my webpage: <!DOCTYPE html> <html> <head> <style> .container { width: 100%; display: flex; justify-content: center; align-items: center; } .btn { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; } </style> </head> <body> <div class="container"> <button class="btn">Click Me</button> </div> </body> </html> The button seems to be slightly towards the left side within the container. What am I missing in the CSS that is preventing the button from being perfectly centered? -
Hello, Are you looking for best game outsourcing service to help you developing your own mobile game, mobile app? TriasCG is one of the famous game art outsourcing companies in China. TriasCG is based in Chengdu, which is one of the biggest cities in southwest of China. Since established in 2010, TriasCG has cooperated with several top-rated game studios, such as Starbreeze, City Interactive, Mail ru., Disney, Tencent, ect., by offering 3D character Art (both in next-gen and hand painted styles), 3D Props and Environments, 3D Weapons and Vehicles, 3D Animation, 2D Concept, Unity for Virtual Reality. We are great interested in a long-term cooperation with your studio, and provide high quality game outsourcing service for your request. We will always support your project by our best efforts. If you are interested in any kind of collaboration or need more information, please contact us at [email protected]. Thanks! TriasCG
-
Hello It has been a long journey since I started this project (a few years), and the journey is not finished yet. But I assume that I reach a milestone (0.8.25 version) that I can present. Resume Hexa tank is a real-time strategy game where you need to defeat your opponents by colonizing areas. When an area is colonized, you can install bonus cells to upgrade your tanks. An upgraded tank is a tank that conquests! Features • Well guided tutorial. • Two villains to defeat in campaign mode. • Possible to play a customized match in a single player. • Multiplayer is available, playable against friends however a good connection is required. • No registration. • No advertisement. The game is still under development, any great ideas to improve it is welcome. Demos The game was designed for tablets and mobile phones (you can play it with iPhone but it’s better to have an Android) /!\ Please watch the google play video to grasp some game mechanisms. Google play Website Architecture A snippet of the architecture → Components → Common → Button → Circular menu → layouts → input → charts ... → Screen (handle the display) → home page → single player page ... → Hooks (handle the state of the page) → home hook → single player hook → Core → Framework → Builder (setup map, sound, AI…) → Record (save all actions game into a Json file) → Network (synchronize players game state) → Audio (handle sound effects of the game) → Stats (generate game stats (number of tanks, number or cells...)) → AI (pathfinder and a couple of artificial intelligence) → Interaction (handle input behaviors) → Items → Cell → Field → Unit → Tank → Truck → Network → Lobby → Message → Socket → ServerSocker → PeerSocket → Utils → Collections → Events → Exceptions → Logger There is a signal server to connect peers to each other but I think it is enough to just describe the architecture of the main project. Libraries • TYPESCRIPT • WEBPACK • PREACT • PIXI.JS • WEB RTC • SOCKET.IO • CHART JS • HOWLER • CORDOVA I really enjoyed combining all these technologies together, you can make crazy things with them. Considerations and thoughts market First of all, the video game market is really tough there are not so many spaces for little fishes like me. open source I am considering making the project open source I strongly think a lot of bricks of this project can be used to make other games. I hope it can avoid developers to reinvent the wheel when they start a new web game. A list of generic bricks: • statistic service • record service (record logs and the game, possible to visualize each step of the game) • exception handler • interaction manager • multiplayer service • multiplayer lobby • hexagonal map generator • IA • pathfinder • generic UI components • PIXI.JS animator (translation, scaling, fading) … However, I am pretty sure the code will need more clean up to facilitate its usage, I may need some helps. ? Developing a game Making a game is fun but it is time consuming, there are some many aspects to take care of. I am wondering if there are any other persons want to make new game projects with me. My champions Big thanks to all people who did contribute creating all these open source libraries. I especially want to thank Ivan who saved my ass a couple of times for fixing bugs through this forum. Feedback ??? What do you think about making it open source? And what do you think about this game? best regards
-
LQ.mp4 Hello dear players! I wanna introduce my own game i am working on. Genre: MOBA 2D Platformer Player Count: 2-4 - (Actually only 2v2 and 1v1 bracket) Average match length : ~15 minutes Platform: Browser More information here: https://saqirmdevx.itch.io/kingdom-of-pixels Our discord where you can contact me or share your suggestion: https://discord.com/invite/U3TT62TjZB - Kingdom of Pixels is a 2D MOBA, Platformer game similar to the style of other MOBAs like League of Legends and DOTA 2. The game's theme is pixel-like, bringing a nostalgic and simplistic feel to it How to play: You can only buy items in your spawn! Win a match by destroying the enemy crystal with your minions. You cannot damage the crystal yourself, so your minions are your win condition. Open up the path to the enemy crystal by destroying their tower Gameplay video
-
From what I've read I need PIXI text input plugin to use that feature. I need to write input text module as I don't want to use plugins. I'd be thankful if you help me out to understand if I can use HTML tags in Pixi.js somehow (Everything's build up on canvas, and I haven't seen any example this far that does so, maybe I'm missing sth) if not could you provide some resources that can help me figure it out? Are there any finished components I can use or do I need to write anything from scratch? (not only input related but also buttons and stuff like that) Thanks in advance!
-
I was working on a scrollview solution for pixi today and after trying few approaches like using `pointermove` event, `pixi-viewport` that yielded relatively poor performance I landed on a custom solution where I overlay scrollable div over pixi canvas and then on that divs `scroll` event I update my containers y and x values. This works insanely good in terms of performance and keeps some things like scroll bounce on ios, so I am happy with it. The issue as you might guess is that this div covers canvas and I can't disable it's pointer-events, otherwise I loose ability to scroll. It does however have same positioning and size as pixi canvas beneath it, so I was wondering if I can take events from this div like pointerdown / pointerup etc... and somehow trigger them on pixi's canvas / stage element as well to sort of "pass pointer events through that div down to canvas".
-
Hello, I'm a web programmer with 3 years of experience (currently a senior developer). I've always been a fan of videogames and now I'm starting learning game development just for fun. Like in any type of development , you always face problems and learn of those. Sharing is the strongest tool to learn, you help other people to prevent/fix mistakes and they help you. What am I looking for?: People like me that is learning to develop games and want to meet other people to make games with them, share experiences, ask&answer questions. How will we organize? I have experience managing large Telegram groups and also creating bots for groups. It is a good starting point since most of the people always carry the phone everywhere and also has a web/desktop application, also Telegram offers us a direct communication without compromising your privacy (you don't need to give real info or phone number to the rest of the group). If we start growing, we can just move to another platform you want (Discord, Slack, whatever is of your preference). Do you have any project scheduled? Yes, I want to build a fun roguelike, here is my current roadmap of the game: I am an artist, can I join? Sure! I'm sure you can learn from us and we can learn from you, Keep in mind that sound artists, level designers, programmers.. work together and they need to understand all the other positions to work properly. Of course this is a flexible diagram, I don't do this as my job and I don't have any deadlines, creating a roadmap just helps me with organization so I don't start wrongly (which with end even worse :P). Have in mind that my only goal is just learning, I'm not in a rush to make money or finding a job Just feel free to contact me if you want to join or if you doesn't like something of my post. -
angular Hiring Angular/HTML Developer for Gurgaon
Swati posted a topic in Jobs (Hiring and Freelance)
Have 2 - 10+ years of software development experience, including front-end development experience with HTML5, Angular, Javascript and CSS • Break down user and technical stories into tasks and work on them • Maintain our existing Flex codebase and help build out a new HTML5 codebase. • Write unit tests and code comments • Write technical documentation for use by other developers, testers and support • Participate in code reviews and refactoring • Participate in Level 3 support of production environments • Attend daily scrum meetings • Collaborate with team members overseas and on location Desired Skills and Qualifications: • Strong proficiency with HTML5 stack, including CSS3/JavaScript and at least one library or framework (e.g. AngularJS, jQuery, etc.) – both preferred. • Good knowledge of Adobe Flex and Actionscript is a plus • Familiarity with Agile practices • Working knowledge of code versioning tools, such as Git • Fantastic communication skills Github account with c revert to [email protected] -
Hey guys, I added a form to my game, wanting to let the user choose a seed. <form onsubmit="getSeed(event)"> <span>Seed:</span> <input id="seed" type="number" name="seed" value="111" /></form>My structure of my code is like so: module ModuleName { export class World extends Phaser.State { ... create() { ... } getSeed(event) { event.preventDefault(); console.log("submitted"); var seed = document.getElementById('seed')["value"]; ... }}How can I get my function to run, how do I target it? I obviously get an error (ReferenceError: getSeed is not defined) since it can't find my getSeed function. Is it even targetable from outside? Putting "public" infront of the function didn't help, I also tried game.getSeed(), this.game.getSeed(), game.World.getSeed() and a few others to no avail. :/ Also, a bit off topic: Would you take another route than adding an html form?
-
Flash would be officially dead after December 2020.. So if you are interested in converting your courses in HTML contact us! Take a look at some of our works! https://hexalearn.com/
-
Hi guys, I made an open-source toolkit for developing with HTML, CSS, and JS that I would like to share with you. Components GitHub repository -
Hello game devs I have a quick question, any help would be greatly appreciated. I am switching over from designing and building the front end of websites to building games. What are the currently the best books/sites or resources to learn mobile game development. I have already designed a game, and I want to learn how to code it and hopefully publish it on the IOS and Android stores sometime this year. Thanks for checking out this post and please let me know.
-
I would like to share a website I built with Phaser 3. I believe Phaser is going to change the way we interact with online content, and I would love to play a part in that change. Here is the website: https://cannabijoy.com/ Although I have a desktop version, I recommend you check it out on your smartphone. The entire website was built on my phone, so mobile browsers will get most of the attention. In fact, the only time I’ve used a PC is to make sure my code is working. The mini games are built to show off the capability of Phaser, but I’m currently working on a platform puzzler with my slingshot character. I do believe these are the first games built with Phaser that utilize a slingshot, and if my website becomes successful, I hope one day to teach the functionality in my tutorials. For now I’m trying to establish myself as a programmer, because I don’t actually work in this field. Any feedback will be greatly appreciated. Thanks for checking it out! -
I am creating a game in phaser 3 where I need to work with texture atlas. There are no useful tutorial available online and I have no idea how to even start. So here are my questions. 1) How to load a JSON atlas and draw images from it? 2) How to randomly select a texture from the atlas and draw it? Note : While packing my textures I selected JSON array option. Some tutorials which I found online. LoadingTextures RandomTexture AddingAtlas
-
Hello everyone. I have built a game using Phaser. On game over, the players high score is recorded in a variable (this.inputScore). To submit their high score to the server, the player clicks a button that takes them to an Index.html page where there is a form they fill in. To avoid cheating, I want the high score variable to be passed from the game's JavaScript file (Game.js) to an input value on the form as a read only value. I have created a function (assignValue) inside the Game.js file to execute this task, but because of it's scope I cannot get the function to be read by the Index.html file. When I place the function at the top of the Game.js script (globally) the Index.html reads the function and executes it accordingly (but with a hard-coded value for testing purposes.) How can I get the Index.html file to read my assignValue() function and pass this.inputScore to the input value in Index.html? Any help would be greatly appreciated - still learning. Thanks. Game.js file: //INDEX.HTML READS THE assignValue function BELOW (WITH A HARD CODED VALUE FOR TESTING) AND //APPLIES IT BECAUSE IT IS IN GLOBAL SCOPE. BUT I NEED THE VALUE TO BE A VARIABLE TAKEN FROM THE //assignValue FUNCTION INSIDE THE GAME CODE. SEE GAME CODE BELOW: function assignValue() { document.getElementById("inputScore").value = 127; }; //GAME CODE var CrystalRunner = CrystalRunner || {}; CrystalRunner.GameState = { init: function() { //...code here }, create: function() { //...code here }, update: function() { //..code here //check if the player needs to die if(this.player.top >= this.game.world.height && this.counter === 0 || this.player.left <= 0 && this.counter === 0) { this.gameOver(); } }, gameOver: function(){ this.game.time.events.stop(); this.player.body.enable = false; //..code here this.updateHighscore(); //..code here }, updateHighscore: function(){ this.highScore = +localStorage.getItem('highScore'); if(this.highScore < this.myScore){ this.highScore = this.myScore; this.inputScore = this.highScore; this.congrats = this.game.add.sprite(this.game.world.centerX-193, this.game.world.centerY-20, 'congrats'); this.congrats.inputEnabled = true; this.congrats.fixedToCamera = true; this.submitScoreButton = this.game.add.sprite(this.game.world.centerX-135, this.game.world.centerY+100, 'submitScoreButton'); this.submitScoreButton.inputEnabled = true; this.submitScoreButton.fixedToCamera = true; this.submitScoreButton.events.onInputUp.add(function() { window.location.href = "index1.php"; }, this); } localStorage.setItem('highScore', this.highScore); }, //THE FUNCTION BELOW IS NOT BEING READ BECAUSE OF SCOPE. HOW TO I MAKE INDEX.HTML READ IT? assignValue: function() { document.getElementById("inputScore").value = this.inputScore; }, }; Index.html file: <?php require_once 'dbconnect.php'; ?> <!DOCTYPE html> <html lang="en"> <head> <title>Crystal Candy Game Login</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/> <link href="css/style.css" rel="stylesheet"> <script type='text/javascript' src='js/jquery-2.2.3.min.js'></script> <script> $(window).on('load', function() { $('#status').fadeOut(); $('#preloader').delay(350).fadeOut('slow'); $('body').delay(350).css({'overflow':'visible'}); }) </script> </head> <body onload="assignValue()" class="bg"> <div id="preloader"> <div id="status"> </div> </div> <div class="wrapper"> <div class="texte"> <header> <h1>SUBMIT YOUR SCORE</h1> <img id="logo" src="assets/images/logo.png"> </header> <p>Submit your highscore and you could stand a chance to win a prize!</p> </div> <div id="main"> <form id="form-style" method="post" action="crystalhandle.php" autocomplete="off"> <div class="form-group"> <label class="header-text"><span>First Name</span></label> <input class="form-control" type="text" id="name" name="username" placeholder="Name" title="Please enter your Firstname" required=""> </div> <div class="form-group"> <label class="header-text"><span>Surname</span></label> <input class="form-control" type="text" id="name" name="surname" placeholder="Surname" title="Please enter your Lastname" required=""> </div> <div class="form-group"> <label class="header-text"><span>Email</span></label> <input class="form-control" type="email" id="email" name="email" placeholder="[email protected]" title="Please enter a Valid Email Address" required=""> </div> <div class="form-group"> <label class="header-text"><span>Phone</span></label> <input class="form-control" type="tel" id="name" name="phone" placeholder="Phone" title="Please enter your Phone No" required=""> </div> <div class="form-group"> <label class="header-text"><span>Score</span></label> <input class="form-control" type="tel" id="inputScore" name="score" value="" readonly> </div> <!-- I need the above input value to have the variable from assignValue inserted into it--> <div class="w3ls-btn form-group"> <div class="wthreesubmitaits"> <input type="submit" name="signup" id="reg" class="button" id="next1" value="Send" style="font-family: sans-serif; font-size: 17px; font-weight: bold;" </div> </div> </form> </div> </div> <script type="text/javascript" src="js/phaser.min.js"></script> <!--the below js file is where assignValue() is defined:--> <script type="text/javascript" src="js/states/Game.js"/></script> </body> </html> -
I want to able to render fractions (e.g. 1/4, 2/3, 3/8, 3/2) in my game that the player can drag to a line. I'm wanting more fractions than the typical ones, e.g. 5/2, and I'm wanting to be able to generate them from within phaser. Anyone got a good idea of maybe how to do this. Was wondering about using an html file as that would give me super and sub scripts, but that would require a file for each fraction. Thanks, Gordon
-
If you haven't yet seen A-Frame yet, you should check it out. The gist is that you use HTML tags to define your scene. I was working on porting A-Frame to Vue because the devtools are amazing and the components are expressive and makes your app really reactive. I prefer Vue over React since it's simpler and I don't have to work in JSX. While working on integration with A-Frame I started to notice that the overlap between A-Frame's entities and Vue's components became rather cumbersome and Three.js's API and documentation made the situation worse. I noticed the Babylon.js project shortly after and discovered how awesome it is. I then decided it would be better to make my own ECS using Babylon.js with Vue components. As of right now I have Scene, Entity, Mesh, Light, and Animation components created. Here's a sneak peek: And the code for the scene written in Pug: I'll keep this thread updated as I continue progressing on the project. Let me know if you have any ideas or feedback. You can watch me code it on my Twitch stream this Monday from 2-10pm CST. I just started this project a couple days ago, so it doesn't have documentation yet, but you can see the code on Github or grab it off of NPM as vue-babylonjs
-
Hello, I'm currently making little games on codepen to teach myself how to bluid them and get better at it So i thought it could be nice if I post on this topic every time i make a new game for the feedbacks I'm using javascript and render graphics on canvas, and piskel for the spritesheets. 1/ Marble labyrinth Created JANUARY 23, 2017 tilt the screen with your mouse and move the sphere to the square, beware the holes in the ground. Link: http://codepen.io/Gthibaud/full/zNwgmZ/ 2/ The Dungeon Created FEBRUARY 07, 2017 walk through the dungeon, each time you enter a new room your score get higher. Link: http://codepen.io/Gthibaud/full/MJqgzv/ 3/ Copycat Created MARCH 30, 2017 This game is about cloned cats which you control at the same time Link: https://codepen.io/Gthibaud/full/ryQRYP/ 4/ Don't touch the spikes (clone) Created MAY 05, 2017 Link : https://codepen.io/Gthibaud/full/aWLjKL/ 5/ Taxi Apocalypse Created NOVEMBER 06, 2017 Link : https://codepen.io/Gthibaud/full/WXxMdb/ 6/ key Sprinter Created August 18, 2018 Link : https://codepen.io/Gthibaud/pen/eLOYem
-
Hi, I'm an animator and I have no knowledge regarding coding and programming. recently our parent company (game developer) told us we could use pixie particles online editor for creating particles in HTML5 games and the asked us to go to the "http://pixijs.io/pixi-particles-editor/" and create an emitter so they could use that particle in our designs. I realized it would be better if I could make an HTML file to preview the particle. a very simple animation to send the particle spawning point around a square. like this http://www.html5gamedevs.com/topic/34892-pixi-particles-emitter-how-to-make-it-move-from-point-to-point/ the problem is, the deeper I go the darker it gets!!! the problem is I don't even know what I have to learn before attempting to make it work!!! is it HTML? is it java? do you call it Scripting ??? is the place to go to get information? so far I think I need to create a server? install Pixi js (i don't know how) install npm ?? (I don't know why?) this is very confusing write know -
Hey all, I want to resize an element but not as often as I currently do it. Right now I have a project with an html element that gets resized on every frame and it runs on every update. game.gui.TextArea = me.Renderable.extend({ init: function() { this.textarea = document.createElement('textarea'); this.textarea.id = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true"; me.video.getWrapper().appendChild(this.textarea); }, update: function() { videoPos = me.video.getPos(); this.textarea.style = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; } }); I'm concerned about this, this code will run way more often than it needs. Not sure about the performance impact but it only needs to run when the window size is updated. Is there a way I can piggyback on any melonjs functions that resize the canvas and only run it then?
-
Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. This is example in codepen I'm found contidion to mouseenter and mouseleave event if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ mouseX = mouseData.data.global.x; mouseY = mouseData.data.global.y; TweenMax.to( displacementFilter.scale, 6, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); rotateSpite(); }; slidesContainer.pointerout = function( mouseData ){ TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } The default animation settings is: if ( options.autoPlay === true ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } I thought I can do something like this if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } This is pen with that "changed" part https://codepen.io/Frunky/pen/oMZbvr Also I need to load all items, but loads only one item. Why? Thanks
-
Hi, I'm so happy to introduce you BIOK! BRIEF DESCRIPTION BIOK is pure strategy and intuition. A board game for the ingenious and the acute minds. Lead the creatures on the playing field to capture monsters and all kinds of items. Watch the monsters’ eyes and guide them to their preys. KEY FEATURES - Simple controls and fluid mechanics, super simple to understand and fun to use - 60 levels in many worlds with various maps - 10 creatures with different characteristics and abilities - Bonus and survival mode to solve puzzles and challenges - Special objects and environmental elements - Secondary missions and hidden objectives iOS - AVAILABLE Get BIOK from the Apple App Store ANDROID/WINDOWS - BETA You can access the beta: BETA ACCESS (remember to use your google account) MORE ABOUT BIOK You can read more about on the official BIOK game page. FOLLOW US Send us any commend and advice. Help us to make a better game. Facebook | Twitter | Web
-
We're looking for devs to participate in testing our playable content creation platform. Here are some details on the features and benefits: Using our library of existing game assets or starting from scratch, game devs can easily build and customize playables to attract ready-to-pay/play users through highly engaging and fun interactive experiences. Custom playables are instantly published and can be distributed across any website/network/app to engage and acquire new, high LTV users. If you're interested in participating, please respond to this thread or email me at [email protected] -
Hello, I'm fairly new to development with Phaser (TypeScript). I've made a simple login screen in HTML, and I'm trying to make the "Log In" button which is in the external HTML call a function in my Phaser game. This is the button that will call the function: <button onclick="login()">Log In</button> Where in my project should I write the function "login", and how can I call it when I click the button? Any help would be greatly appreciated. ? I'm using this as a base for my project (I purchased his book): https://github.com/code0wl/Multiplayer-Phaser-game
-
Hey Guys I am currently struggling significantly with a task, I have my canvas with 38 sprites in, which you pan across each is set up with these values; staffnum = 38; staffs[staffnum].name = "Dave"; staffs[staffnum].description = "Description: Dave is cool"; staffs[staffnum].title = "Title: Dave's Title" staffs[staffnum].image = "Images/TinyPNG/Dave.png"; staffs[staffnum].department = "Dave's Tech" staffs[staffnum].position.x = 23.3; staffs[staffnum].position.z = -0.2; staffs[staffnum].position.y = 5.65; staffs[staffnum].isPickable = true; staffs[staffnum].size = 3; I currently run through the array and can pull the data values for each.name .description and so on... with a mouse click, so when you click a sprite it opens a modal box in html over the top of the canvas with that image and the values pulled through and displayed, then you can close the box and return to canvas. The task I am trying to accomplish, is when my mouse cursor is hovering over someone, i want to display there .name and .title value that's being created in my js file through and display above the cursor so you can see who you are hovering over basically. I currently cannot find a way of completing this task, if anyone could make a simple playground, code pen, whatever platform with a small demo of this in affect that I could use to understand and then apply to my work? My build is seperated into multiple files currently so making a babylon playground isnt possible, but if need be i can provide a link to my build folder for download, THANKSSSS Mezz
-min(1).thumb.jpg.8044792a1aeff55b5384cab8c1abea7c.jpg)