Skip to content

Commit

Permalink
First commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Apress committed Oct 18, 2016
0 parents commit 8be13f9
Show file tree
Hide file tree
Showing 765 changed files with 33,424 additions and 0 deletions.
10 changes: 10 additions & 0 deletions 01_Programming/BasicExample1/BasicExample.html
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>BasicExample</title>
</head>
<body>
<div style="background:blue;font-size:40px;">Hello, how are you?</div>
<div style="background:yellow;font-size:20px;">I'm doing great, thank you!</div>
</body>

21 changes: 21 additions & 0 deletions 01_Programming/BasicExample2/BasicExample.html
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>BasicExample</title>
<script>
function changeCanvasColor () {
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(0, 0, canvas.width, canvas.height);
}

document.addEventListener('DOMContentLoaded', changeCanvasColor);
</script>
</head>
<body>
<div id="gameArea">
<canvas id="mycanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
12 changes: 12 additions & 0 deletions 01_Programming/BasicExample3/BasicExample.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>BasicExample</title>
<script src="BasicExample.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="mycanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
10 changes: 10 additions & 0 deletions 01_Programming/BasicExample3/BasicExample.js
@@ -0,0 +1,10 @@
"use strict";

function changeCanvasColor () {
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(0, 0, canvas.width, canvas.height);
}

