Version 0.1
This commit is contained in:
Markus Scully
commit
68b5c32bbc
8 changed files with 673 additions and 0 deletions
415
sint.js
Normal file
415
sint.js
Normal file
|
|
@ -0,0 +1,415 @@
|
|||
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);
|
||||
};
|
||||
})();
|
||||
|
||||
// Set up variables.
|
||||
|
||||
function reset(){
|
||||
actors = [];
|
||||
controllers = [];
|
||||
particles = [];
|
||||
ais = [];
|
||||
keys = [];
|
||||
|
||||
actors[0] = new Actor(1, 200, 3, 5, 5);
|
||||
actors[1] = new Actor(2, 200, 3, 50, 5);
|
||||
|
||||
actors[2] = new Actor(2, 200, 1, 100, -100);
|
||||
|
||||
controllers[0] = new Controller(actors[0], [[68, 'moveRight'], [65, 'moveLeft'], [87, 'jump'], [67, 'camera'], [77, 'flo', 100]]);
|
||||
controllers[1] = new Controller(actors[1], [[39, 'moveRight'], [37, 'moveLeft'], [38, 'jump'], [88, 'camera'], [78, 'bounce', 100]]);
|
||||
controllers[2] = new Controller(actors[2], [[90, 'camera']]);
|
||||
|
||||
ais[0] = new Ai(actors[2], 'pace');
|
||||
|
||||
particles[0] = new Particle(0, 0, 2000, 100, 200, 10, 0);
|
||||
|
||||
camera = [actors[0], actors[1]];
|
||||
canvas.style.background = '#fff';
|
||||
canvas.style.display = 'block';
|
||||
canvas.style.border = '1px solid #ddd'
|
||||
spritesheet = new Image()
|
||||
spritesheet.src = 'newsprites.png';
|
||||
document.addEventListener('keydown', keyDown, true);
|
||||
document.addEventListener('keyup', keyUp, true);
|
||||
animate();
|
||||
}
|
||||
|
||||
level = [
|
||||
['#...................#']
|
||||
,['#...................#']
|
||||
,['########............#']
|
||||
,['################...##']
|
||||
,['#####################']
|
||||
]
|
||||
|
||||
function animate() {
|
||||
requestAnimFrame(animate);
|
||||
loopGame();
|
||||
}
|
||||
|
||||
function r(num){
|
||||
return Math.round(num);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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(object, ai){
|
||||
this.actor = object;
|
||||
this.aivars = [0, 0, 0];
|
||||
this.run = function(){
|
||||
switch(ai){
|
||||
case 'alphaBot':
|
||||
var playerIndex = -1;
|
||||
var topDistance = 400;
|
||||
for(i in actors){
|
||||
if(actors[i].image == 0 && Math.abs(actors[i].x - this.actor) < topDistance){
|
||||
playerIndex = i;
|
||||
topDistance = Math.abs(actors[i].x - this.actor) - 50;
|
||||
}
|
||||
}
|
||||
if(playerIndex >= 0){
|
||||
|
||||
}
|
||||
break;
|
||||
case 'pace':
|
||||
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.actor.xvel += ((0.02 * this.aivars[0]) * speed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Actor(type, health, power, xpos, ypos){
|
||||
this.image = type;
|
||||
this.health = health;
|
||||
this.power = power;
|
||||
this.xvel = this.yvel = this.jump = 0;
|
||||
this.imageLoad = 2;
|
||||
this.right = false;
|
||||
this.left = false;
|
||||
this.down = false;
|
||||
this.up = false;
|
||||
this.x = xpos;
|
||||
this.y = ypos;
|
||||
this.oneactions = [];
|
||||
this.actionsturn = [];
|
||||
|
||||
this.refreshActions = function(){
|
||||
this.oneactions = [];
|
||||
for(i in this.actionsturn){
|
||||
this.oneactions.push(this.actionsturn[i]);
|
||||
}
|
||||
}
|
||||
|
||||
this.action = function(type){
|
||||
switch(type){
|
||||
case 'moveLeft':
|
||||
this.xvel -= (0.05 * speed);
|
||||
break;
|
||||
case 'moveRight':
|
||||
this.xvel += (0.05 * speed);
|
||||
break;
|
||||
case 'jump':
|
||||
this.yvel = (this.down ? -4 - this.power : this.yvel);
|
||||
break;
|
||||
case 'melee':
|
||||
this.yvel = -6;
|
||||
break;
|
||||
case 'camera':
|
||||
camera = [this];
|
||||
break;
|
||||
case 'stream':
|
||||
particles.push(new Particle(0, 0, 60000, this.x, this.y - 1, this.xvel * 3 + ((Math.random() - 0.5) * 10), -3 + this.yvel * 3));
|
||||
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;
|
||||
}
|
||||
this.actionsturn.push(type);
|
||||
}
|
||||
|
||||
this.xCheck = function(){
|
||||
this.left = this.right = false;
|
||||
for(j in actors){
|
||||
if(actors[j].image != this.image){
|
||||
if(actors[j].x + 17 > this.x && this.x > actors[j].x && this.sameY(actors[j])){
|
||||
this.left = true;
|
||||
this.x = actors[j].x + 16;
|
||||
this.xvel = (this.xvel < 0 ? 0 : this.xvel);
|
||||
}
|
||||
if(this.x + 17 > actors[j].x && this.x < actors[j].x && this.sameY(actors[j])){
|
||||
this.right = true;
|
||||
this.x = actors[j].x - 16;
|
||||
this.xvel = (this.xvel > 0 ? 0 : this.xvel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.yCheck = function(){
|
||||
this.up = this.down = false;
|
||||
if(this.y >= 216){
|
||||
this.down = true;
|
||||
this.y = 216;
|
||||
this.yvel = 0;
|
||||
}
|
||||
for(j in actors){
|
||||
if(actors[j].image != this.image){
|
||||
if(this.y + 15 > actors[j].y && this.y < actors[j].y + 15 && this.sameX(actors[j])){
|
||||
this.down = true;
|
||||
this.y = actors[j].y - 18;
|
||||
this.yvel = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.sameY = function(obj){
|
||||
return (this.y < obj.y + 15 && this.y + 15 > obj.y);
|
||||
}
|
||||
|
||||
this.sameX = function(obj){
|
||||
return (this.x + 16 > obj.x && this.x < obj.x + 16);
|
||||
}
|
||||
|
||||
this.simulate = function(){
|
||||
this.y += this.yvel;
|
||||
this.yCheck();
|
||||
if(this.down){
|
||||
if(this.yvel > 10){
|
||||
this.yvel *= -0.2;
|
||||
this.y -= 1;
|
||||
}else{
|
||||
this.yvel = 0;
|
||||
}
|
||||
}else{
|
||||
this.yvel += 0.03 * speed;
|
||||
}
|
||||
this.x += this.xvel;
|
||||
this.xCheck();
|
||||
this.xvel /= 1 + (0.005 * speed);
|
||||
}
|
||||
|
||||
this.draw = function(){
|
||||
context.drawImage(spritesheet, this.image * 17, 0, 16, 16, r(this.x - lookx), r(this.y - 16 - looky), 16, 16);
|
||||
context.globalAlpha = 1;
|
||||
context.drawImage(spritesheet, this.image * 17, 17, 16, 16, r(this.x - lookx), r((216 - (this.y - 216)) - looky), 16, 16);
|
||||
// StartX, StartY, EndX, EndY
|
||||
var gradient = context.createLinearGradient(r(this.x - lookx), r((214 - (this.y - 216)) - looky - 5), r(this.x - lookx), r((214 - (this.y - 216)) - looky) + 16);
|
||||
gradient.addColorStop(0.1, 'rgba(255, 255, 255, 0)');
|
||||
gradient.addColorStop(0.9, 'rgba(255, 255, 255, 1)');
|
||||
context.fillStyle = gradient;
|
||||
context.fillRect(r(this.x - lookx), r((216 - (this.y - 216)) - looky), 16, 16);
|
||||
context.globalAlpha = 1;
|
||||
context.fillStyle = "#444";
|
||||
context.font = "10pt Arial";
|
||||
context.fillText(actors[0].sameY(actors[1]), 10, 100);
|
||||
//context.fillText(particles[0].deleteme, 10, 120);
|
||||
}
|
||||
//this.xvel += (canMove(xpos, ypos, '-1', this.xvel));
|
||||
}
|
||||
|
||||
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][type];
|
||||
this.created = this.timeup = new Date();
|
||||
this.timeup = new Date(this.timeup.getTime() + lifespan);
|
||||
this.deleteme = 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 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 = '#fac';
|
||||
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 = '#7b7';
|
||||
context.strokeRect(r(this.x - lookx) + 0.5, r(213 - (this.y - 216) - looky) + 0.5, 5, 5);
|
||||
context.globalAlpha = 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this.onGround = function(){
|
||||
return (this.y + this.size >= 216);
|
||||
}
|
||||
|
||||
this.simulate = function(){
|
||||
switch(this.type){
|
||||
case 0:
|
||||
this.yvel += (this.onGround() ? 0 : 0.01 * speed);
|
||||
this.xvel /= 1 + (0.005 * 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 /= 1 + (0.001 * 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 /= 1 + (0.005 * speed);
|
||||
this.xvel /= 1 + (0.005 * 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;
|
||||
}
|
||||
if(thisLoop > this.timeup){
|
||||
this.deleteme = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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) - 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();
|
||||
}
|
||||
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--;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue