Dev

<!
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Frogger</title>
<link rel="stylesheet" href="styles/frogger.css">
</head>
<body>
<div id="game_div">
<canvas id="game" height="565" width="399"></canvas>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts/game.js"></script>
</body>
</html>
#game_div{
text-align: center;
}
canvas {
background-color: #ffffff;
padding: 5px;
margin: 10px;
border-width: 60px;
border-color: #ffffff;
border-style: solid;
}
body {
background-color: #ffffff;
}
(function() {
var models = [
{width: 30, height: 22, dir: 1},
{width: 29, height: 24, dir: -1},
{width:24, height: 26, dir: 1},
{width: 24, height: 21, dir: -1},
{width: 46, height: 19, dir: 1}
];
var lengths = [{width: 179, height: 21}, {width: 118, height: 21}, {width: 85, height:
22}];
var rows = [473, 443, 413, 383, 353, 323, 288];
var context = null;
var start_game = function() {
game = new Game();
$(document).keydown(function(e) {
var arrow_key = get_arrow_key(e);
if (arrow_key) {
e.preventDefault();
}
if (game.dead === -1 && game.lives > 0) {
if (arrow_key === 'u'){
up();
} else if (arrow_key === 'd'){
down();
} else if (arrow_key === 'l'){
left();
} else if (arrow_key === 'r'){
right();
}
}
});
board = document.getElementById('game');
context = board.getContext('2d');
sprites = new Image();
deadsprite = new Image();
sprites.src = 'assets/frogger_sprites.png';
sprites.onload = function() {
draw_bg();
draw_info();
make_cars();
make_logs();
draw_frog();
setInterval(game_loop, 50);
};
};
var game_loop = function() {
draw_bg();
draw_info();
draw_cars();
draw_logs();
draw_wins();
if (game.lives > 0) {
draw_frog();
} else {
game_over();
}
};
var get_arrow_key = function(e) {
switch(e.keyCode) {
case 37:
return 'l';
case 38:
return 'u';
case 39:
return 'r';
case 40:
return 'd';
}
return null;
};
var draw_bg = function() {
context.fillStyle='#000000';
context.fillRect(0,0,399,284);
context.fillStyle='#000000';
context.fillRect(0,284,399,283);
};
var draw_info = function() {
draw_lives();
draw_level();
draw_score();
};
var draw_lives = function() {
var x = 4;
var y = 532;
if ((game.score - (game.extra * 10000)) >= 10000 && game.lives < 4) {
game.extra++;
}
};
var draw_level = function() {
context.font = 'bold 15pt arial';
};
var draw_score = function() {
};
var draw_frog = function() {
if (game.dead > 0) {
}
else {
if (game.log >= 0) {
var tempX = game.posX - (logs[game.log].dir * logs[game.log].speed);
if (bounds_check(tempX, game.posY)) {
game.posX = tempX;
}
}
if (game.facing === 'u') {
context.drawImage(sprites, 12, 369, 23, 17, game.posX, game.posY, 23, 17);
game.width = 23, game.height = 17;
}
else if (game.facing === 'd') {
}
else if (game.facing === 'l') {
}
else if (game.facing === 'r') {
}
}
};
var draw_wins = function() {
};
var draw_cars = function() {
for (var i=0; i<cars.length; i++) {
cars[i].move();
if (cars[i].out_of_bounds()) {
cars[i] = make_car(cars[i].lane, null, cars[i].model);
}
cars[i].draw();
}
};
var draw_logs = function() {

for (var i=0; i< logs.length; i++) {
logs[i].move();
if (logs[i].out_of_bounds()) {
logs[i] = make_log(logs[i].row)
}
logs[i].draw();
}
};
var game_over = function() {
if (game.score >= highscore) {

localStorage['highscore'] = game.score;
}
};
var up = function() {
if (bounds_check(game.posX, game.posY-30)) {
game.posY -= 30;
game.current++;
}
if (game.current > game.highest) {
game.score += 10;
game.highest++;
}
game.facing = 'u';
};
var down = function() {

if (bounds_check(game.posX, game.posY+30)) {
game.posY += 30;
game.current--;
}
game.facing = 'd';
};
var left = function() {

if (bounds_check(game.posX-30, game.posY)) game.posX -= 30;
game.facing = 'l';
};
var right = function() {

if (bounds_check(game.posX+30, game.posY)) game.posX += 30;
game.facing = 'r';
};
var bounds_check = function(x, y) {

if (y > 90 && y < 510 && x > 0 && x < 369) {
return true;
}
else if (y > 60 && y < 100 && ((x > 5 && x < 40 && !game.won[0]) ||
(x > 92 && x < 128 && !game.won[1]) || (x > 178 && x < 214 &&
!game.won[2]) ||
(x > 263 && x < 299 && !game.won[3]) || (x > 347 && x < 383 &&
!game.won[4]))) {
return true;
}
return false;
};
var sploosh = function() {
game.lives--;
game.dead = 20;
};
var make_cars = function() {

cars = [
make_car(0),
make_car(0, 130, 3),
make_car(0, 260, 3)
];
};
var make_car = function(row, x, model) {
switch(row) {
case 0:
return new Car(x==null?-25:x, rows[row], row, 3, model==null?1:model);
case 1:
return new Car(x==null?399:x, rows[row], row, 2, model==null?0:model);
}
};
var make_logs = function() {
logs = [
make_log(7),
make_log(7, 170)
];
};
var make_log = function(row, x, len) {
switch(row) {
case 7:
return new Log(x==null?399:x, rows[row], row, 1, 1, len==null?1:len)
}
};
var Car = function(x, y, lane, speed, model) {
this.posX = x;
this.posY = y;
this.lane = lane;
this.speed = speed;
this.model = model;
this.width = models[model].width;
this.height = models[model].height;
this.move = function() {
this.posX = this.posX - (models[model].dir * this.speed * game.level);
};
this.draw = function() {
switch(this.model) {
case 0:
context.drawImage(sprites, 8, 265, 30, 22, this.posX, this.posY, 30, 22);
break;
case 1:
break;
}
};
this.out_of_bounds = function() {
return ((this.posX + this.width) < 0 || this.posX > 399);
};
};
var Log = function(x, y, row, speed, dir, length) {
this.posX = x;
this.posY = y;
this.row = row;
this.speed = speed;
this.dir = dir;
this.length = length;
this.width = lengths[length].width;
this.height = lengths[length].height;
this.move = function() {
this.posX = this.posX - (this.dir * this.speed);
}
this.draw = function () {
switch(this.length) {
case 0:
break;
case 1:
break;
case 2:
break;
}
}
this.out_of_bounds = function() {
return ((this.posX + this.width) < 0 || this.posX > 399);
}
};
var Game = function() {
this.lives = 1;
this.extra = 0;
this.level = 1;
this.score = 0;
this.posX = 187;
this.posY = 503;
this.facing = 'u';
this.log = -1;
this.current = -1;
this.highest = -1;
this.dead = -1;
this.win = -1;
this.won = [false, false, false, false, false];
this.reset = function () {
this.posY = 503;
this.posX = 187;
this.facing = 'u';
this.log = -1;
this.current = -1;
this.highest = -1;
this.dead = -1;
this.win = -1;
}
}
start_game();
})();

Dev

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Dev

Enviado por

Direitos autorais:

Formatos disponíveis

<!

var draw_logs = function() {

if (game.score >= highscore) {

var down = function() {

var left = function() {

var right = function() {

var bounds_check = function(x, y) {

var make_cars = function() {

Você também pode gostar