Sint/sint.js
Markus Scully a6fc88ec52 Version 0.3.1
Changed terrain to grass and blue skies. Added seed function. Other
minor changes too.
2013-07-06 13:09:50 +01:00

650 lines
No EOL
18 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

window.onload = function(){
canvas = document.getElementById('game');
context = canvas.getContext('2d');
imagesLoading = 0;
reset();
};
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element){
window.setTimeout(callback, 1000 / 60);
};
})();
// Get mouse position
function getMouse(evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top,
click: false
};
}
// Set up variables
function reset(){
// Create arrays
actors = [];
controllers = [];
controllers = [];
particles = [];
ais = [];
keys = [];
test = [];
mouse = {
x: 0,
y: 0,
down: false
};
sound = {
shoot1: new Audio('sfx.wav')
}
game = 'menu';
lastspeed = 0;
// Create 2 actors
actors[0] = new Actor(0, 'player', 200, 3, 80, 80);
//actors[1] = new Actor(1, 'player', 200, 3, 50, 5);
//actors[1] = new Actor(6, 'all', 50, 3, 70, 80);
// Create player key controllers.
controllers[0] = new Controller(actors[0], [[68, 'moveRight'], [65, 'moveLeft'], [87, 'jump'], [67, 'camera'], [77, 'dark', 100], [83, 'shoot']]);
//controllers[1] = new Controller(actors[1], [[39, 'moveRight'], [37, 'moveLeft'], [38, 'jump'], [88, 'camera'], [78, 'bounce', 100]]);
//ais[0] = new Ai(1, 'alphaBot');
// type, affiliation, lifespan, xpos, ypos, xvel, yvel
particles[0] = new Particle('mouse', 0, 10000000000, 0, 0, 0, 0);
camera = [actors[0]]; // Set camera.
canvas.style.background = '#ddf'; // Set canvas style.
level = 0 // Set level
canvas.style.display = 'block'; // Set up canvas
canvas.style.border = '1px solid #ddd';
spritesheet = new Image(); // Define spritesheet
spritesheet.src = 'actors.png';
document.addEventListener('keydown', keyDown, true); // Add key events
document.addEventListener('keyup', keyUp, true);
document.addEventListener('mousemove', function(evt){mouse = getMouse(evt)}, false);
animate();
}
// Define the level.
levels = [
[
'################################################'
,'################################################'
,'##............................................##'
,'##............................................##'
,'##............................................##'
,'##............................................##'
,'##............................................##'
,'##............................................##'
,'##............................................##'
,'##............................................##'
,'##............................................##'
,'##..###..##........####..............###########'
,'###########........#############################'
,'################################################'
,'################################################'
,'################################################'
,'################################################'
,'################################################'
,'################################################'
,'################################################'
]
]
function animate() {
requestAnimFrame(animate);
loopGame();
}
// Round a number.
function r(num){
return Math.round(num);
}
// Generate random number from seed
function seed(num){
return ((num * 467 + ((num * 6) % 9)) % 1000) / 1000;
}
// Add key pressed to key list.
function keyDown(e){
var keyPress;
if (typeof event !== 'undefined') {
keyPress = event.keyCode;
}else if(e){
keyPress = e.which;
}
if(keys.indexOf(keyPress) == -1){
keys.push(keyPress);
}
}
// Remove key from key list.
function keyUp(e){
var keyPress;
if (typeof event !== 'undefined') {
keyPress = event.keyCode;
}else if(e){
keyPress = e.which;
}
keys.splice(keys.indexOf(keyPress), 1);
}
// Define objects.
function Controller(object, actions){
this.actor = object;
this.checkKeys = function(){
for(i in actions){
if(keys.indexOf(actions[i][0]) > -1){
this.actor.action(actions[i][1]);
}
}
this.actor.refreshActions();
}
}
function Ai(index, ai){
this.actor = actors[index];
this.aivars = [0, 0, 0];
this.action = function(act){
this.actor.action(act);
}
this.run = function(){
this.actor = actors[index];
switch(ai){
case 'alphaBot': // Work in progress following melee AI
var playerIndex = -1;
var topDistance = 400;
var distanceAway = Math.abs(actors[0].x - this.actor.x);
if((this.aivars[0] == 0 ? distanceAway > 150 : distanceAway < 200)){
if(actors[0].x > this.actor.x){
this.action((this.aivars[0] == 0 ? 'moveRight' : 'moveLeft'));
}else{
this.action((this.aivars[0] == 0 ? 'moveLeft' : 'moveRight'));
}
actors[index].xvel *= Math.pow(0.995, speed);
}else{
}
if(Math.random() < 0.03 || this.aivars[2] > 0){
if(this.aivars[0] == 0){
this.aivars[2] += 1;
this.action('dark');
}else{
this.aivars[0] -= 1;
}
}
if(this.aivars[2] == 75){
this.action('jump');
}
if(this.aivars[2] > 75 && actors[index].yvel >= 0){
actors[index].vars = [false, (actors[0].x - this.actor.x) / 15, (actors[0].y - this.actor.y) / 10];
this.action('shoot');
}
if(this.aivars[2] >= 95){
this.aivars[0] = 10;
this.aivars[1] = 0;
this.aivars[2] = 0;
actors[index].vars = [false, false, false];
}
break;
case 'pace': // Test AI
if(this.aivars[0] == 0 || this.actor.x < -300 || this.actor.x > 300){
this.aivars[0] = (this.actor.x > 0 ? -1 : 1);
}
if(this.xvel == 0){
this.action('jump');
}
this.action(this.aivars[0] == 1 ? 'moveRight' : 'moveLeft');
break;
case 'still':
break;
}
}
}
// Actor class for all solid cubes
function Actor(image, type, health, power, xpos, ypos){
this.image = image;
this.group = type;
this.health = health;
this.power = power;
this.yvel = 0;
this.xvel = 0;
this.imageLoad = 2;
this.right = this.up = this.down = false;
this.left = false;
this.x = xpos;
this.y = ypos;
this.box = new Box(this.x, this.y, 16, 16, this.xvel, this.yvel, ['player', 'pacer']); // Set physics class for this actor
this.oneactions = [];
this.actionsturn = [];
this.index = actors.length;
this.vars = [false, false, false]; // for use by AIs to control particles
this.refreshActions = function(){
this.oneactions = [];
for(i in this.actionsturn){
this.oneactions.push(this.actionsturn[i]);
}
}
// Actions to call from controllers
this.action = function(type){
switch(type){
case 'moveLeft':
this.xvel -= (0.08 * speed);
break;
case 'moveRight':
this.xvel += (0.08 * speed);
break;
case 'jump':
this.yvel = -10;
if(this.box.down){
this.yvel = -4 - this.power;
this.y -= 3;
}
break;
case 'melee':
this.yvel = 10;
break;
case 'camera':
camera = [this];
break;
case 'stream':
particles.push(new Particle(0, 0, 60000, this.x, this.y - 1, this.xvel + ((this.x - (lookx + 250)) + (mouse.x - 250)) / 30, -3 + this.yvel * 3));
sound.shoot1.play();
break;
case 'bounce':
particles.push(new Particle(1, 0, 5000, this.x, this.y - 1, this.xvel * 2 + ((Math.random() - 0.5) * 5), -5 + this.yvel * 3));
break;
case 'flo':
particles.push(new Particle(2, 0, 100000, this.x, this.y - 16, this.xvel * 4 + ((Math.random() - 0.5) * 10), -10));
break;
case 'dark':
particles.push(new Particle(3, this.index, 3000, this.x + (Math.random() * 16), this.y - (Math.random() * 16), this.xvel, this.yvel));
this.vars = [false, false, false]
break;
case 'shoot':
this.vars = [true, this.vars[1], this.vars[2]];
break;
}
this.actionsturn.push(type);
}
this.simulate = function(){
this.box.xvel = this.xvel;
this.box.yvel = this.yvel;
this.box.x = this.x;
this.box.y = this.y;
this.box.run();
this.x = this.box.x;
this.y = this.box.y;
this.xvel = this.box.xvel;
this.yvel = this.box.yvel;
//this.xvel *= Math.pow(0.992, speed);
}
this.draw = function(){
var reflect = 100; // Depth reflection goes before fading completely
var drawx = r(this.x - lookx);
var drawy = 200;
context.drawImage(spritesheet, this.image * 16, 16, 16, 16, drawx, r(this.y - 16 - looky), 16, 16);
context.globalAlpha = 1;
//context.drawImage(spritesheet, this.image * 16, 16, 16, 16, drawx, r((216 - (this.y - 216)) - looky), 16, 16);
// StartX, StartY, EndX, EndY
var gradient = context.createLinearGradient(drawx, r((216 - this.y + 216) - looky - 5), drawx, r((214 - (this.y - 216)) - looky) + 16);
gradient.addColorStop(0.1, 'rgba(255, 255, 255, ' + (this.y < 120 ? 1 : ((200 - this.y) / 35) + 0.2) +')');
gradient.addColorStop(0.9, 'rgba(255, 255, 255, 1)');
context.fillStyle = gradient;
//context.fillRect(drawx, r((216 - (this.y - 216)) - looky), 16, 16);
}
}
function Particle(type, affiliation, lifespan, xpos, ypos, xvel, yvel){
this.x = xpos;
this.y = ypos;
this.xvel = xvel;
this.yvel = yvel;
this.type = type;
this.life = lifespan;
this.size = [3, 5, 7, 5][type];
this.created = this.timeup = new Date();
this.timeup = new Date(this.timeup.getTime() + lifespan);
this.deleteme = false;
this.aff = affiliation;
this.vars = [false, false];
var angle = Math.random() * 360;
this.addx = Math.sin(angle) * ((particles.length + 200) / 5);
this.addy = Math.cos(angle) * ((particles.length + 200) / 10);
this.draw = function(){
//context.beginPath();
//context.rect(this.x, this.y, 3, 3);
switch(this.type){
case 'mouse':
context.globalAlpha = 0.7;
context.lineWidth = 2;
context.strokeStyle = '#33d';
context.strokeRect(mouse.x - this.vars[0] / 2, mouse.y - this.vars[0] / 2, this.vars[0], this.vars[0]);
context.globalAlpha = 1;
break;
case 0:
context.globalAlpha = 1;
context.lineWidth = 1;
context.strokeStyle = '#66b';
context.strokeRect(r(this.x - lookx) + 0.5, r(this.y - looky) + 0.5, 2, 2);
context.strokeStyle = '#aaf';
context.strokeRect(r(this.x - lookx) + 0.5, r(213 - (this.y - 216) - looky) + 0.5, 2, 2);
break;
case 1:
context.globalAlpha = 1;
context.lineWidth = 2;
context.strokeStyle = '#b79';
context.strokeRect(r(this.x - lookx) + 0.5, r(this.y - looky) + 0.5, 4, 4);
context.strokeStyle = '#fbd';
context.strokeRect(r(this.x - lookx) + 0.5, r(213 - (this.y - 216) - looky) + 0.5, 4, 4);
break;
case 2:
context.globalAlpha = 0.2;
context.lineWidth = 1;
context.strokeStyle = '#363';
context.strokeRect(r(this.x - lookx) + 0.5, r(this.y - looky) + 0.5, 5, 5);
context.strokeStyle = '#9c9';
context.strokeRect(r(this.x - lookx) + 0.5, r(213 - (this.y - 216) - looky) + 0.5, 5, 5);
context.globalAlpha = 1;
break;
case 3:
context.globalAlpha = 0.5;
context.lineWidth = 1;
context.strokeStyle = '#000';
context.strokeRect(r(this.x - lookx) + 0.5, r(this.y - looky) + 0.5, 4, 4);
context.strokeStyle = '#aaa';
context.strokeRect(r(this.x - lookx) + 0.5, r(213 - (this.y - 216) - looky) + 0.5, 4, 4);
context.globalAlpha = 1;
}
}
this.onGround = function(){
return (this.y > 216 - this.size);
}
this.simulate = function(){
switch(this.type){
case 'mouse':
if(this.vars[0] == false){
this.vars[0] = 8;
}
if(this.vars[1] == true){
this.vars[0] += 0.4;
if(this.vars[0] >= 10){
this.vars[1] = false;
}
}else{
this.vars[0] -= 0.4;
if(this.vars[0] <= 7){
this.vars[1] = true;
}
}
break;
case 0:
this.yvel += (this.onGround() ? 0 : 0.01 * speed);
this.xvel *= Math.pow(0.998, speed);;
this.x += this.xvel;
this.y += this.yvel;
if(this.onGround()){
this.y = 216 - this.size;
this.yvel = 0;
}
break;
case 1:
this.yvel += (this.onGround() ? 0 : 0.007 * speed);
this.xvel *= Math.pow(0.999, speed);
this.x += this.xvel;
this.y += this.yvel;
if(this.onGround()){
this.y = 216 - this.size;
this.yvel = (this.yvel > 2 ? this.yvel * -0.7 : 0);
}
break;
case 2:
this.yvel *= Math.pow(0.996, speed);
this.xvel *= Math.pow(0.996, speed);
this.x += this.xvel;
this.y += this.yvel;
if(this.onGround()){
this.y = 216 - this.size;
this.yvel = 0;
}
for(j in camera){
var distance = Math.sqrt(Math.pow(camera[j].x - this.x, 2) + Math.pow(camera[j].y - this.y, 2));
var xmov = camera[j].x - ((this.addx / (distance / 10)) + 8) - this.x;
var ymov = camera[j].y - ((this.addy / (distance / 10)) + 0) - this.y;
this.xvel += (xmov > 0 ? 1 : -1) / (((distance + 10) / 5) / Math.abs(xmov / 10)) + (Math.random() - 0.5) * 0.4;
this.yvel += (ymov > 0 ? 1 : -1) / (((distance + 10) / 5) / Math.abs(ymov / 10)) + (Math.random() - 0.5) * 0.4;
if(distance < 35 && this.y < camera[j].y && camera[j].yvel > -1){
camera[j].yvel -= (this.y < 50 ? this.y / 3000 : 0.05)
}
}
break;
case 3:
this.yvel *= Math.pow(0.996, speed);
this.xvel *= Math.pow(0.996, speed);
this.x += this.xvel;
this.y += this.yvel;
var parent = actors[this.aff];
if(typeof this.orbit === 'undefined'){
var angle = Math.random() * 360;
this.orbit = {
cube: this.affiliation,
x: 9 * Math.cos(angle * Math.PI / 180),
y: 9 * Math.sin(angle * Math.PI / 180)
}
}
if(parent.vars[0] == false && this.vars[0] == false){
this.xvel += (this.orbit.x + parent.x + 6 - this.x) / 10;
this.yvel += (this.orbit.y + parent.y - 20 - this.y) / 10;
}else{
if(this.vars[0] == false){
this.xvel = parent.vars[1] + (Math.random() - 0.5) * 1.5;
this.yvel = parent.vars[2] + (Math.random() - 0.5) * 1.5;
this.vars[0] = true;
}
for(j in actors){
if(this.x > actors[j].x && this.x < actors[j].x + 16 && this.y > actors[j].y - 16 && this.y < actors[j].y + 16 && true && actors[j] != parent){
actors[j].health -= 1;
this.deleteme = true;
}
}
}
if(this.onGround()){
this.y = 216 - this.size;
this.yvel = 0;
}
break;
}
if(thisLoop > this.timeup){
this.deleteme = true;
}
}
}
// Collision detection class
function Box(x, y, w, h, xvel, yvel, colgroup){
this.x = x;
this.y = y;
this.width = w;
this.height = h;
this.col = colgroup;
this.right = this.up = this.down = false;
this.left = false;
this.reset = function(){
this.down = this.up = this.left = this.right = false;
}
this.collide = function(){
// Check for collision with level
var lv = levels[level];
var colareax = ((this.width - 2) >> 4) + 2;
var colareay = ((this.height - 2) >> 4) + 2;
var collision = false;
var type = 'level';
this.left = 'lo';
test = [r(this.x)];
for(var hr = 0; hr < colareax; hr++){
for(var vr = 0; vr < colareay; vr++){
test.push([vr, hr]);
var xcol = ((this.x - (hr == colareax - 1 ? 1 : 0)) >> 4 + hr);
var ycol = ((this.y - (vr == colareay - 1 ? 1 : 0)) >> 4 + vr);
if(lv[ycol][xcol] == '#'){
collision = true;
}
}
}
// Check for collision with other boxes in same collision group
/*
for(j in actors){
var obj = actors[j].box;
if(this.y < obj.y + 16 && this.y + 16 > obj.y && this.x + 16 > obj.x && this.x < obj.x + 16){
collision = true;
type = 'cube';
}
}
*/
return collision;
}
this.move = function(){
this.down = false;
this.x += this.xvel;
if(this.collide() && Math.abs(this.xvel) > 0){
this.x = ((this.x >> 4) << 4) + (this.xvel > 0 ? 0 : 16);
//this.x = 32;
this.xvel = 0;
}
this.y += this.yvel;
if(this.collide()){
this.y -= this.yvel;
if(this.yvel < 0){
this.down = true;
}
this.yvel = 0;
}
this.reset();
}
this.run = function(){
this.yvel += 0.5;
this.xvel *= Math.pow(0.99, speed);
this.move();
}
}
// Run game.
var speed;
var lastLoop = new Date();
var thisLoop = lastLoop;
function loopGame(){
canvas.style.margin = (window.innerHeight > 360 ? window.innerHeight / 2 - 180 + 'px auto' : '10px auto');
lastLoop = thisLoop;
thisLoop = new Date();
speed = (thisLoop - lastLoop);
speed = (speed > 50 ? 50 : speed);
context.clearRect(0, 0, 500, 350);
lookx = looky = 0;
looky = -0;
for(i in camera){
lookx += (camera[i] instanceof Array ? camera[i][0] : camera[i].x + camera[i].xvel) - 250;
// looky += (camera[i] == instanceof Array ? camera[i][1] : camera[i].y) - 175;
}
lookx /= camera.length;
looky /= camera.length;
/*
if( instanceof Array){
lookx = camera[0];
looky = camera[1];
}else{
lookx = camera.x - 250 + camera.xvel * 5;
looky = 0;
}
*/
for(i in controllers){
controllers[i].checkKeys();
}
for(i in actors){
actors[i].simulate();
actors[i].draw();
}
context.globalAlpha = 1;
context.lineWidth = 1;
for(i in levels[level]){
for(j in levels[level][i]){
if(levels[level][i][j] == '#'){
//context.fillStyle = ['#aaa', '#bbb', '#ccc', '#ddd', '#eee', '#fff'][Math.floor(Math.random() * 6)];
context.fillStyle = '#7a7';
if(i > 0){
if(levels[level][i - 1][j] == '#'){
context.fillStyle = '#ca4';
}
}
context.fillRect((j << 4) - r(lookx) + 16, i << 4, 16, 16);
if(context.fillStyle == '#ccaa44'){
context.fillStyle = '#b93';
for(k = 1; k <= 3; k++){
context.fillRect((j << 4) - r(lookx) + 16 + (seed(j * i + k) * 14), (i << 4) + (seed(j * i / k) * 14), 2, 2);
}
}
}
}
}
context.fillStyle = '#fee';
for(i in test){
context.fillRect((test[i][0] << 4) - lookx, test[i][1] << 4, 16, 16);
}
context.globalAlpha = 1;
context.fillStyle = "#444";
context.font = "10pt Arial";
context.textAlign = 'left';
context.fillText('Health: ' + actors[0].health, 10, 290);
context.fillText('X: ' + r(actors[0].x), 10, 310);
context.fillText('Y: ' + r(actors[0].y), 70, 310);
lastspeed = (new Date() % 10 == 0 ? r(1000 / speed) : lastspeed);
context.fillText('FPS: ' + lastspeed, 10, 20);
context.textAlign = 'right';
context.fillText('Sint version α 0.3.1', 490, 310);
context.fillText(test, 490, 290);
context.fillText('Actors: ' + actors.length, 490, 20);
context.fillText('Particles: ' + particles.length, 490, 40);
for(i in ais){
ais[i].run();
}
for(i in particles){
particles[i].simulate()
particles[i]. draw()
if(particles[i].deleteme || particles.length > 3000){
particles.splice(i, 1);
i--;
}
}
// Slow down game to test low framerates
/*
for(var j=1; j < 10000000; j++){
j = j;
}
*/
}