Skip to content

Commit

Permalink
Merge pull request #2 from nicholas-maltbie/devbranch
Browse files Browse the repository at this point in the history
Devbranch
  • Loading branch information
nicholas-maltbie authored Apr 21, 2017
2 parents e9e9645 + d04d4e0 commit 0aa0840
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 57 deletions.
26 changes: 8 additions & 18 deletions Doc.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!-- Copyright (c) 2016 Nicholas Maltbie
<!-- Copyright (c) 2017 Nicholas Maltbie
MIT License
Doc.html - Example display for game
Expand All @@ -14,29 +14,19 @@
width: 480px;
align-items: center;
}
#game
canvas
{
background: #eee;
display: block;
}
#reset
{
margin-top: 10px;
vertical-align: super;
display: block;
}
</style>
</head>
<body>
<div class='container'>
<div id="game">
<canvas id="myCanvas" width="480" height="320"></canvas>
<script src='grid.js'></script>
<script src='ball.js'></script>
<script src='shooter.js'></script>
<script src='manager.js'></script>
<script src='bubbles.js'></script>
</div>
<button id="reset" type="button" onclick="reset()">Restart</button>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script src='grid.js'></script>
<script src='ball.js'></script>
<script src='shooter.js'></script>
<script src='manager.js'></script>
<script src='bubbles.js'></script>
</div>
</body>
2 changes: 1 addition & 1 deletion LICENSE.txt
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2016 Nicholas Maltbie
Copyright (c) 2017 Nicholas Maltbie

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
2 changes: 1 addition & 1 deletion ball.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Copyright (c) 2016 Nicholas Maltbie
/* Copyright (c) 2017 Nicholas Maltbie
* MIT License
*
* Ball.js - graphcial and physics ball file
Expand Down
22 changes: 12 additions & 10 deletions bubbles.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Copyright (c) 2016 Nicholas Maltbie
/* Copyright (c) 2017 Nicholas Maltbie
* MIT License
*
* Bubble.js - main file
Expand All @@ -11,17 +11,20 @@ var rectangle = canvas.getBoundingClientRect();
var mouse = {};
var game_grid = null;


var initial_colors = ['red', 'blue', '#eddd2d', '#54e202']
var add_colors = ['#0ad89a', 'magenta', '#c46907']
var game_colors = initial_colors
var game_colors = initial_colors.slice(0)

mouse.x = 0;
mouse.y = 0;
mouse.down = 0;

//setup mouse listener
canvas.addEventListener('mousemove', mouse_move, false)
canvas.addEventListener('mousedown', function(evt) {mouse.down = 1}, false)
canvas.addEventListener('mouseup', function(evt) {mouse.down = 0}, false)
//canvas.addEventListener('mousemove', mouse_move, false)
document.onmousemove = mouse_move;
document.body.onmousedown = function(evt) {mouse.down = 1}
document.body.onmouseup = function(evt) {mouse.down = 0}

var delay = 20 //delay between frames, 20 ms
//Get start time
Expand All @@ -47,6 +50,7 @@ function get_color()
//function to track mouse movement
function mouse_move(e)
{
rectangle = canvas.getBoundingClientRect();
var x = e.clientX - rectangle.left;
var y = e.clientY - rectangle.top;
mouse.x = x;
Expand Down Expand Up @@ -88,15 +92,14 @@ function remove_object(id)
//resets the game
function reset()
{
this.game_colors = initial_colors;
game_colors = initial_colors.slice(0);
game_manager.remove_self()
ball_shooter.remove_self()
game_grid.remove_self()

ball_shooter = new shooter(rectangle.width / 2, rectangle.height - 20, 10, 75, 400, get_color);
add_object(ball_shooter, -1)
ball_shooter.load(get_color);
canvas.addEventListener('click', function(event) {ball_shooter.fire(ball_shooter)}, false)

//Create game grid
game_grid = new grid(22, 10, 1, 14, 10);
Expand Down Expand Up @@ -155,7 +158,6 @@ function setup()
ball_shooter = new shooter(rectangle.width / 2, rectangle.height - 20, 10, 75, 400, get_color);
add_object(ball_shooter, -1)
ball_shooter.load(get_color);
canvas.addEventListener('click', function(event) {ball_shooter.fire(ball_shooter)}, false)

//Create game grid
game_grid = new grid(22, 10, 1, 14, 10);
Expand Down Expand Up @@ -186,12 +188,12 @@ function fillRoundRect(x, y, w, h, radius)
ctx.fill();
}

function roundRect(x, y, w, h, radius)
function roundRect(x, y, w, h, radius, thickness=4)
{
var r = x + w;
var b = y + h;
ctx.beginPath();
ctx.lineWidth="4";
ctx.lineWidth=thickness;
ctx.moveTo(x+radius, y);
ctx.lineTo(r-radius, y);
ctx.quadraticCurveTo(r, y, r, y+radius);
Expand Down
2 changes: 1 addition & 1 deletion grid.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Copyright (c) 2016 Nicholas Maltbie
/* Copyright (c) 2017 Nicholas Maltbie
* MIT License
*
* grid.js - grid storage and physics file
Expand Down
47 changes: 40 additions & 7 deletions manager.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Copyright (c) 2016 Nicholas Maltbie
/* Copyright (c) 2017 Nicholas Maltbie
* MIT License
*
* manager.js - game moderator file
Expand Down Expand Up @@ -37,6 +37,8 @@ function manager(ball_shooter, game_grid)
this.pop_score_fn = function (pop) {return Math.floor(pop ** 1.5)}
this.extra_score_fn = function (extra) {return extra}

this.prev_mouse_down = 0

var death_height = (this.game_grid.ball_size + this.game_grid.gap) * (this.lose_height - 1) - game_grid.gap
death_line = new line(0, death_height, canvas.width, death_height, 1, 'red')
add_object(death_line, -1)
Expand Down Expand Up @@ -112,20 +114,50 @@ function manager(ball_shooter, game_grid)
var w = Math.max(loseWidth, ctx.measureText(scoreText).width)
ctx.fillStyle = "#5874a0"
ctx.globalAlpha = 0.88
fillRoundRect(canvas.width / 2 - w / 2 - 10, canvas.height / 2 - 75, w + 20, 140, 10)
fillRoundRect(canvas.width / 2 - w / 2 - 10, canvas.height / 2 - 100, w + 20, 175, 10)
ctx.globalAlpha = 1
ctx.fillStyle = "black"
roundRect(canvas.width / 2 - w / 2 - 10, canvas.height / 2 - 75, w + 20, 140, 10)
roundRect(canvas.width / 2 - w / 2 - 10, canvas.height / 2 - 100, w + 20, 175, 10)
ctx.lineWidth = 3
ctx.font = "65px Comic Sans MS";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.fillText("You Lose", canvas.width/2, canvas.height/2);
ctx.strokeText("You Lose", canvas.width/2, canvas.height/2);
ctx.fillText("You Lose", canvas.width/2, canvas.height/2 - 25);
ctx.strokeText("You Lose", canvas.width/2, canvas.height/2 - 25);
ctx.lineWidth = 2
ctx.font = "40px Comic Sans MS";
ctx.fillText(scoreText, canvas.width / 2, canvas.height/2 + 40)
ctx.strokeText(scoreText, canvas.width / 2, canvas.height/2 + 40)
ctx.fillText(scoreText, canvas.width / 2, canvas.height/2 + 15)
ctx.strokeText(scoreText, canvas.width / 2, canvas.height/2 + 15)

ctx.font = "30px Comic Sans MS";
var retry = 'retry'
var box_width = ctx.measureText(retry).width
dark = "#eee"
text_color = "white"
if(mouse.x >= canvas.width / 2 - box_width / 2 - 10 &&
mouse.x <= canvas.width / 2 - box_width / 2 + box_width + 10 &&
mouse.y >= canvas.height / 2 + 25 && mouse.y <= canvas.height / 2 + 65)
{
dark = "#ccc"
text_color = "#ddd"
if(mouse.down) {
dark = "#aaa"
text_color = "#bbb"
}
if(this.prev_mouse_down && !mouse.down)
{
reset()
}
}
ctx.fillStyle = dark;
fillRoundRect(canvas.width / 2 - box_width / 2 - 10, canvas.height / 2 + 25, box_width + 20, 40, 10)
ctx.fillStyle = "black"
roundRect(canvas.width / 2 - box_width / 2 - 10, canvas.height / 2 + 25, box_width + 20, 40, 10, 3)
ctx.fillStyle = text_color
ctx.fillText(retry, canvas.width / 2, canvas.height/2 + 52)
ctx.fillStyle = "black"
ctx.lineWidth = 1
ctx.strokeText(retry, canvas.width / 2, canvas.height/2 + 52)
}
else {
ctx.lineWidth = 1
Expand All @@ -139,5 +171,6 @@ function manager(ball_shooter, game_grid)
ctx.fillText(nextRow, 10, canvas.height - 10)
ctx.strokeText(nextRow, 10, canvas.height - 10)
}
this.prev_mouse_down = mouse.down
}
}
11 changes: 4 additions & 7 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,15 @@
# Bubble Shooter js

This is an attempt to implement the game bubble shooter in JS. This is one of
This is an attempt to implement the game bubble shooter in JS. This is one of
my first projects in js so it probably won't be stellar in style.

This uses the canvas element to draw shapes on the screen and create the game.
This uses the canvas element to draw shapes on the screen and create the game.

Doc.html can be used to view the game.
Doc.html can be used to view the game.

The bubble.js file uses a canvas with the id "myCanvas"

### Copyright ###
This code is under the MIT License Copyright (c) 2016 Nicholas Maltbie
This code is under the MIT License Copyright (c) 2017 Nicholas Maltbie

See LICENSE.txt for further details



25 changes: 13 additions & 12 deletions shooter.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* Copyright (c) 2016 Nicholas Maltbie
/* Copyright (c) 2017 Nicholas Maltbie
* MIT License
*
* shooter.js - bubble shooter / player control file
Expand All @@ -24,6 +24,7 @@ function shooter(basex, basey, ball_size, arrow_length, fire_speed, color_fn)
this.loading = false
this.load_vel = 100
this.lost = false
this.prev_mouse_down = 0

this.remove_self = function()
{
Expand All @@ -49,16 +50,6 @@ function shooter(basex, basey, ball_size, arrow_length, fire_speed, color_fn)
add_object(loaded);
}

this.fire = function(gun)
{
if (!this.loading && !this.lost && this.can_fire && gun.added != null) {
gun.added.speedx = Math.cos(gun.angle) * gun.fire_speed;
gun.added.speedy = Math.sin(gun.angle) * gun.fire_speed;
gun.fired = gun.added;
gun.added = null;
}
}

this.load = function(color_fn)
{
this.added = this.queue.shift()
Expand All @@ -76,8 +67,16 @@ function shooter(basex, basey, ball_size, arrow_length, fire_speed, color_fn)

this.draw = function(elapsed)
{
this.can_fire = true;
if (this.prev_mouse_down && !mouse.down && !this.loading &&
!this.lost && this.can_fire && this.added != null) {
this.added.speedx = Math.cos(this.angle) * this.fire_speed;
this.added.speedy = Math.sin(this.angle) * this.fire_speed;
this.fired = this.added;
this.added = null;
}

if(this.loading == false) {
this.can_fire = true;
if(this.added != null) {
this.added.x = this.basex;
this.added.y = this.basey;
Expand Down Expand Up @@ -139,5 +138,7 @@ function shooter(basex, basey, ball_size, arrow_length, fire_speed, color_fn)
, this.basey + leny - Math.sin(angle - Math.PI / 6) * arrow_length / 4)
ctx.stroke();
ctx.closePath();

this.prev_mouse_down = mouse.down
}
}

0 comments on commit 0aa0840

Please sign in to comment.