Search the Community

Showing results for tags 'javascript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 676 results

  1. I'm looking to start making 2D games with Javascript, but after researching and looking at other games source codes, I can't decide whether to use the HTML canvas to render my games or a framework. First of all, this forum may be a little biased since it hosts many forums of rendering frameworks, so I'm looking for a clear, unbiased answer on which one would be easier and more flexible, as well as some good ones to choose from. When I first started, the obvious choice would be to use a framework, as many articles state, "There's no point in reinventing the wheel". However, after looking at some popular web-based 2D games, it seems like most like to use canvas to render. I've looked myself into Pixi.js, but even though it has some amazing features (WebGL with canvas fallback, built in loop), I feel like it still lacks the flexibility of the HTML canvas. For example, if I wanted to make a circle that can be morphed or manipulated, I could do it using canvas with curves, however, with Pixi.js, it doesn't seem to have that kind of flexibility. I'd like to know what others on this forum think, and possibly why or why not they choose to use a framework. (Keep in mind I'm looking for a rendering framework, not a full-featured game framework) Thanks!
  2. I am making a top down RPG styled game using Tiled and Phaser 3. I have already made a map in Tiled for the city and store. Also, I have already set the objects for the location of the store where the player is suppose to go in order to enter the store and the location where the player is supposed to appear. The thing I am having trouble figuring out the code I am suppose to use in order to facilitate this action, as well as going back to city map. One more thing, If there are any other ideas on how to go about this I am all ears.
  3. What I want to do is make it so if the player touches the enemy from the side then the player either loses a life and or it causes the game to be over. But if the player jumps on top of the enemy then it causes that enemy to disappear. If a the player touches an enemy then the player loses a life which is done by running this code... this.status = "lost"; this.finishDelay = 1; How ever if the player jumps on the enemy then the enemy dies which is done by running this code... this.actors = this.actors.filter(function(other) { return other != actor; }); Here is my code so far... Level.prototype.playerTouched = function(type, actor) { } else if (type == "lava" && this.status == null && player.y == enemy.y) { this.status = "lost"; this.finishDelay = 1; } else if (type == "coin" && player.y > enemy.y) { this.actors = this.actors.filter(function(other) { return other != actor; }); } }; The part that I am having trouble with is... when the player touches the enemy while the player is on the ground (the players y axis is equal to the enemys y axis)... player.y == enemy.y and when the player jumps on top of the enemy. (the players y axis is greater then the enemys y axis)... player.y > enemy.y My total code is posted as an attachment platformgame2.html
  4. 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
  5. I want to present you an online coding platform that helps beginners learn JavaScript, and in the same time offers creative individuals an easy environment to build mini JavaScript games with multi-scenes, sprites and nice backgrounds: www.codeguppy.com Kids in the 80's used their home computers (Commodore 64, ZX Spectrum, etc.) as ideal platforms for learning computing concepts and coding. CodeGuppy.com tries to recreate the same experience by offering multiple coding tutorials on top of an online coding platform ideal for developing mini games. Please take a look and share you feedback! 😉
  6. Hi everyone. For the last few months I’ve been working on a simple HTML5 2D side scrolling action game called Theraxius. It's nothing new and revolutionary, it's more like an evolution of different technology. The game also includes a level editor so you can create your own levels. Engine (all game logic and level editor) is written completely in JavaScript, no download is required. Just load and play. Level data (stored in JSON format in the database) is exchanged thru Ajax calls. Server side is written in PHP. All images and sounds are preloaded from the server before play. The game uses HTML5 features like canvas, Fullscreen API, Pointer Lock API, Audio,… At this moment only Chrome and Firefox are supported. The game is meant to be played on PC, phones and tablets are not supported. In the next weeks I’ll try to post some videos, try to add registration (for newsletter and later for public test). Release date: when it's done Official page: theraxius.com Screenshots (for bigger images, please visit official page):
  7. I have completed writing my free JavaScript course (begun in 2011). It is in two main parts. The first is aimed at complete beginners to introduce the whole idea of programming. It shows how to get some simple examples working and introduces some HTML5 as needed to make a platform for running the examples. It covers some general programming concepts such as writing requirements and testing against them. Part 2 is a more systematic exposition of the language, up to some of the more recent capabilities such as local storage and image processing. It is available at https://www.grelf.net/jscourse/index.html That link is to a contents page so that those who already know some of it can jump in to any particular topic of interest.
  8. Techona's Games Developer is responsible for the development and improvement of online as well as implementing new features on existing games with a high degree of quality. He will be also responsible for the development of new features in the product architecture related to games, including all phases of the projects from analysis, design, implementation and deployment, to all layers from database to front end. The essentials of this opening are: Computer science degree (BSC) or equivalent Strong JavaScript and HTML5 knowledge Object oriented programming and design patterns Strong troubleshooting/solving skills Experience with GIT and/or other source control systems Proficient English skills Will be also nice: C/C++/C# VisualStudio 2010/2013/2015 NodeJS, JQuery, CSS, CSS3 JSON and XML Pixi JS / Spine JS Google Closure MS SQL Server WebGL MS Powershell MS Internet Information Services (IIS) A strong background in mathematics Experience with Cross-browser compatibility development Experience with mobile web development Ability to quickly adapt to existing code bases. Ability to work under pressure and tight schedules We offer: Full-time employment in Prague with flexible working hours Visa process sponsorship and relocation support Nice working environment - new offices at the office park BB Centrum – Prague 4, with table football, PlayStation and fully-stocked kitchen – snacks, fruits, vegetables, coffee, juices, etc. Bunch of benefits: meal vouchers, 12 sick days a year, Multisport Card, UNLIMITED additional days off, private pension savings contributions Professional development and trainings You can follow us on FB, LI or Instagram: https://www.facebook.com/techonasoft/ https://www.linkedin.com/company/techona/
  9. How to call a function correctly checkDown ? Now it shows an error that this function was not found. main.js function checkDown() { if (CAN_CLICK) { CAN_CLICK = false; last_pointer_position.x = game.input.activePointer.worldX; last_pointer_position.y = game.input.activePointer.worldY; setTimeout(function () { CAN_CLICK = true; }, 200) } }; game = new Phaser.Game(_GLOBAL.Width, _GLOBAL.Height, Phaser.CANVAS, 'game'); game.state.add('menu', gameCreate); game.state.start('menu'); gameCreate.js var gameCreate = { preload: function () { } create: function() { var self = this; this.game.input.onDown.add(self.checkDown, this); }
  10. ChetD90

    I can't get my scenes to load

    My scenes with the maps I created are not loading in the browser. To get an overview of what is going on, I am creating a game RPG like game that that has a top down view of the character. The game I am making requires the character go into a store and buy some items. I think I may have found a solution for the problem of switching between maps using multiple scenes. However, the problem now is that the map isn't loading and when inspect the game in chrome an error message that reads "Uncaught Reference Error: SceneA not define at index.js: 19". I thought that I set up the code correctly. But see what I did wrong, so I will include the js file since it is over 360+ lines of code. index.js
  11. Hey guys, Don't know if anyone's interested, but I've been working on a pixel art editing webapp that might be useful for game devs looking to create some pixel art or tiles or bitmaps. It's called Pixel Editor Pro and it's at: http://www.amelyn.com/pixel_editor_pro/index.htm It's free to use at the moment. Right now, I'm just looking for feedback from users about: 1. what features they would like to see in an online pixel editor 2. how the app might be improved. 3. what improvements/additions would make this a tool you would pay real cold hard cash for every month. I'm working on new features for it at the moment. I'll probably implement the following features next: - User Guide in PDF format explaining what all the different sections of the app are and what all the different buttons do :) - settings section where the user can set different preferences such as (1) size of pixel squares in the Edit Single Tile section, (2) background colour etc. - display the current row and column over which the user is hovering when editing a single tile - tile merge feature; build a new tile by merging a bunch of different tiles in sequence - multiple tile merge feature; merge a single background tile with multiple other tiles to build a bunch of new tiles Please feel free to post any and all feedback in this thread or email it to me directly at bigbadmick2000@hotmail.com. I'm going to read all feedback I receive and use it to improve the app. All feedback will be gratefully received. Cheers, Miktor
  12. B3L7

    Eternity Pilot

    Eternity Pilot is a mobile game made using Phaser 3 and Cordova. It is my first published game and it would have been totally impossible without Phaser and this amazing community! For now it is only available on Android but I am hoping to have an iOS version in the near future. I have a sign up on the site linked below to receive a notification when the iOS version comes out. Play Store https://eternitypilot.com Gameplay Video
  13. Awesome HTML5Dev community..: BABYLONJS on STEAM!!! Appreciation for BABYLONJS and HTML5GAMEDEVS ... special thanks: The game is called BOXiGON: https://store.steampowered.com/app/842490/BOXiGON/ GOAL: the entire purpose is to TEST THE HTML5 MARKETPLACE. Including: - attempt at FaceBook "Instant" - "MS App Store". - and braving the "HTML5~Portal~Jungle"!!! PURPOSE: figure out the "3DWebPipeline" then BabylonJS (Cinematics) "Episodic Visual Novels" - ready to roll. Post here if you have questions or comments. BABYLONJS TEAM Thank you,
  14. 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">&nbsp;</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="Mail@example.com" 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>
  15. Im receiving websocket messages on my webpage, and i'm trying to calculate the frequency at which they are received. I do this like so: let startTime = new Date(); ws.onmessage = function (evt) { prevData = recivedData; var receivedMsg = evt.data; recivedData = JSON.parse(receivedMsg); const endTime = new Date(); const timeDif = endTime - startTime; startTime = endTime; console.log(timeDif) } But it seems timeDif sometimes is 0, and I find this unlikely. People in other questions of mine have sad that its due to the websocket buffering incoming messages. How do I prevent this?
  16. As some have already pointed out in this forum there is a problem with scenes stretching ahead with a sudden cut-off at a horizon. Objects just beyond the horizon suddenly pop completely into view on the slightest forward movement. I have addressed this in my program The Forest ( https://www.myforest.uk ) by making the scene hazy (or foggy) towards the horizon, if the user switches this effect on via a check box on the page. A couple of example scenes are attached here. I have written a detailed description of how I programmed it ( https://www.grelf.net/forestdesign.html#fog ). My code is plain HTML5/JavaScript using no framework and only the standard 2D graphics context because I want my program to run on as many platforms as possible. So my documentation explains how to process images in that environment and indeed how to copy an object of type Image complete with its pixel data, which is not entirely obvious or straightforward. I hope this may be useful to others.
  17. I have made a map in Tiled and I have a already generated a JSON. Whenever I try to load the map in Chrome and it load only a black screen. When I went to inspect the website there are warning like: No data found in the Json tilemap from Tiled matching the tileset name "RunItUpCity" Cannot create tilemap layer, invalid layer ID given: Bottom Layer TilemapParser.ParseTiledJSON - Layer compression is unsupported, skipping layer 'Bottom Layer' Also, I got an Error that read: Uncaught Type Error: cannot read property 'setCollisionProperty' of null Does anyone think that there is a problem with the map or the code? Here is the JavaScript code if anyone needs it. const config = { type: Phaser.AUTO, width: 800, height: 600, parent: "game-container", pixelArt: true, physics: { default: "arcade", arcade: { gravity: { y: 0 } } }, scene: { preload: preload, create: create, update: update } }; const game = new Phaser.Game(config); let cursors; let player; let showDebug = false; function preload() { this.load.image("tiles", "../assets/tilesets/RunItUpCity.png"); this.load.tilemapTiledJSON("map", "../assets/tilemaps/GetawayCity.json"); // An atlas is a way to pack multiple images together into one texture. I'm using it to load all // the player animations (walking left, walking right, etc.) in one image. For more info see: // https://labs.phaser.io/view.html?src=src/animation/texture%20atlas%20animation.js // If you don't use an atlas, you can do the same thing with a spritesheet, see: // https://labs.phaser.io/view.html?src=src/animation/single%20sprite%20sheet.js this.load.atlas("atlas", "../assets/atlas/atlas.png", "../assets/atlas/atlas.json"); } function create() { const map = this.make.tilemap({ key: "map" }); // Parameters are the name you gave the tileset in Tiled and then the key of the tileset image in // Phaser's cache (i.e. the name you used in preload) const tileset = map.addTilesetImage("RunitUpCity", "tiles"); // Parameters: layer name (or index) from Tiled, tileset, x, y const belowLayer = map.createStaticLayer("Bottom Layer", tileset, 0, 0); const worldLayer = map.createStaticLayer("Top Layer", tileset, 0, 0); const aboveLayer = map.createStaticLayer("Collision Layer", tileset, 0, 0); aboveLayer.setCollisionByProperty({ collides: true }); // By default, everything gets depth sorted on the screen in the order we created things. Here, we // want the "Above Player" layer to sit on top of the player, so we explicitly give it a depth. // Higher depths will sit on top of lower depth objects. worldLayer.setDepth(10); // Object layers in Tiled let you embed extra info into a map - like a spawn point or custom // collision shapes. In the tmx file, there's an object layer with a point named "Spawn Point" const spawnPoint = map.findObject("Objects", obj => obj.name === "Spawn Point"); Also, I will attach the JSON code to the post because it is 17000+ of code. GetawayCity.json
  18. I want to do the same animation for bending card but unable to do so using css and border-radius property. Is there any property or method by which we can make it happen.. Plz help me regarding it.. card folding (1).mp4
  19. Hi, I have a multiplayer game that works, except when two players click at the exact same time. For example 6 players are in a game. The game consists of balls being sent from one player to another. The ball is animated from sender player to receiving player. Which means when the sender sends the ball, it is no longer in his/her hands. The ball is now is the hands of the receiving player. This works perfectly except if a move is made by another sending player at the exact same time. For example, 6 players are in a game. Player1 passes Player2 the ball at the same time, Player3 passes Player4 the ball. Player1 and Player2 will work correctly, however in the case of the other two players, what happens is Player3 sends the ball to Player4 who receives it but Player3 is still holding the ball even after he/she passed the ball over to Player4. Does this issue mean I should be using a Callback? Thanks, MLA
  20. My aim is to render a 3D model on a web page and change its textures. I am using Babylon.js for the same. So far I am able to render the 3D model and change its texture but I am stuck in end beautification of the final view also known as post processing. I want to improve the quality of my rendered 3D model. I am enclosing the screenshot of what I have done(Figure 1) and what I want to achieve(Figure 2) so that you can get a clear picture of the issue.
  21. Hello there, I'm working on 2d collision and stumbled across the overlap function. I'm having trouble with something simple. I have an player entity and an npc entity with a physicsGroup set as a collision circle. As the player touches the circle, I want the npc entity to interact in some way. (say, shoots bullets at the player) I can easily listen to any collisions and trigger a boolean to true.. .. but am struggling to find a way to trigger to turn on or off depending on whether the player entity touches the collision circle. For example: Sends a log to console "collided" if player collides. If player doesnt collide, send a log to console "not colliding". Heres my entity code: export const createEntity = (scene) => { entitySprite = scene.add.sprite(487, 249, '') entityPhysicsGroup = scene.physics.add.group({}) entityPhysicsGroup.add(entitySprite) circleShape = scene.add.circle(0, 0, 0, "0xfb00", 0.3) circlePhysicsGroup = scene.physics.add.group({}) circlePhysicsGroup.add(circleShape) circleShape.body.setCircle(128, -128, -128) isTouching = false scene.physics.add.overlap(circleShape, playerSprite, (e) => { isTouching = true }) } I've tried declaring the boolean as false both globally and in the createEntity function. I've also tried this in the updateEntity function that I have. I personally would have thought that a second callback could be used to trigger a function if the player entity stops overlapping with the circle, or just something in general that listens when things are not touching. The boolean method may work but my logic used to implement it might be a little fuzzy. Any thoughts and help would be much appreciated. From a phaser 3 newbie.
  22. Hey All, I'm using WebPack to build my game and I've run into a scoping issue. I'll try and explain. Below is my TestScene scene/class. import 'phaser'; import Npcs from 'modules/Npcs.js'; const npcs = new Npcs() export class TestScene extends Phaser.Scene { constructor () { super('TestScene') } preload(){...} create(){ this.physics.add.collider( this.player, this.bombs, npcs.hitBomb, null, this ) } } Below is my npcs class import 'phaser'; const gameplayStates = new GameplayStates() export default class Npcs { hitBomb (player, bomb) { this.physics.pause(); player.setTint(0xff0000); this.entityDestroy() } entityDestroy () { console.log('destroyed') } } `this.player` and `this.bombs` are in place and work as expected in every way I intended. The callback in the collider method has `this`(testScene) as the context so, `this.entityDestroy()` no longer seems to work and fires app.bundle.js:116068 Uncaught TypeError: this.entityDestroy is not a function I suspect this is because the `npcs` class is not in the npcs class' scope when the method is called from the collider function. How can I get around this with the collider method? Your help would be much appreciated. Thanks all, Your help is much appreciatd.
  23. sammae

    Create a moving platform

    Hi, I've been stumped by this for quite awhile and I feel as if it's so simple. I'm simply trying to create a platform that moves back and forth that a player can jump on. I got a platform to move by doing something like this: platform = this.physics.add.sprite(300, 100, 'form'); platform.body.allowGravity = false; platform.body.immovable = true; platform.body.velocity.x = 100; But it just keeps moving in one direction and I can't figure out how to make it collide with the player. I tried the: this.physics.add.collider(this.player, platform); But that did not work. I just want a simple platform that moves back and forth that the player can jump on. Please any help is greatly appreciated, I'm ready to pull my hair out over this. 😞
  24. Hi, I'm wondering how to avoid simultaneous mousedown events. I have a canvas drawn on screen. When a player clicks events take place based on where the player clicked on the screen. If two players click the canvas at the exact same time, they should both be alerted with a message that no simultaneous moves are allowed. I used an array to capture the move, however it seems to only register the move after the check and not before. Is there a simple way to capture which clients clicked at the same time? //Listen for player click event chainlinks.onmousedown = function(event) { var totCT; //update current player turn on client for (var i = 0; i < remotePlayers.length; i++) { if (remotePlayers[i].id == socket.id) { remotePlayers[i].currentTurn = true; } } //update current player turn on server for (var i in cPlayers) { if (cPlayers[i].id == socket.id){ cPlayers[i].currentTurn = true; } } socket.emit('update-currentTurn', {remotePlayers: remotePlayers, cPlayers:cPlayers}); if (totCT > 1) { //Simultaneous move happened - show invalid message } else { //All good to go ahead with the click event } } Thanks!
  25. grelf

    New free game: The Forest

    New free game: The Forest See https://www.myforest.uk and documentation at https://www.grelf.net/ojsvg.html This is a redevelopment in HTML5/JavaScript combining two much earlier programs, "The Forest" and "Explorer", which I wrote and had published in the 1980s for the TRS-80, Sinclair Spectrum and BBC Micro. It is partly a simulation of the sport of orienteering and an aid to interpreting contour maps but there are several diversions for non-orienteers, including a challenging treasure hunt. It is set in a vast forest, effectively infinite. This rewrite demonstrates how powerful the HTML5/JavaScript platform can be. Detailed maps and complicated scenes are displayed in fractions of a second. The program should run on any device that has a browser, from desktop PC to smartphone; it works on my cheap Android phone even in battery-saver mode. A friend tells me it works on her Kindle tablet. Older devices may not be fast enough though. Despite the huge extent of the terrain, the game downloads and runs in seconds because the program is only about 120 kilobytes (yes, kilo!). And there is nothing to install. I do not use any third party libraries. I deliberately use only the basic 2D graphics context because others, such as WebGL, are not available on all devices. Please feed back to me (gr at grelf dot net) details of any device that you find it doesn't work on. Tell me make and model, and particularly the operating system and browser (with version), and what doesn't work. The program and its source are freely available, uncompressed, because I want to encourage others to program creatively on the HTML5/JavaScript platform. I am writing on my personal web site about how it works. Lots of background information can be found at https://www.grelf.net/ojsvg.html and other pages linked from there, including my free JavaScript course. I think HTML5/JavaScript is a good combination for rewriting retro games and making them available to all, rather than emulating the cumbersome old machines in software or physically reproducing them, as some are doing. Reprogramming is more work of course but it can be very satisfying (and JavaScript is much easier to write than assembler). The technology now makes it possible to write what I really had in mind back in the 80s.