document.addEventListener( 'DOMContentLoaded', changeCanvasColor);
14 changes: 14 additions & 0 deletions 01_Programming/verySimplehtml.html
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<title>BasicExample</title>
<script>
sayHello = function () {
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Click me</button>
</body>
</html>
12 changes: 12 additions & 0 deletions 02_GameProgrammingBasics/BasicGame/BasicGame.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>BasicGame</title>
<script src="BasicGame.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="myCanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
24 changes: 24 additions & 0 deletions 02_GameProgrammingBasics/BasicGame/BasicGame.js
@@ -0,0 +1,24 @@
var canvas = undefined;
var canvasContext = undefined;

function start () {
canvas = document.getElementById("myCanvas");
canvasContext = canvas.getContext("2d");
gameLoop();
}

document.addEventListener( 'DOMContentLoaded', start);

function update () {
}

function draw () {
}

function gameLoop () {
canvasContext.fillStyle = "blue";
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
update();
draw();
window.setTimeout(gameLoop, 1000 / 60);
}
12 changes: 12 additions & 0 deletions 03_CreatingGameWorld/MovingSquare/MovingSquare.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>MovingSquare</title>
<script src="MovingSquare.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="myCanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
37 changes: 37 additions & 0 deletions 03_CreatingGameWorld/MovingSquare/MovingSquare.js
@@ -0,0 +1,37 @@
"use strict";

var Game = {
canvas : undefined,
canvasContext : undefined,
rectanglePosition : 0
};

Game.start = function () {
Game.canvas = document.getElementById("myCanvas");
Game.canvasContext = Game.canvas.getContext("2d");
Game.mainLoop();
};

document.addEventListener( 'DOMContentLoaded', Game.start);

Game.clearCanvas = function () {
Game.canvasContext.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.mainLoop = function() {
Game.clearCanvas();
Game.update();
Game.draw();
window.setTimeout(Game.mainLoop, 1000 / 60);
};

Game.update = function () {
var d = new Date();
Game.rectanglePosition = d.getTime() % Game.canvas.width;
};

Game.draw = function () {
Game.canvasContext.fillStyle = "blue";
Game.canvasContext.fillRect(Game.rectanglePosition, 100, 50, 50);
};

12 changes: 12 additions & 0 deletions 04_GameAssets/FlyingSprite/FlyingSprite.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>FlyingSprite</title>
<script src="FlyingSprite.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="myCanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
50 changes: 50 additions & 0 deletions 04_GameAssets/FlyingSprite/FlyingSprite.js
@@ -0,0 +1,50 @@
"use strict";

var Game = {
canvas : undefined,
canvasContext : undefined,
backgroundSprite : undefined,
balloonSprite : undefined,
balloonPosition : { x : 0, y : 50 }
};

Game.start = function () {
Game.canvas = document.getElementById("myCanvas");
Game.canvasContext = Game.canvas.getContext("2d");
Game.backgroundSprite = new Image();
Game.backgroundSprite.src = "spr_background.jpg";
Game.balloonSprite = new Image();
Game.balloonSprite.src = "spr_balloon.png";
window.setTimeout(Game.mainLoop, 500);
};

document.addEventListener( 'DOMContentLoaded', Game.start);

Game.clearCanvas = function () {
Game.canvasContext.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.drawImage = function (sprite, position) {
Game.canvasContext.save();
Game.canvasContext.translate(position.x, position.y);
Game.canvasContext.drawImage(sprite, 0, 0, sprite.width, sprite.height,
0, 0, sprite.width, sprite.height);
Game.canvasContext.restore();
};

Game.mainLoop = function() {
Game.clearCanvas();
Game.update();
Game.draw();
window.setTimeout(Game.mainLoop, 1000 / 60);
};

Game.update = function () {
var d = new Date();
Game.balloonPosition.x = d.getTime() * 0.3 % Game.canvas.width;
};

Game.draw = function () {
Game.drawImage(Game.backgroundSprite, { x : 0, y : 0 });
Game.drawImage(Game.balloonSprite, Game.balloonPosition);
};
Binary file added 04_GameAssets/FlyingSprite/spr_background.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 04_GameAssets/FlyingSprite/spr_balloon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions 04_GameAssets/FlyingSpriteWithSound/FlyingSpriteWithSound.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>FlyingSpriteWithSound</title>
<script src="FlyingSpriteWithSound.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="myCanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
55 changes: 55 additions & 0 deletions 04_GameAssets/FlyingSpriteWithSound/FlyingSpriteWithSound.js
@@ -0,0 +1,55 @@
"use strict";

var Game = {
canvas : undefined,
canvasContext : undefined,
backgroundSprite : undefined,
balloonSprite : undefined,
balloonPosition : { x : 0, y : 50 },
backgroundMusic : undefined
};

Game.start = function () {
Game.canvas = document.getElementById("myCanvas");
Game.canvasContext = Game.canvas.getContext("2d");
Game.backgroundSprite = new Image();
Game.backgroundSprite.src = "spr_background.jpg";
Game.balloonSprite = new Image();
Game.balloonSprite.src = "spr_balloon.png";
Game.backgroundMusic = new Audio();
Game.backgroundMusic.src = "snd_music.mp3";
Game.backgroundMusic.volume = 0.4;
Game.backgroundMusic.play();
window.setTimeout(Game.mainLoop, 500);
};

document.addEventListener( 'DOMContentLoaded', Game.start);

Game.clearCanvas = function () {
Game.canvasContext.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.drawImage = function (sprite, position) {
Game.canvasContext.save();
Game.canvasContext.translate(position.x, position.y);
Game.canvasContext.drawImage(sprite, 0, 0, sprite.width, sprite.height,
0, 0, sprite.width, sprite.height);
Game.canvasContext.restore();
};

Game.mainLoop = function() {
Game.clearCanvas();
Game.update();
Game.draw();
window.setTimeout(Game.mainLoop, 1000 / 60);
};

Game.update = function () {
var d = new Date();
Game.balloonPosition.x = d.getTime() * 0.3 % Game.canvas.width;
};

Game.draw = function () {
Game.drawImage(Game.backgroundSprite, { x : 0, y : 0 });
Game.drawImage(Game.balloonSprite, Game.balloonPosition);
};
Binary file added 04_GameAssets/FlyingSpriteWithSound/snd_music.mp3
Binary file not shown.
Binary file added 04_GameAssets/FlyingSpriteWithSound/spr_background.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 04_GameAssets/FlyingSpriteWithSound/spr_balloon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions 04_GameAssets/SpriteDrawing/SpriteDrawing.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>SpriteDrawing</title>
<script src="SpriteDrawing.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="myCanvas" width="800" height="480"></canvas>
</div>
</body>
</html>
43 changes: 43 additions & 0 deletions 04_GameAssets/SpriteDrawing/SpriteDrawing.js
@@ -0,0 +1,43 @@
"use strict";

var Game = {
canvas : undefined,
canvasContext : undefined,
balloonSprite : undefined
};

Game.start = function () {
Game.canvas = document.getElementById("myCanvas");
Game.canvasContext = Game.canvas.getContext("2d");
Game.balloonSprite = new Image();
Game.balloonSprite.src = "spr_balloon.png";
window.setTimeout(Game.mainLoop, 500);
};

document.addEventListener( 'DOMContentLoaded', Game.start);

Game.clearCanvas = function () {
Game.canvasContext.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.drawImage = function (sprite, position) {
Game.canvasContext.save();
Game.canvasContext.translate(position.x, position.y);
Game.canvasContext.drawImage(sprite, 0, 0, sprite.width, sprite.height,
0, 0, sprite.width, sprite.height);
Game.canvasContext.restore();
};

Game.mainLoop = function() {
Game.clearCanvas();
Game.update();
Game.draw();
window.setTimeout(Game.mainLoop, 1000 / 60);
};

Game.update = function () {
};

Game.draw = function () {
Game.drawImage(Game.balloonSprite, { x : 100, y : 100 });
};
Binary file added 04_GameAssets/SpriteDrawing/spr_balloon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions 05_KnowingPlayer/Balloon1/Balloon.html
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Balloon</title>
<link rel="stylesheet" type="text/css" href="game-layout.css"/>
<script src="Balloon.js"></script>
</head>
<body>
<div id="gameArea">
<canvas id="myCanvas" width="800" height="480"></canvas>
</div>
</body>
</html>

0 comments on commit 8be13f9

Please sign in to comment.