Snail_JS
Hra pro web
JavaScript
$(function(){
var draw = $("#_canvas")[0].getContext("2d");
/// Color object type
var Color = function(_r, _g, _b, _a){
if(_r != undefined)
if(_r < 0) this.r = 0; else if(_r > 255) this.r = 255; else this.r = _r;
else
this.r = 0;
if(_g != undefined)
if(_g < 0) this.g = 0; else if(_g > 255) this.g = 255; else this.g = _g;
else
this.g = 0;
if(_b != undefined)
if(_b < 0) this.b = 0; else if(_b > 255) this.b = 255; else this.b = _b;
else
this.b = 0;
if(_a != undefined)
if(_a < 0) this.a = 0; else if(_a > 255) this.a = 1; else this.a = _a / 255;
else
this.a = 0;
/// Get color data in rgba(r, g, b, a) format
this.rgba = function(){
return "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + this.a + ")";
}
}
/// Tree object type
var Tree = function(snail){
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
while(snail.InCollisionWith(this.x, this.y, 8))
{
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
}
this.color1 = new Color(Math.floor(Math.random() * 96), Math.floor(Math.random() * 128) + 96, 0, 255);
this.color2 = new Color(this.color1.r + 56, Math.min(this.color1.g + 56, 255), 56, 255);
this.color3 = new Color(this.color1.r + 80, Math.min(this.color1.g + 80, 255), 80, 255);
/// method for drawing
this.Draw = function(){
var circle_gradient = draw.createRadialGradient(this.x - 6, this.y - 6, 1, this.x, this.y, 32);
circle_gradient.addColorStop(0, this.color3.rgba());
circle_gradient.addColorStop(0.5, this.color2.rgba());
circle_gradient.addColorStop(1, this.color1.rgba());
draw.fillStyle = circle_gradient;
draw.beginPath();
draw.arc(this.x, this.y, 32, 0, 2 * Math.PI);
draw.closePath();
draw.fill();
}
}
var Stone = function(){
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
var c = Math.floor(Math.random() * 128) + 96;
this.color = new Color(c, c, c, 255);
var shapeDirs = new Array();
for(var i = 0; i < 8; i++)
shapeDirs[i] = Math.floor(Math.random() * 360);
shapeDirs.sort(function(a,b){return a-b});
this.shape = new Array();
for(var i = 0; i < 8; i++)
{
this.shape[i * 2] = this.x + 16 * Math.sin(shapeDirs[i] / 180 * Math.PI);
this.shape[i * 2 + 1] = this.y + 16 * (-Math.cos(shapeDirs[i] / 180 * Math.PI));
}
/// method for drawing
this.Draw = function(){
draw.fillStyle = this.color.rgba();
draw.beginPath();
draw.moveTo(this.shape[0], this.shape[1]);
for(var g = 2; g < 16; g += 2)
draw.lineTo(this.shape[g], this.shape[g + 1]);
draw.closePath();
draw.fill();
}
}
var RedMushroom = function(){
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
this.points = 0;
this.whitePoints = new Array();
this.wpc = 4 + Math.floor(Math.random() * 6);
var l, d;
for(var i = 0; i < this.wpc; i++)
{
l = Math.floor(Math.random() * 6);
d = Math.floor(Math.random() * 360) * Math.PI / 180;
this.whitePoints[i * 2] = this.x + Math.floor(l * Math.sin(d));
this.whitePoints[i * 2 + 1] = this.y - Math.floor(l * Math.cos(d));
}
this.doBonus = function(snail){
snail.lowSpeed = 0.2;
snail.highSpeed = 0.6;
snail.speedTimer = 180;
}
this.Step = function(){}
/// method for drawing
this.Draw = function(){
var circle_gradient = draw.createRadialGradient(this.x - 1, this.y - 1, 1, this.x, this.y, 6);
circle_gradient.addColorStop(0, "#FF6060");
circle_gradient.addColorStop(1, "#FF0000");
draw.fillStyle = circle_gradient;
draw.beginPath();
draw.arc(this.x, this.y, 6, 0, Math.PI * 2);
draw.closePath();
draw.fill();
draw.fillStyle = "#FFFFFF";
for(var i = 0; i < this.wpc; i++)
draw.fillRect(this.whitePoints[i * 2], this.whitePoints[i * 2 + 1], 1, 1);
}
}
var BrownMushroom = function(){
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
this.points = 5;
this.doBonus = function(snail){}
this.Step = function(){}
/// method for drawing
this.Draw = function(){
var circle_gradient = draw.createRadialGradient(this.x - 1, this.y - 1, 1, this.x, this.y, 6);
circle_gradient.addColorStop(0, "#FFC060");
circle_gradient.addColorStop(1, "#C06020");
draw.fillStyle = circle_gradient;
draw.beginPath();
draw.arc(this.x, this.y, 6, 0, Math.PI * 2);
draw.closePath();
draw.fill();
}
}
var PurpleMushroom = function(){
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
this.points = Math.floor(Math.random() * 10);
var g1 = Math.floor(Math.random() * 64);
this.rNow = Math.floor(Math.random() * 360);
this.color1 = new Color(255, g1, 255, 255);
this.color2 = new Color(255, 0, 255, 255);
this.doBonus = function(snail){
var bonusId = Math.floor(Math.random() * 5)
switch(bonusId)
{
case 0:
snail.color.a = 0.1;
snail.color2.a = 0.1;
snail.alphaTimer = 360;
break;
case 1:
snail.lowSpeed = 0.3;
snail.highSpeed = 0.9;
snail.speedTimer = 180;
break;
case 2:
snail.lowSpeed = 2;
snail.highSpeed = 6;
snail.speedTimer = 180;
break;
}
}
this.Step = function(){
this.rNow++;
this.rNow %= 360;
this.color1.r = 191 + Math.floor(64 * Math.sin(this.rNow * Math.PI / 180));
this.color2.r = this.color1.r - 32;
}
/// method for drawing
this.Draw = function(){
var circle_gradient = draw.createRadialGradient(this.x - 1, this.y - 1, 1, this.x, this.y, 6);
circle_gradient.addColorStop(0, this.color1.rgba());
circle_gradient.addColorStop(1, this.color2.rgba());
draw.fillStyle = circle_gradient;
draw.beginPath();
draw.arc(this.x, this.y, 6, 0, Math.PI * 2);
draw.closePath();
draw.fill();
}
}
var WhiteFlower = function(){
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
this.points = 1;
/// method for drawing
this.Draw = function(){
draw.strokeStyle = "#FFFFFF";
draw.beginPath();
for(var d = 0; d < 10; d++)
{
draw.moveTo(this.x, this.y);
draw.lineTo(this.x + 6 * Math.sin(d * 36 * Math.PI / 180), this.y - 6 * Math.cos(d * 36 * Math.PI / 180));
}
draw.closePath();
draw.stroke();
draw.fillStyle = "#FFFF00";
draw.beginPath();
draw.arc(this.x, this.y, 2, 0, Math.PI * 2);
draw.closePath();
draw.fill();
}
}
var GoldFlower = function(){
this.x = Math.floor(Math.random() * 640);
this.y = Math.floor(Math.random() * 480);
this.points = 3;
/// method for drawing
this.Draw = function(){
draw.strokeStyle = "#FFC000";
draw.beginPath();
for(var d = 0; d < 10; d++)
{
draw.moveTo(this.x, this.y);
draw.lineTo(this.x + 6 * Math.sin(d * 36 * Math.PI / 180), this.y - 6 * Math.cos(d * 36 * Math.PI / 180));
}
draw.closePath();
draw.stroke();
draw.fillStyle = "#FF4000";
draw.beginPath();
draw.arc(this.x, this.y, 2, 0, Math.PI * 2);
draw.closePath();
draw.fill();
}
}
var Snail = function(){
this.x = Math.floor(Math.random() * 600 + 20);
this.y = Math.floor(Math.random() * 440 + 20);
this.direction = Math.floor(Math.random() * 360);
this.color = new Color(255, 192, 128, 255);
this.color2 = new Color(192, 192, 192, 255);
this.relSize = 0.6;
this.highSpeed = 3;
this.lowSpeed = 1;
this.alphaTimer = 0;
this.speedTimer = 0;
this.Move = function(_trees, _stones){
var absSize = 16 * this.relSize;
//Timers
if(this.alphaTimer > 1) this.alphaTimer--; else if(this.alphaTimer == 1){
this.color.a = 1;
this.color2.a = 1;
this.alphaTimer = 0;
}
if(this.speedTimer > 1) this.speedTimer--; else if(this.speedTimer == 1){
this.highSpeed = 3;
this.lowSpeed = 1;
this.speedTimer = 0;
}
//Movement
if(game.keys[KEYS.A])
this.direction -= 3;
if(game.keys[KEYS.D])
this.direction += 3;
if(game.keys[KEYS.W] || game.keys[KEYS.S]){
var isOnStone = false;
var t;
for(t in _stones)
{
if(this.InCollisionWith(_stones[t].x, _stones[t].y, 16)){
isOnStone = true;
break;
}
}
var px = this.x, py = this.y;
this.x += (game.keys[KEYS.W]?(isOnStone?this.lowSpeed:this.highSpeed):(isOnStone?-this.lowSpeed:-this.highSpeed)) * Math.sin(this.direction / 180 * Math.PI);
if((this.x > 640 - absSize) || (this.x < absSize)){
this.x = px;
}
this.y += (game.keys[KEYS.W]?(isOnStone?this.lowSpeed:this.highSpeed):(isOnStone?-this.lowSpeed:-this.highSpeed)) * (-Math.cos(this.direction / 180 * Math.PI));
if((this.y > 480 - absSize) || (this.y < absSize)){
this.y = py;
}
if(this.CollisionTrees(_trees, true))
{
this.x = px;
this.y = py;
}
}
};
/// method for drawing
this.Draw = function(){
draw.fillStyle = this.color.rgba();
draw.beginPath();
var absSize = 16 * this.relSize;
draw.moveTo(
this.x + absSize * Math.sin((this.direction + 30) / 180 * Math.PI),
this.y + absSize * (-Math.cos((this.direction + 30) / 180 * Math.PI)));
draw.lineTo(
this.x + absSize * Math.sin((this.direction + 150) / 180 * Math.PI),
this.y + absSize * (-Math.cos((this.direction + 150) / 180 * Math.PI)));
draw.lineTo(
this.x + absSize * Math.sin((this.direction + 210) / 180 * Math.PI),
this.y + absSize * (-Math.cos((this.direction + 210) / 180 * Math.PI)));
draw.lineTo(
this.x + absSize * Math.sin((this.direction + 330) / 180 * Math.PI),
this.y + absSize * (-Math.cos((this.direction + 330) / 180 * Math.PI)));
draw.closePath();
draw.fill();
draw.fillStyle = this.color2.rgba();
draw.beginPath();
draw.arc(this.x + 6 * this.relSize * Math.sin((this.direction + 180) / 180 * Math.PI), this.y + 6 * this.relSize * (-Math.cos((this.direction + 180) / 180 * Math.PI)), 12 * this.relSize, 0, Math.PI * 2);
draw.closePath();
draw.fill();
}
/// collision check
this.InCollisionWith = function(x, y, r){
if(Math.pow(Math.abs(x - this.x), 2)
+ Math.pow(Math.abs(y - this.y), 2) < Math.pow(16 * this.relSize + r, 2))
return true;
else
return false;
}
/// collisions with trees
this.CollisionTrees = function(trees, bool){
var t;
for(t in trees)
{
if(this.InCollisionWith(trees[t].x, trees[t].y, 8))
{
if(this.relSize > 2 && bool === true){
game.score += 50;
game.scoreLevel += 50;
trees.splice(t,1);
t--;
}
return true;
}
}
return false;
}
this.Grow = function(){
this.relSize += 0.1;
}
}
var KEYS = { A: 65, D: 68, I: 73, J: 74, K: 75, L: 76, S: 83, W: 87, F: 70 };
var game = {
health: 100,
score: 0,
/// <score_level>
scoreLevel: 0,
scoreLevelMax: 10,
scoreLevelActual: 1,
/// </score_level>
/// <score_bar>
scoreBarColorState: Math.floor(Math.random() * 360),
scoreBarColor: new Color(0, 0, 255, 255),
scoreBarBubles: new Array(),
/// </score_bar>
trees: new Array(),
stones: new Array(),
mushrooms: new Array(),
flowers: new Array(),
player: new Snail(),
keys: new Array(),
Step: function(){
/// collect mushrooms
for(x in this.mushrooms){
this.mushrooms[x].Step();
if(this.player.InCollisionWith(this.mushrooms[x].x, this.mushrooms[x].y, 6)){
this.score += this.mushrooms[x].points;
this.scoreLevel += this.mushrooms[x].points;
this.mushrooms[x].doBonus(this.player);
if(this.mushrooms[x].constructor == RedMushroom)
this.mushrooms.splice(x,1, new RedMushroom());
else if(this.mushrooms[x].constructor == BrownMushroom)
this.mushrooms.splice(x,1, new BrownMushroom());
else if(this.mushrooms[x].constructor == PurpleMushroom)
this.mushrooms.splice(x,1, new PurpleMushroom());
//x--;
}
}
/// collect flowers
for(x in this.flowers){
if(this.player.InCollisionWith(this.flowers[x].x, this.flowers[x].y, 6)){
this.score += this.flowers[x].points;
this.scoreLevel += this.flowers[x].points;
if(this.flowers[x].constructor == WhiteFlower)
this.flowers.splice(x,1, new WhiteFlower());
else if(this.flowers[x].constructor == GoldFlower)
this.flowers.splice(x,1, new GoldFlower());
//x--;
}
}
if(this.scoreLevel > this.scoreLevelMax)
{
this.scoreLevel -= this.scoreLevelMax;
this.scoreLevelMax += 10;
this.scoreLevelActual++;
this.player.Grow();
}
for(var i = 0; i < 44; i += 2)
{
this.scoreBarBubles[i + 1] -= 0.25;
if(this.scoreBarBubles[i + 1] < 0)
{
this.scoreBarBubles[i] = Math.floor(Math.random() * 22 * 2 + 1);
this.scoreBarBubles[i + 1] = 10;
}
}
this.scoreBarColorState++;
this.scoreBarColorState %= 360;
this.scoreBarColor.g = Math.floor(112 + Math.sin(this.scoreBarColorState * 3.1415 / 180) * 48);
this.player.Move(this.trees, this.stones);
},
/// method for drawing
Draw: function(){
draw.fillStyle = "#804000";
draw.fillRect(0, 0, 640, 480);
var x;
for(x in this.stones)
this.stones[x].Draw();
for(x in this.mushrooms)
this.mushrooms[x].Draw();
for(x in this.flowers)
this.flowers[x].Draw();
this.player.Draw();
for(x in this.trees)
this.trees[x].Draw();
draw.fillStyle = "#FFFF80";
draw.font = "12px sans-serif";
draw.fillText("Score: " + this.score, 2, 12);
/// level bar
draw.strokeStyle = "#00FFC0";
draw.fillStyle = "#00FFC0";
draw.strokeRect(0, 16, 48, 12);
draw.fillText(this.scoreLevelActual.toString(), 50, 26);
var barWidth = Math.round(this.scoreLevel / this.scoreLevelMax * 46);
draw.fillStyle = this.scoreBarColor.rgba();
draw.fillRect(1, 17, barWidth, 10);
barWidth -= 2;
draw.fillStyle = "#00FFFF";
for(var i = 0; i < 44; i += 2)
{
if(this.scoreBarBubles[i] <= barWidth)
draw.fillRect(1 + this.scoreBarBubles[i], 17 + this.scoreBarBubles[i + 1], 1, 1);
}
}
};
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf("android") > -1 || ua.indexOf("mobile") > -1){
game.KeyDown = function(key){
this.keys[key] = !this.keys[key];
}
game.KeyUp = function(key){}
$("#keyboard").keydown(function(e){game.KeyDown(e.keyCode);});
$("#keyboard").keyup(function(e){game.KeyUp(e.keyCode);});
}else{
game.KeyDown = function(key){
this.keys[key] = true;
}
game.KeyUp = function(key){
this.keys[key] = false;
}
$("body").keydown(function(e){game.KeyDown(e.keyCode);});
$("body").keyup(function(e){game.KeyUp(e.keyCode);});
}
/// score bar bubles
for(var i = 0; i < 44; i += 2)
{
game.scoreBarBubles[i] = i + 1;
game.scoreBarBubles[i + 1] = Math.floor(Math.random() * 10);
}
/// trees
for(var i = 0; i < 25; i++)
game.trees[i] = new Tree(game.player);
/// stones
for(var i = 0; i < 15; i++)
game.stones[i] = new Stone();
/// mushrooms
for(var i = 0; i < 8; i++)
game.mushrooms[i] = new RedMushroom();
for(var i = 8; i < 16; i++)
game.mushrooms[i] = new BrownMushroom();
for(var i = 16; i < 20; i++)
game.mushrooms[i] = new PurpleMushroom();
/// flowers
for(var i = 0; i < 8; i++)
game.flowers[i] = new WhiteFlower();
for(var i = 8; i < 256; i++)
game.flowers[i] = new GoldFlower();
var interval = setInterval(function loop(){
game.Step();
game.Draw();
}, 1000/60);
});Neformátovaný
Přidáno: 18.2.2014
Expirace: Neuvedeno
Autor: Zdeněk Pavlátka