AngularJS code for Monty Hall game
HTML code:index.html
Application code:montyapp.js
var app = angular.module('myApp', []);
<![CDATA[
<textarea id="controller1">
app.controller('myCtrl', function($scope, $window) {
var doorImage = "https://s17.postimg.org/5oshdmhjz/door.jpg";
var goatImage = "https://s14.postimg.org/rh0sn9jg1/goat.jpg";
var goldImage = "https://s18.postimg.org/5ggbc4uw9/gold.jpg";
$scope.stage = 0;
$scope.doors = ["Door One","Door Two","Door Three"]
$scope.hostSays = "Choose a door.";
//choose the prize door
var prizeDoor = Math.floor(Math.random() * 3);
var doorShown = 0;
$scope.doorObjects = [];
//populate doorObjects
for (i = 0; i < $scope.doors.length; i++) {
var dr = new fnDoor($scope.doors[i],doorImage,"auto",200,i);
if(i == prizeDoor){
dr.prize = 1
}
$scope.doorObjects.push(dr);
}
function fnDoor(name,pic,width,height,num){
this.name = name;
this.pic = pic;
this.prize = 0;
this.width = width;
this.height = height;
this.num = num;
}
$scope.fnReset = function() {
$window.location.reload(true);
}
$scope.fnDoorClick = function(obj) {
var doorClicked = obj.target.alt;
//first time the door is chosen
if($scope.stage == 0){
$scope.stage = 1;
//door clicked is prize door
//so show a goat door
if(doorClicked == prizeDoor){
var randDoor = Math.floor(Math.random() * 2);
var count = 0;
for (i = 0; i < $scope.doorObjects.length; i++) {
if($scope.doorObjects[i].prize == 0 && count == randDoor){
$scope.doorObjects[i].pic = goatImage;
doorShown = i;
break;
}
if($scope.doorObjects[i].prize == 0){
count ++;
}
}
}
//door clicked is a goat door
//so show remaining goat door
else{
for (i = 0; i < $scope.doorObjects.length; i++) {
if($scope.doorObjects[i].prize == 0 && $scope.doorObjects[i].num != doorClicked){
$scope.doorObjects[i].pic = goatImage;
doorShown = i;
break;
}
}
}
$scope.hostSays = "Switch or stick?";
}
//second stage
//switch or stick selected
else{
//if the second door has already been selected
//don't process any further
if($scope.stage == 2){
return;
}
//if the door shown by the host is clicked
//ignore the click
if(doorClicked == doorShown){
return;
}
$scope.stage = 2;
for (i = 0; i < $scope.doorObjects.length; i++) {
if($scope.doorObjects[i].prize == 0){
$scope.doorObjects[i].pic = goatImage;
}
else{
$scope.doorObjects[i].pic = goldImage;
}
}
if(doorClicked == prizeDoor){
$scope.hostSays = "You win!";
}
else{
$scope.hostSays = "You lose";
}
}
}
});
</textarea>
]]>
CSS code:montystyle.css
<![CDATA[
h1 {
font-family: Impact, Charcoal, sans-serif;
font-size: 3em;
}
.btn {
font-family: Impact, Charcoal, sans-serif;
font-size: 3em;
width:400px;
height:100px;
background-color: green;
border: .1em solid black;
border-radius: .2em;
color: white;
background-size: 100%;
display: inline-block;
}
img {
padding:20px;
}
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
]]>