234 lines
7.9 KiB
HTML
234 lines
7.9 KiB
HTML
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Sandbox Game</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html, body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: 'Press Start 2P';
|
||
|
|
background-color: #000000;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
canvas {
|
||
|
|
border: 1px solid #ffffff;
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -0%);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Object storing the various movement behaviors, represented by a number
|
||
|
|
var behaviors = {
|
||
|
|
"DL_DR": 0,
|
||
|
|
"L_R": 1,
|
||
|
|
"WALL": 2,
|
||
|
|
}
|
||
|
|
|
||
|
|
// Object storing various powders, called elements
|
||
|
|
var elements = {
|
||
|
|
"sand": {
|
||
|
|
"name": "sand",
|
||
|
|
"color": "#ffffff",
|
||
|
|
"description": "A pile of sand. It's not very dense, but it's still pretty heavy.",
|
||
|
|
"behavior": behaviors.DL_DR,
|
||
|
|
},
|
||
|
|
"water": {
|
||
|
|
"name": "water",
|
||
|
|
"color": "#0000ff",
|
||
|
|
"description": "A pool of water. Is it wet? Is it dry? Who knows.",
|
||
|
|
"behavior": behaviors.L_R,
|
||
|
|
},
|
||
|
|
"wall": {
|
||
|
|
"name": "wall",
|
||
|
|
"color": "#808080",
|
||
|
|
"description": "A wall. It's pretty solid.",
|
||
|
|
"behavior": behaviors.WALL,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
currentPixels = [];
|
||
|
|
// Pixel class, with attributes such as x, y, and element
|
||
|
|
class Pixel {
|
||
|
|
constructor(x, y, element) {
|
||
|
|
this.x = x;
|
||
|
|
this.y = y;
|
||
|
|
this.element = element;
|
||
|
|
this.color = elements[element].color;
|
||
|
|
pixelMap[x][y] = this;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
pixelSize = 10;
|
||
|
|
|
||
|
|
function isEmpty(x, y) {
|
||
|
|
// If y > height or y < 0 or x > width or x < 0, return false
|
||
|
|
if (y > height-1 || y < 1 || x > width-1 || x < 1) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return pixelMap[x][y] == undefined;
|
||
|
|
}
|
||
|
|
function movePixel(pixel,x,y) {
|
||
|
|
// Delete the pixel from the old position
|
||
|
|
delete pixelMap[pixel.x][pixel.y];
|
||
|
|
pixel.x = x;
|
||
|
|
pixel.y = y;
|
||
|
|
pixelMap[x][y] = pixel;
|
||
|
|
}
|
||
|
|
|
||
|
|
function pixelTick(pixel) {
|
||
|
|
var info = elements[pixel.element];
|
||
|
|
var x = pixel.x;
|
||
|
|
var y = pixel.y;
|
||
|
|
if (info.behavior == behaviors.DL_DR) {
|
||
|
|
if (isEmpty(x,y+1)) { movePixel(pixel,x,y+1); }
|
||
|
|
else {
|
||
|
|
if (Math.floor(Math.random() * 2) == 1) {
|
||
|
|
if (isEmpty(x-1,y+1)) { movePixel(pixel,x-1,y+1); }
|
||
|
|
else if (isEmpty(x+1,y+1)) { movePixel(pixel,x+1,y+1); }
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (isEmpty(x+1,y+1)) { movePixel(pixel,x+1,y+1); }
|
||
|
|
else if (isEmpty(x-1,y+1)) { movePixel(pixel,x-1,y+1); }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (info.behavior == behaviors.L_R) {
|
||
|
|
if (isEmpty(x,y+1)) { movePixel(pixel,x,y+1); }
|
||
|
|
else {
|
||
|
|
if (Math.floor(Math.random() * 2) == 1) {
|
||
|
|
if (isEmpty(x-1,y)) { movePixel(pixel,x-1,y); }
|
||
|
|
else if (isEmpty(x+1,y)) { movePixel(pixel,x+1,y); }
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (isEmpty(x+1,y)) { movePixel(pixel,x+1,y); }
|
||
|
|
else if (isEmpty(x-1,y)) { movePixel(pixel,x-1,y); }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function tick() {
|
||
|
|
// Get the canvas
|
||
|
|
var canvas = document.getElementById("game");
|
||
|
|
var ctx = canvas.getContext("2d");
|
||
|
|
// Clear the canvas
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
// Draw the current pixels
|
||
|
|
for (var i = 0; i < currentPixels.length; i++) {
|
||
|
|
pixel = currentPixels[i];
|
||
|
|
pixelTick(pixel);
|
||
|
|
ctx.fillStyle = pixel.color;
|
||
|
|
ctx.fillRect(pixel.x*10, pixel.y*10, 10, 10);
|
||
|
|
}
|
||
|
|
// If mouseIsDown, do mouse1Action
|
||
|
|
if (mouseIsDown) {
|
||
|
|
mouse1Action(null,mousePos.x,mousePos.y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
currentElement = "sand";
|
||
|
|
mouseIsDown = false;
|
||
|
|
function mouseClick(e) {
|
||
|
|
mouseIsDown = true;
|
||
|
|
mouseMove(e);
|
||
|
|
}
|
||
|
|
function mouseUp(e) {
|
||
|
|
mouseIsDown = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getMousePos(canvas, evt) {
|
||
|
|
var rect = canvas.getBoundingClientRect();
|
||
|
|
return {
|
||
|
|
// Round to nearest pixel
|
||
|
|
x: Math.round((evt.clientX - rect.left)/pixelSize),
|
||
|
|
y: Math.round((evt.clientY - rect.top)/pixelSize)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function mouseMove(e) {
|
||
|
|
if (mouseIsDown) {
|
||
|
|
mouse1Action(e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function mouse1Action(e,mouseX=undefined,mouseY=undefined) {
|
||
|
|
// If x and y are undefined, get the mouse position
|
||
|
|
if (mouseX == undefined && mouseY == undefined) {
|
||
|
|
var canvas = document.getElementById("game");
|
||
|
|
var ctx = canvas.getContext("2d");
|
||
|
|
mousePos = getMousePos(canvas, e);
|
||
|
|
var mouseX = mousePos.x;
|
||
|
|
var mouseY = mousePos.y;
|
||
|
|
}
|
||
|
|
if (isEmpty(mouseX, mouseY)) {
|
||
|
|
currentPixels.push(new Pixel(mouseX, mouseY, currentElement));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// On window load, run tick() 20 times per second
|
||
|
|
window.setInterval(tick, 50);
|
||
|
|
|
||
|
|
// When W is pressed, change the current element to water
|
||
|
|
document.onkeydown = function(e) {
|
||
|
|
if (e.keyCode == 87) {
|
||
|
|
currentElement = "water";
|
||
|
|
}
|
||
|
|
// If it is S, change the current element to sand
|
||
|
|
else if (e.keyCode == 83) {
|
||
|
|
currentElement = "sand";
|
||
|
|
}
|
||
|
|
// if its X, change to wall
|
||
|
|
else if (e.keyCode == 88) {
|
||
|
|
currentElement = "wall";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//on window load
|
||
|
|
window.onload = function() {
|
||
|
|
// While the mouse is down, run mouseDown()
|
||
|
|
var gameCanvas = document.getElementById("game");
|
||
|
|
// Get context
|
||
|
|
var ctx = gameCanvas.getContext("2d");
|
||
|
|
var newWidth = Math.ceil(window.innerWidth*0.9 / 10) * 10;
|
||
|
|
var newHeight = Math.ceil(window.innerHeight*0.675 / 10) * 10;
|
||
|
|
// If the new width is greater than 800, set it to 800
|
||
|
|
if (newWidth > 800) { newWidth = 800; }
|
||
|
|
// If the new height is greater than 600, set it to 600
|
||
|
|
if (newHeight > 600) { newHeight = 600; }
|
||
|
|
ctx.canvas.width = newWidth;
|
||
|
|
ctx.canvas.height = newHeight;
|
||
|
|
|
||
|
|
width = Math.round(newWidth/pixelSize)-1;
|
||
|
|
height = Math.round(newHeight/pixelSize)-1;
|
||
|
|
// Object with width arrays of pixels starting at 0
|
||
|
|
pixelMap = {};
|
||
|
|
for (var i = 0; i < width; i++) {
|
||
|
|
pixelMap[i] = [];
|
||
|
|
}
|
||
|
|
//...drawing code...
|
||
|
|
gameCanvas.addEventListener("mousedown", mouseClick);
|
||
|
|
gameCanvas.addEventListener("mouseup", mouseUp);
|
||
|
|
gameCanvas.addEventListener("mousemove", mouseMove);
|
||
|
|
gameCanvas.ontouchstart = function(e) {
|
||
|
|
if (e.touches) e = e.touches[0];
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>Sandbox Game</h1>
|
||
|
|
<canvas id="game" width="800" height="600" oncontextmenu="return false;">
|
||
|
|
Your browser does not support the HTML5 canvas tag.
|
||
|
|
</canvas>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|