#diminutive-rat project #83 Browser Games [Basic]

CONTRACT.md

@@ -0,0 +1,86 @@
+---
+authors:
+- "shereefb"
+- "tannerwelsh"
+team_size: 1
+goal_id: 83
+title: 'Browser Games [Basic]'
+created_at: '2016-10-05T21:34:11Z'
+labels:
+- foundational
+published: true
+level: '1'
+redirect_from: "/goals/83"
+---
+
+# Browser Games [Basic]
+
+## Challenge Rating
+
+This goal will likely be within your ZPD if you...
+
+- Can build basic web sites with HTML & CSS
+- Can add behavior to a web site with JavaScript
+- Are familiar with DOM manipulation
+- Are familiar with games like tic-tac-toe and Simon
+- Are interested in making more complex interactive web pages
+
+## Description
+
+Build simple graphical games for the browser.
+
+Fork the the [browser-games repository][browser-games] and use the fork as your project artifact.
+
+Implement the games **Tic-Tac-Toe** and **Simon** from the list in the [games.md][games-list] file. As a stretch, implement the **Connect Four** game.
+
+You will be using FreeCodeCamp challenges as guides and tutorials for building these games.
+
+## Context
+
+This goal will challenge your ability to take a _formal, defined system_ from the real world and replicate it in code. You will start with all of the logic of the system (the rules of the game) and most of the UI already designed.
+
+Your work will be mainly in deciding how to replicate that formal logic and user interface using JavaScript, HTML, and CSS.
+
+## Specifications
+
+#### General
+
+- [x] Artifact produced is a fork of the [browser-games][browser-games] repo.
+- [x] Variables, functions, files, etc. have appropriate and meaningful names.
+- [x] HTML, CSS, and JS files are well formatted with proper spacing and indentation.
+- [ ] All major features are added via pull requests with a clear description and concise commit messages.
+- [x] Every pull request has been reviewed by at least one other person.
+- [x] The artifact produced is properly licensed, preferably with the [MIT license][mit-license].
+
+#### Tic-Tac-Toe
+
+- [x] Tic-Tac-Toe game can be found at `public/ticTacToe.html`
+- [ ] Tic-Tac-Toe game is playable by two people
+- [x] Tic-Tac-Toe game page is linked from `public/index.html`
+
+#### Simon
+
+- [x] Simon game can be found at `public/ticTacToe.html`
+- [ ] Simon game is playable
+- [x] Simon game page is linked from `public/index.html`
+
+### Stretch
+
+- [x] Tic-Tac-Toe has a player-vs-computer version
+- [ ] Tic-Tac-Toe AI will always win or tie
+- [x] Simon plays sounds
+- Implement Connect Four game
+  - [ ] Connect Four game can be found at `public/connectFour.html`
+  - [ ] Connect Four game is playable by two people (human v human)
+  - [ ] Connect Four game page is linked from `public/index.html`
+
+## Resources
+
+- MDN: [Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) #html #dom #js
+- MDN: [Guide to Event Handlers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) #dom #js
+- Shay Howe: [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) #html #css
+
+[browser-games]: https://github.com/GuildCrafts/browser-games
+[games-list]: https://github.com/GuildCrafts/browser-games/blob/master/games.md
+[basic-games]: https://github.com/GuildCrafts/browser-games/blob/master/games.md#basic-graphical-games
+[mit-license]: https://opensource.org/licenses/MIT

CONTRACT_Platform-Game.md

