hi :)
which langages do you suggest to make a simple 2D web game (to play in the browser) ?
something like a card game or a dice game or a breakout game.
thanks,
JavaScript
Other languages, when you use them to compile to the browser, are translated to JavaScript (or to WASM, that in original was a subset of JavaScript made to be faster), so you could as well write your program directly in JavaScript
AGK will generate javascript
Maybe jse (https://gotojse.com/) ?
i am going to experiment with javascript, to begin...
thanks :)
Quote from: RemiD on February 14, 2024, 10:27:31i am going to experiment with javascript, to begin...
I would suggest that you use a dedicated IDE such as the Netbeans (https://netbeans.apache.org/front/main/) IDE, but be careful with any plugins you install. I've come across one that does formatting that breaks creation of HTLM5 projects.
Here's a link to a review for some of the best IDE's for 2023.
https://blog.hubspot.com/website/javascript-ide
But if you are very familiar with VSCode and don't mind farting around setting things up and stupid work flows, then use that.
i have seen that there are also some 'game engines' for the web, and some seem free / open source and simple to use.
i am experimenting with this one at the moment : https://phaser.io/
the examples seem to work well and the code is easy to understand / write :
https://labs.phaser.io/
let's see what i can do with this...
@RemiD Unless you already know how to write code in javascript and understand the whole HTML5 and javascript ecosystem, then you should refrain from jumping straight into any game engine etc.
My 2 pennies.
Javascript is a constantly changing environment that you need to keep on top of.
I've tended to stick with pure Javascript, and not rely on layer upon layer of other people's work to keep my games from collapsing.
And they will.
All the time.
One little Google Rule, or an Apple Block, and all manner of things break. Just this past week, in fact, ALL my games went completely silent on iOS devices because of that whole EU spat that was going on. Thankfully an update to iOS brought the sound back, but for a short while there, I was panicking like a crazed munky.
It's ok for me, since I'm on top of everything, and when things like that happen, I can work on fixing them, but if I were relying on someone else's framework, I'd be stuck waiting for them to fix it before having to put the fixes into all my games.
It's a bit of a nightmare, if I'm honest, but practically every week, I'm thankful that I took the time to learn this stuff properly so that I can make those fixes myself, quickly.
It's not ideal, though.
It's FAR from ideal.
But if I can make a game, stick it online, and people can play without having installers, or having their Operating System complain that I'm not a licensed developer, and all off that guff, then I think it works.
.. "For me"
My advice : Start simple. A few coding homework examples should help.
Do that "drawing a scribble onto a blank canvas" thing. A simple "game" loop, draw a line from last mouse point to current mouse point each frame.
Learn how to "lock" the canvas so that if you play it on a mobile device, you aren't scrolling/zooming the game when trying to interact with it with your finger.
Then make a testcard. I often suggest people code testcards, they're GREAT ways to learn screen-resolution maths. Learning to fit things into different resolutions and screen ratios is going to be really important if you want to do "proper" browser games.
If you can manage both of those things inside a plain bit of html/javascript/canvas, then you should be able to find your way around the language, and get to grips with things from there.
I'd also probably recommend using WebGL from the get-go. It's a little harder than Canvas, but I've found it's alarmingly difficult to switch from 3 year old Canvas code, to newer WebGL code, now that I'm knee deep in the other!! WebGL gives you a bunch more power in your engine that Raw Canvas just can't do.
And like Dawlane says, all you really need is a good IDE. I myself just use a plain text editor (Programmers Notepad 2 on Windows, TextMate on MacOS).
That and some GoogleFU, and you'll be good to go.
Good luck, whichever option you go for. Be it learning your own way, or grabbing something like Phaser.
I hope to see some awesome projects from you soon enough!
Disclaimer and obligatory linkage : I coded the JSE thing that Dan mentioned earlier in the thread, and though it "can" be used to make games, it's also prone to being rather sluggish at times, especially doing nested loops and such. And there's next to no error messages in the thing, anywhere, because I spaghetti-coded myself into a brick wall and couldn't figure out how to add any!!!
I've made plenty of games with it, but again, I know the language in and out, so I know what can and can't be done with it. A selection of games coded in JSE can be seen here (https://agameaweek.com/?Type=Game&System=V), and may or may not run well, depending on the player's setup.
If these were coded directly in Javascript, rather than being interpreted BASIC running badly inside Javascript, then they'd run much better!
I tried your JSE, and I found out a weird thing: on Firefox, it doesn't work from private browsing, although it works in regular mode. On Chrome (at least on my phone) it seems to work in both modes
I switched to Javascript some years ago. Now with things like Gemini, making anything quickly is getting easy.
I have a repo on github with a large collection of javascript examples and projects : https://github.com/Pakz001/html5examples
Vanilla javascript might be a better choice. As libraries tend to get updated and break anything made before. Having to modify things to work on the newer versions. I do use three.js, which is a nice 3d library. But it gets updated a lot. Documentation changes over the years so you end up with examples for every version ever made.
Vote +1 for AGK for creating for Android - believe it does apple as well.
Having some fun making a gravity style game I dreamt up 40 odd years ago - maybe slightly more!
The absolute hardest part in learning "Raw" Javascript, in my honest opinion, is the lack of error messages. (which ironically is the same in JSE)
Javascript tends to fail silently and carry on regardless, meaning that you'll VERY often trip yourself up, thinking your code is 100% fine, when in fact it's 99% broken.
You'll have to learn to second guess everything you do, and double check everything.
It's quite a handy skill once you've got the hang of it, but if you're used to the safety net of .. .. every other language ever.. then it's a learning curve.
But if you've managed with Mark's languages over the past 20+ years, I think you should be able to do it.
Pakz mentioned three.js, that's quite nice.
Recently I've been looking into using A-Frame which can do AR/VR stuff, but that's a layer on top of three.js, so it's probably going to end up with me getting all in a fluster at some point because "something" isn't working, and I can't figure out what.
.. Waffling again aren't I?
Um, yeah, go for it. Or at least, start something. Starting is always the hardest part in switching languages.
Good luck!!
I've posted JSE related thoughts over here (https://www.syntaxbomb.com/index.php?msg=347060520) to keep it from taking over this thread.
I am not sure how good those new bots are with generating code for other languages? But GPT4 does do javascript and html really good. Gemini 1.5 can now generate code thousands of lines long I think they mentioned. You would just have to describe a game and let the bot coder make it and adjust it. Suply your own assets.
I made this yesterday evening. GPT4 supplies complete working code inside a html file.
(save as Web page file .html - A black and white top down, pond of swimming fishes generated by gpt4 - minor tweaking done...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Worms with Random Walk Movement</title>
<style>
body, html {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="wormCanvas"></canvas>
<script>
const canvas = document.getElementById('wormCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const numWorms = 100;
const maxTailSize = 50;
const minTailSize = 20;
const maxTailWidth = 8; // Max tail circle radius
const minTailWidth = 1; // Min tail circle radius
const maxSpeed = 4; // Max speed for random walk
const minSpeed = 1; // Min speed for random walk
class Worm {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.tail = [];
this.tailSize = minTailSize + Math.random() * (maxTailSize - minTailSize);
this.angle = Math.random() * Math.PI * 2;
this.speed = minSpeed + Math.random() * (maxSpeed - minSpeed);
this.turnSpeed = Math.random() * 0.1 - 0.05;
this.maxTail = Math.floor(Math.random()*10)+8
//if(Math.random()<.5)this.tailSize*=1.2
}
move() {
// Randomly change turn speed
this.turnSpeed += (Math.random() * 0.2 - 0.1);
this.turnSpeed += (Math.random() * 0.1 - 0.05);
this.turnSpeed += (Math.random() * 0.1 - 0.05);
this.turnSpeed += (Math.random() * 0.1 - 0.05);
if(Math.abs(this.turnSpeed)>.2 ){
this.turnSpeed/=2
}
// Randomly change speed within the min and max range
this.speed = minSpeed + Math.random() * (maxSpeed - minSpeed);
this.angle += this.turnSpeed;
// Keep worms within canvas bounds
const nextX = this.x + Math.cos(this.angle) * this.speed;
const nextY = this.y + Math.sin(this.angle) * this.speed;
if (nextX < 0 || nextX > canvas.width || nextY < 0 || nextY > canvas.height) {
this.angle += Math.PI;
} else {
this.x = nextX;
this.y = nextY;
}
this.tail.unshift({x: this.x, y: this.y});
if (this.tail.length > this.tailSize) {
this.tail.pop();
}
}
draw() {
for (let i = 0; i < this.tail.length-16; i++) {
const opacity = 1 - i / this.tail.length;
//var tailWidth = maxTailWidth - (maxTailWidth - minTailWidth) * (i / this.tail.length);
var tailWidth = this.maxTail - (this.maxTail - minTailWidth) * (i / this.tail.length);
tailWidth-=i/3;
if(tailWidth<1)tailWidth=1
ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
ctx.beginPath();
ctx.arc(this.tail[i].x, this.tail[i].y, tailWidth, 0, Math.PI * 2);
ctx.fill();
}
}
}
const worms = [];
for (let i = 0; i < numWorms; i++) {
worms.push(new Worm());
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
worms.forEach(worm => {
worm.move();
worm.draw();
});
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>
If you want to stay in BASIC have a look on B4X from Anywhere-Software:
https://www.b4x.com/
..i cant say for sure, but i think, you are looking for this..
https://www.spiderbasic.com/