os-ucsd / ideas

Have an idea for something Open Source @ UCSD can do? Send it here!
MIT License
0 stars 0 forks source link

A cute little open source @ ucsd world game #3

Open blau0123 opened 4 years ago

blau0123 commented 4 years ago

We start with an empty 2D pixel world and then each member can create their own little plot of land and style it any way they want and you can travel around as a character you can also design yourself to any of the plots of land to visit other peoples' work.

asg017 commented 4 years ago

I like it! Reminds me of r/place from reddit a few years back (but instead of happening live, it changes over time from OS contributions

also similar to http://www.milliondollarhomepage.com/ but no cost

asg017 commented 4 years ago

Thinking about this more:

This can be done in Javascript, with the canvas element. We can create a large canvas, say 1000x1000, and divide it into 100x100 squares. Anyone can "claim" a square, and write some javascript to fill that canvas with whatever they want.

There's a builtin javscript API for drawing on a canvas - rectangles, circles, text, any crazy defined paths, etc. You can even fetch an image and display that to a canvas as well.

This could look something like:

<body>
    <canvas id="canvas" width="1000" height="1000"></canvas>
</body>
<script type="module">
import alex from './plots/alex.js';
import brendan from './plots/brendan.js';

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

alex(ctx, 0, 0);
brendan(ctx, 0, 100);

</script>

Everyone would create a name.js file inside /plots and add an import name from './plots/name.js' to the top file. name.js would look like:

export default function alex(ctx, offsetX, offsetY){ 
    ctx.fillStyle = 'green';
    ctx.fillRect(10 + offsetX, 10 + offsetY, 30, 30);
}

(offsetX and offsetY would be so we can place each one on a grid in a different fashion. Maybe there is a better way to do this, though...)