@@ -0,0 +1,71 @@
+#bitter-steenbok
+## Somaya Bounouar
+#363 Browser Games: Generic Platform Game
+http://jsdev.learnersguild.org/goals/363-Browser_Games-Platform.html
+
+# Browser Games: Generic Platform Game
+
+## Challenge Rating
+
+This goal will likely be within your ZPD if you...
+
+- Can build basic web sites with HTML & CSS
+- Can add behavior to a web site with JavaScript
+- Are familiar with DOM manipulation
+- Are familiar with platform-based games
+- Are interested in making more complex interactive web pages
+
+## Description
+
+Implement a simple [platform](https://en.wikipedia.org/wiki/Platform_game) ("run and jump") game with HTML, CSS, and JavaScript.
+
+Follow [this tutorial](http://eloquentjavascript.net/15_game.html) from [Eloquent JavaScript](http://eloquentjavascript.net/).
+
+Fork the the [browser-games repository][browser-games] and use the fork as your project artifact.
+
+Implement the **Platform** game from the list in the [games.md][games-list] file.
+
+![platform-game](http://eloquentjavascript.net/img/darkblue.png)
+
+## Context
+
+This goal will challenge your ability to take a _formal, defined system_ from the real world and replicate it in code. You will start with all of the logic of the system (the rules of the game) and most of the UI already designed.
+
+Your work will be mainly in deciding how to replicate that formal logic and user interface using only JavaScript, HTML, and CSS.
+
+## Specifications
+
+#### General
+
+- [x] Artifact produced is a fork of the [browser-games][browser-games] repo.
+- [ ] Variables, functions, files, etc. have appropriate and meaningful names.
+- [ ] HTML, CSS, and JS files are well formatted with proper spacing and indentation.
+- [ ] There is a clear separation of game logic code from view/rendering code.
+- [ ] All major features are added via pull requests with a clear description and concise commit messages.
+- [ ] The artifact produced is properly licensed, preferably with the [MIT license][mit-license].
+
+#### Generic Platform Game
+
+- [ ] Game can be found at `public/platform.html`
+- [ ] Game is playable by one player
+- [ ] Game follows rules established in [tutorial](http://eloquentjavascript.net/15_game.html)
+- [ ] Game page is linked from `public/index.html`
+
+### Stretch
+
+Design and build your own platform-like game. What else can you build with the techniques you came up with in building the Generic Platform Game?
+
+- [ ] Game has its own HTML, CSS, and JS
+- [ ] Game is playable
+- [ ] Game page is linked from `public/index.html`
+
+## Resources
+
+- MDN: [Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) #html #dom #js
+- MDN: [Guide to Event Handlers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) #dom #js
+- Shay Howe: [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) #html #css
+- Tutorial: [Project: A Platform Game](http://eloquentjavascript.net/15_game.html) #js #html #dom
+
+[browser-games]: https://github.com/GuildCrafts/browser-games
+[games-list]: https://github.com/GuildCrafts/browser-games/blob/master/games.md
+[mit-license]: https://opensource.org/licenses/MIT

README.md

@@ -1,3 +1,7 @@
+#diminutive-rat
+Somaya Bounouar
+http://jsdev.learnersguild.org/goals/83-Browser_Games-Basic.html
+
 # Browser Games
 
 A collection of games to play in a web browser. See the full list of games in the [games.md](games.md) file.

public/css/simon.css

@@ -0,0 +1,116 @@
+body {
+	font-family: Arial, serif;
+	color: black;
+	-webkit-user-select: none; /* Chrome/Safari */
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* IE10+ */
+	-o-user-select: none;
+	user-select: none;
+	background: white;
+}
+
+ul {
+	list-style: none;
+}
+
+ul, li {
+	padding: 0;
+	margin: 0;
+}
+
+p[data-action="lose"] {
+	display: none;
+}
+
+.active {
+	opacity: 1 !important;
+}
+
+.wrapper {
+	width: 540px;
+	margin: 0 auto;
+	margin-top: 90px;
+}
+
+/*.container {
+	width: 305px;
+}*/
+
+.simon {
+	/*background: white;*/
+	position: relative;
+	float: left;
+	margin-right: 3em;
+	width: 295px;
+	height: 290px;
+	/*-webkit-border-radius: 150px 150px 150px 150px;
+	border-radius: 150px 150px 150px 150px;*/
+    /*-moz-box-shadow: 2px 1px 12px #aaa;
+    -webkit-box-shadow: 2px 1px 12px #aaa;
+    -o-box-shadow: 2px 1px 12px #aaa;
+    box-shadow: 2px 1px 12px #aaa;*/
+}
+
+.tile {
+	opacity: 0.7;
+	-webkit-transition: opacity 250ms ease;
+	-moz-transition: opacity 250ms ease;
+	-ms-transition: opacity 250ms ease;
+	-o-transition: opacity 250ms ease;
+	transition: opacity 250ms ease;
+}
+
+.tile.lit {
+	opacity: 1;
+}
+
+.red, .blue, .yellow, .green {
+	height: 290px;
+	-webkit-border-radius: 150px 150px 150px 150px;
+	border-radius: 150px 150px 150px 150px;
+	position: absolute;
+	text-indent: 10000px;
+}
+
+.red:hover, .blue:hover, .yellow:hover, .green:hover {
+	border: 2px solid black;
+}
+
+.red {
+	background: #b00101;
+	clip: rect(0px, 300px, 150px, 150px);
+	width: 296px;
+}
+
+.blue {
+	background: #000fd9;
+	clip: rect(0px, 150px, 150px, 0px);
+	width: 300px;
+}
+
+.yellow {
+	background: #deb502;
+	clip: rect(150px, 150px, 300px, 0px);
+	width: 300px;
+}
+
+.green {
+	background: #00850d;
+	clip: rect(150px,300px, 300px, 150px);
+	width: 296px;
+}
+
+.game-info button {
+	width: 5em;
+	box-sizing: border-box;
+	font-size: 1.4em;
+	-webkit-border-radius: 10px 10px 10px 10px;
+	border-radius: 10px 10px 10px 10px;
+	background: #6DABE8;
+	border: none;
+	padding: 0.3em 0.6em;
+}
+
+.game-info button:hover {
+	background: #78BCFF;
+}

public/css/ticTacToe.css

@@ -0,0 +1,44 @@
+* {
+  padding: 0px;
+  margin: 0px;
+}
+
+h1 {
+  color: white;
+  margin: 20px;
+  font-size: 50px;
+}
+body {
+  background: #AA3939;
+  text-align: center;
+}
+
+canvas {
+  background: #FFAAAA;
+  transition: transform 1s;
+  -webkit-transition: -webkit-transform 1s;
+  -moz-transition: -moz-transform 1s;
+  -ms-transition: -ms-transform 1s;
+  -o-transition: -o-transform 1s;
+
+}
+
+canvas:hover {
+  width: 101px;
+  height: 99px;
+}
+
+#canvasDiv {
+  margin: 80px auto 40px;
+  padding-top: -50px;
+}
+
+#reloadButton {
+  text-decoration: none;
+  color: white;
+  font-size: 20px;
+}
+
+#reloadButton:hover {
+  font-size: 22px;
+}

public/index.html

@@ -13,9 +13,8 @@ <h1>Browser Games</h1>
 
     <nav>
       <ul>
-        <li><a>LINK TO FIRST GAME</a></li>
-        <li><a>LINK TO SECOND GAME</a></li>
-        <li>...</li>
+        <li><a href="ticTacToe.html">Tic Tac Toe</a></li>
+        <li><a href="simon.html">Simon</a></li>
       </ul>
     </nav>
   </body>