Codinget/Snek
1
0
Fork 0
Code Issues 11 Pull requests Releases Activity

base game working

Browse source
This commit is contained in:
Nathan DECHER 2020-03-25 15:57:20 +01:00
parent daef55781e
commit beb9598f69
10 changed files with 270 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Makefile
View file

@ -5,38 +5,40 @@ APPLE = public/assets/apple32.png
WALL = public/assets/wall32.png
SNAKE = public/assets/snake.json
LEVEL_LIST = public/assets/levelList.json
CSS = public/css/snek.css
JS = public/js/snek.js
OUTPUT = $(ICON) $(APPLE) $(WALL) $(SNAKE) $(CSS) $(JS)
OUTPUT = $(ICON) $(APPLE) $(WALL) $(SNAKE) $(LEVEL_LIST) $(CSS) $(JS)
all: icon apple wall snake css js
all: icon apple wall snake levelList css js
icon: $(ICON)
apple: $(APPLE)
wall: $(WALL)
snake: $(SNAKE)
levelList: $(LEVEL_LIST)
css: $(CSS)
js: $(JS)
public/assets/icon32.png: assets/icon.jpg
convert $^ -resize 32x $@
public/assets/icon256.png: assets/icon.jpg
convert $^ -resize 256x $@
public/favicon.ico: assets/icon.jpg
convert $^ -resize 32x $@
public/assets/apple32.png: assets/apple.png
public/assets/%32.png: assets/%.png
convert $^ -resize 32x $@
public/assets/%256.png: assets/%.png
convert $^ -resize 256x $@
public/assets/wall32.png: assets/wall.png
public/assets/%32.png: assets/%.jpg
convert $^ -resize 32x $@
public/assets/%256.png: assets/%.jpg
convert $^ -resize 256x $@
public/assets/snake.json: assets/snake.json
public/assets/%.json: assets/%.json
cp $^ $@
public/css/snek.css: src/less/snek.less $(wildcard src/less/*.less)

30
assets/levelList.json Normal file
View file

@ -0,0 +1,30 @@
{
"speedrun": {
"rules": {
"fruitRegrow": false,
"speedIncrease": false,
"worldWrap": false,
"winCondition": "fruit",
"scoreSystem": "time"
},
"levelFilename": "level<n>.json",
"levelDisplay": "Level <n>",
"levels": [
1, 2, 3, 4, 5
]
},
"arcade": {
"rules": {
"fruitRegrow": true,
"speedIncrease": true,
"worldWrap": true
},
"levelFilename": "arcade-<l>.json",
"levelDisplay": "<n>",
"levels": [
"Arcade",
"Timed",
"Survival"
]
}
}

15
levels/level1.json Normal file
View file

@ -0,0 +1,15 @@
{
"dimensions": [80, 40],
"delay": 200,
"walls": [
[5,5], [5,6], [5,7], [5,8], [70, 35], [71, 35], [72, 35]
],
"food": [
[10,10]
],
"snake": [
[60,20],
[60,19],
[60,18]
]
}

7
public/index.html
View file

@ -6,7 +6,9 @@
<link rel="favicon" href="favicon.ico">
<link rel="stylesheet" href="css/snek.css">
<script src="js/snek.js"></script>
<script>window.addEventListener('load', () => require('assets'));</script>
<script>
window.addEventListener('load', () => require('main'));
</script>
</head>
<body>
<header>
@ -15,7 +17,8 @@
<h2>A simple Snake</h2>
</header>
<main>
<img src="assets/apple32.png">
<nav></nav>
<canvas class="hidden"></canvas>
</main>
<footer>
<img src="assets/icon32.png">

1
public/levels Symbolic link
View file

@ -0,0 +1 @@
../levels/

5
src/js/assets.js
View file

@ -3,7 +3,8 @@ const ProgressBar=require('progress');
const assetSpecs=[
{ name: 'fruit', filename: 'apple32.png', type: 'image' },
{ name: 'wall', filename: 'wall32.png', type: 'image' },
{ name: 'snake', filename: 'snake.json', type: 'json' }
{ name: 'snake', filename: 'snake.json', type: 'json' },
{ name: 'levelList', filename: 'levelList.json', type: 'json' }
];
const cvs=document.createElement('canvas');
@ -64,7 +65,7 @@ Promise
const onReady=(fn) => {
if(ready) fn.bind(fn)();
else readyListeners.push(ready);
else readyListeners.push(fn);
};
const get=(name) => {

101
src/js/main.js Normal file
View file

@ -0,0 +1,101 @@
(async () => {
location.hash='';
const assets=require('assets');
await new Promise(ok => assets.onReady(ok));
const main=document.querySelector('main');
const nav=main.querySelector('nav');
const canvas=main.querySelector('canvas');
let currentGame=null;
let currentInputs={};
const resizeCanvas=() => {
if(document.fullscreenElement) {
canvas.width=screen.width;
canvas.height=screen.height;
} else {
canvas.width=main.clientWidth;
canvas.height=main.clientHeight;
}
};
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const levelList=assets.get('levelList');
Object.keys(levelList).forEach(category => {
const nav=document.querySelector('nav');
const section=nav.appendChild(document.createElement('section'));
const h1=section.appendChild(document.createElement('h1'));
h1.innerText=category[0].toUpperCase()+category.slice(1)+" Mode";
const ul=section.appendChild(document.createElement('ul'));
levelList[category].levels.forEach(level => {
level=''+level;
const cat=levelList[category];
const displayName=cat.levelDisplay
.replace(/<n>/g, level)
.replace(/<l>/g, level.toLowerCase());
const fileName=cat.levelFilename
.replace(/<n>/g, level)
.replace(/<l>/g, level.toLowerCase());
const li=ul.appendChild(document.createElement('li'));
const a=li.appendChild(document.createElement('a'));
a.href='#'+category+'/'+fileName;
a.innerText=displayName;
});
});
const handleGamepads=() => {
const gp=navigator.getGamepads()[0];
let inputs=currentInputs;
console.log(gp);
if(!gp || !gp.axes) return;
const magnitude=Math.hypot(gp.axes[0], gp.axes[1]);
const angle=((Math.atan2(gp.axes[0], gp.axes[1])+2*Math.PI)%(2*Math.PI))/Math.PI;
if(magnitude>.5) {
if(angle>.25 && angle <.75) inputs.right=true;
else if(angle>.75 && angle<1.25) inputs.up=true;
else if(angle>1.25 && angle<1.75) inputs.left=true;
else inputs.down=true;
}
};
window.addEventListener('hashchange', async () => {
nav.classList.add('hidden');
const [_, category, filename]=location.hash.match(/([a-zA-Z0-9_-]+?)\/(.+)/);
const rules=levelList[category].rules || {};
const level=await (async () => {
const resp=await fetch('levels/'+filename);
return await resp.json();
})();
console.log(rules, level);
const SnekGame=require('snek');
const snek=new SnekGame(level, canvas, rules);
canvas.classList.remove('hidden');
snek.start();
snek.callback=() => {
if(navigator.getGamepads) handleGamepads();
snek.handleInputs(currentInputs);
};
currentGame=snek;
});
window.addEventListener('keydown', async e => {
if(e.key=='f' && !canvas.classList.contains('hidden')) {
if(document.fullscreenElement) await document.exitFullscreen();
else await canvas.requestFullscreen();
resizeCanvas();
}
let inputs=currentInputs;
if(e.key=='ArrowUp') inputs.up=true;
else if(e.key=='ArrowDown') inputs.down=true;
else if(e.key=='ArrowLeft') inputs.left=true;
else if(e.key=='ArrowRight') inputs.right=true;
});
})();

80
src/js/snek.js
View file

@ -5,11 +5,15 @@ const [EMPTY, FOOD, WALL, SNAKE]=Array(4).keys();
const ifNaN=(v, r) => isNaN(v)?r:v;
class SnekGame {
constructor(settings, canvas) {
constructor(settings, canvas, rules) {
// build the world
this.dimensions=[...settings.dimensions];
this.world=Array(settings.dimensions[0])
.forEach((_, i, a) => a[i]=Array(settings.dimensions[1]).fill(EMPTY));
this.world=Array(settings.dimensions[0]);
for(let i=0; i<settings.dimensions[0]; i++) {
this.world[i]=Array(settings.dimensions[1]);
this.world[i].fill(EMPTY);
}
console.log(this);
settings.walls.forEach(([x, y]) => this.world[x][y]=WALL);
settings.food.forEach(([x, y]) => this.world[x][y]=FOOD);
settings.snake.forEach(([x, y]) => this.world[x][y]=SNAKE);
@ -20,8 +24,8 @@ class SnekGame {
// get the head and initial direction
this.head=[...settings.snake[0]];
this.direction=[
ifNaN(settings.snake[1][0]-settings.snake[0][0], 1),
ifNaN(settings.snake[1][1]-settings.snake[0][1], 0)
ifNaN(settings.snake[0][0]-settings.snake[1][0], 1),
ifNaN(settings.snake[0][1]-settings.snake[1][1], 0)
];
// get the snake and the fruits themselves
@ -32,24 +36,40 @@ class SnekGame {
this.canvas=canvas;
this.ctx=canvas.getContext('2d');
//TODO this.gl=canvas.getContext('webgl');
// load the custom rules
this.rules=Object.assign({
fruitRegrow: true,
speedIncrease: true,
worldWrap: true,
winCondition: 'none',
scoreSystem: 'fruit'
}, rules, settings);
}
draw() {
// clear the canvas, because it's easier than having to deal with everything
this.ctx.clearRect(0, 0, this.canvas.with, this.canvas.height);
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
// get the cell size and offset
const cellSize=Math.min(
this.canvas.with/this.dimensions[0],
this.canvas.width/this.dimensions[0],
this.canvas.height/this.dimensions[1]
);
const offsetX=(this.canvas.width-cellSize*this.dimensions[0])/2;
const offsetY=(this.canvas.height-cellSize*this.dimensions[1])/2;
// draw the border around our game area
this.ctx.fillStyle='black';
this.ctx.fillRect(0, 0, this.canvas.width, offsetY);
this.ctx.fillRect(0, 0, offsetX, this.canvas.height);
this.ctx.fillRect(offsetX+cellSize*this.dimensions[0], 0, offsetX, this.canvas.height);
this.ctx.fillRect(0, offsetY+cellSize*this.dimensions[1], this.canvas.width, offsetY);
// draw our walls
const wall=assets.get('wall');
for(let x=0; x<this.dimensions[0]; x++) {
for(let y=0; x<this.dimensions[1]; y++) {
for(let y=0; y<this.dimensions[1]; y++) {
switch(this.world[x][y]) {
case WALL:
this.ctx.drawImage(
@ -95,7 +115,7 @@ class SnekGame {
// our fruit has a nice animation to it between .8 and 1.2 scale
const ms=Date.now();
const fruitScale=Math.sin(ms/1000*Math.PI)*.2+1
const fruitScale=Math.sin(ms/400*Math.PI)*.2+1
const fruit=assets.get('fruit');
this.fruits.forEach(([x, y]) => {
this.ctx.drawImage(
@ -119,6 +139,16 @@ class SnekGame {
const tail=this.snake.pop();
this.world[tail[0]][tail[1]]=EMPTY;
// check for out of world conditions
if(head[0]<0 || head[0]>=this.dimensions[0] || head[1]<0 || head[1]>=this.dimensions[1]) {
if(this.rules.worldWrap) {
head[0]=(head[0]+this.dimensions[0])%this.dimensions[0];
head[1]=(head[1]+this.dimensions[1])%this.dimensions[1];
} else {
return this.die();
}
}
switch(this.world[head[0]][head[1]]) {
// you hit, you die
case WALL:
@ -126,7 +156,7 @@ class SnekGame {
return this.die();
// you eat, you don't die
case FRUIT:
case FOOD:
// re-grow the snake
this.snake.push(tail);
this.world[tail[0]][tail[1]]=SNAKE;
@ -141,7 +171,7 @@ class SnekGame {
);
// custom rules
if(this.rules.regrowFruits) {
if(this.rules.fruitRegrow) {
const emptyCells=this.world
.map(
(l, x) => l
@ -153,7 +183,7 @@ class SnekGame {
).flat();
const cell=emptyCells[Math.floor(Math.random()*emptyCells.length)];
this.fruits.push(cell);
this.world[cell[0]][cell[1]]=FRUIT;
this.world[cell[0]][cell[1]]=FOOD;
}
}
@ -166,12 +196,14 @@ class SnekGame {
}
tick() {
if(!this.playing) return;
if(!this.lastStep) this.lastStep=this.firstStep;
if(this.lastStep+delay<Date.now()) {
this.lastStep+=delay;
this.draw();
if(this.callback) this.callback();
if(this.lastStep+this.delay<Date.now()) {
this.lastStep+=this.delay;
this.step();
}
this.draw();
requestAnimationFrame(() => this.tick());
}
@ -188,8 +220,26 @@ class SnekGame {
console.log("You bad lol");
}
handleInputs(inputs) {
const trySet=(dir) => {
if(!(this.direction[0]==-dir[0] && this.direction[1]==-dir[1])) this.direction=dir;
}
if(inputs.left) {
trySet([-1, 0]);
} else if(inputs.right) {
trySet([ 1, 0]);
} else if(inputs.up) {
trySet([ 0,-1]);
} else if(inputs.down) {
trySet([ 0, 1]);
}
Object.keys(inputs).forEach(k => delete inputs[k]);
}
start() {
this.firstStep=Date.now();
this.playing=true;
requestAnimationFrame(() => this.tick());
}
}

16
src/less/mainMenu.less Normal file
View file

@ -0,0 +1,16 @@
nav {
font-size: 1.6rem;
display: flex;
section {
flex: 1;
}
ul {
padding-left: 2rem;
}
li {
list-style-type: disc;
}
}

21
src/less/snek.less
View file

@ -28,6 +28,10 @@ h1, h2, h3, h4, h5, h6, strong, a {
font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: .1em;
}
a {
text-decoration: inherit;
}
@ -68,6 +72,15 @@ header, footer, main {
}
main {
flex: 1;
position: relative;
canvas {
position: absolute;
top: 0;
left: 0;
background: @bg;
}
}
h1 {
@ -80,5 +93,13 @@ p {
font-size: 1.6rem;
}
.hidden {
display: none !important;
}
// setup the progress bar
@import 'progressBar';
// setup the main menu
@import 'mainMenu';