Sandcastle Games

  • Content Count

  • Joined

  • Last visited

1 Follower

About Sandcastle Games

  • Rank

Contact Methods

  • Website URL

Recent Profile Visitors

236 profile views
  1. Thank you for taking your time to reply. I tried to integrate this into my game and came up with several issues: Much of the code deals with designing the canvas to a specific aspect ratio which I do not want. For many games this would be the intent and I use something similar in other games. But in this case I want to cover the available area. But of course I could simplify this for myself. The width calculation is based on window.innerWidth which includes scrollbars. For example my website will most of the time have a vertical but no horizontal scrollbar. Setting the canvas to window.innerWidth would create a horizontal scrollbar as well to scroll to the part of the canvas that is "behind" the vertical scrollbar. As a result also not the full height would be visible as the bottom is covered by a scrollbar. At no time the full canvas would be visible. The canvas dimensions are set using the style width/height which would stretch/shrink the canvas instead of setting it to the dimensions available which is my intent. I could simply adapt your code to this (and did already). For some reason it also creates the canvas higher than my window is. I am not sure why this is yet. I adapted your code a little to fit into my game so there might be a problem there. I considered creating a minimum viable product to show it but I think as your code does not address my real issue of covering the whole area (partly due to padding created by maintaining aspect ratio but also by not addressing the scrollbar issue) I think it is not useful to present the working example here. Does anyone have suggestions especially on the scrollbar issue?
  2. Hello, I have a question that is partly technical but also a usability question. I am usually working on PCs but want my games to run on smartphones as well. Often I have the situation that I have a canvas that should cover as much of the screen as possible. I have not found out a reliable way to find out the correct size of the screen due to my inability to detect scrollbar presence reliably. So I reduce the canvas size a little on the right and bottom to leave space for potential scrollbars. This leaves touch screen users the chance to scroll the page up and down and therefore hiding parts of the canvas. I have a general website menu above the canvas and a manual for the game below. So for these reasons I also appreciate the people to be able to scroll there. As an overlay on the canvas I have a drop down "hamburger" menu to toggle the canvas area to full screen (solves the problem) or to center the canvas (I.e. align the top left to the top left of the screen). There is also a button to move up to the website menu section or down to the manual section I have recently started to make small learning programs to support schools. Children using this are not all skilled using smart phones. A kid recently moved part of the canvas out of the visible area and was not able to complete the tasks anymore as it was missing essential information outside of the screen. I suppose this kid wouldn't have been able to operate the menu to toggle full screen on or off or center the screen. So what I am searching for is a reliable solution to make the canvas as big as the screen without using full screen mode and without making the canvas so big it creates scrollbars itself. Alternatively I am searching for a way to prevent the "unintended" scrolling (but somehow want to still accept intended scrolling to see the manual or website menu section next to the canvas - but this could be through the drop down menu). Actually I am not too sure what I am searching for ... Is there some kind of widely accepted approach for this type of problem? The game can be found here: "Himmelsrichtungen" (a game teaching geographical directions, directions of the sun etc.) It is German only but I am really just asking about the technique. Thanks for any advice
  3. Hello, Thanks for trying it out. Did you read the manual below the game area? Double tapping brings up the grid with the map as you have seen. Moving is done by a drag (or swipe?) gesture to the left/right/front/back (i.e. hold on screen, move finger for a specific threshold and lift the finger). I am not a great gamer on touchscreen devices so I am not familiar how you would best implement a moving that I would normally implement with cursor keys. If you suggest a more natural way of moving on touch screens I might change it.
  4. Can someone help trying this with an older smartphone? I am thinking about optimizing the graphics performance by buffering the static graphics and only painting the changes on top. However on my recent but low end smart phone and my computers I achieve already maximum frames per second and will not see a difference with this change, Can someone report if it is not running smooth on older smartphones? I have no feeling what smartphones can achieve with a script language like javascript. I am using SVG graphics as sprites. They are realy easy but still it will be a lot of lines, rectangles, circles etc. to paint for 60 frames per second. Especially if a smartphone has to emulate a GPU it might get slow.
  5. Some more changes: Added locomotive and carriage graphics and some graphic effects (explosions + steam) Also added some sound effects.
  6. I expect it is not possible to have click events on each circle, since the circles are no HTML elements but rather something painted on a canvas. I would use a single click event listener and check the x/y coordinates of the click. For simplicity you could rather check if the click was in the surrounding square of the circle. Then you just need to divide the x position by the spacing of the squares (probably removing an offset of the area left of the circles) and you get the column of the circle. Do the same with the y coordinate to calculate the row of the circle. If you need to check for a click in the circle rather than the square, still calculate the column and row like above. Then calculate the middle point of the circle that is within the detected square and check the distance of the click from the middle point. If it is lower or equal the radius the click was in the circle. The distance would be calculated as square root of the square of the horizontal + the square of the vertical distance (i.e. sqrt(dx*dx + dy*dy)).
  7. Hello, Here is another puzzle game I made before. Crate Pusher is a 3D clone of Sokoban and includes the original 90 levels. A head up display styled map helps keeping overview in the labyrinth. If you don't know the concept: A number of crates are located in a labyrinth. A level must be solved by pushing the boxes to target positions. It is only possible to push but not pull the crates so boxes in a corner cannot be moved anymore. You need to plan the sequence and path of moving to solve the level. The 3D view creates an additional challenge to the original game as the player must memorize the structure of the labyrinth too. It works on desktop as well as mobile devices. It can be played on my website I have created this game before as downloadable java game and in this project I turned it into a HTML5 / javascript version to learn about WebGL. No external libraries have been used. I appreciate any comments.
  8. I made some changes. Probably I do not remember everything: - some simple graphic instead of the conceptual skeleton before - more levels - reloading instead of cached version is enforced - improved touch sensitivity - added version number to title image so people can refer to it You can still play it on my website. Feedback is still appreciated.
  9. Hi everyone, I have just created a new free puzzle game I had on my idea list. The setting is a freight train station with several tracks and switches. The player must prepare trains with ordered goods by routing the carriages to the correct track. Several carriages must be controlled in parallel. It works on PC as well as mobile devices. For mobile I recommend the full screen mode (from the hamburger menu). I intend to continue development but it is already playable. The game concept is fully working but I might work on graphics, more levels and additional game elements. I appreciate any feedback on improvements, bug reports etc. Especially I am always worried about different browser/device behavior. The game can be played at The game is in Javascript without the use of any libraries. I like to learn about the nuts and bolts myself. The website contains other games I developed so far. I try to create some games now and then next to my regular job as software developer (not web or game related). I want to learn some new technology I have not yet worked with and want to see if game development might be a secondary income in the future. Right now everything is free and without ads. Obviously I am no great graphics or music artist so my games are limited to small games with easy graphics but hopefully fresh ideas. Hope you enjoy it! Sandcastle Games