使用HTML5_CSS3和JavaScript（knockoutjs）编写一个随机数竞猜游戏

介绍

本文将给你展现一个使用HTML5、CSS3、JavaScript编写的 knockoutjs 一个简单的JavaScript

该游戏中玩家可以选择游戏级别、并生成一个（n）的数字随机基础上的水平数

玩家将获得取决于水平来猜测该随机数的尝试（n）的数量、给大家看一下游戏的截图

背景

该代码是使用HTML5，CSS3和JavaScript（knockoutjs）写的

knockoutjs是一个JavaScript框架、它提供的动态数据绑定、依赖性跟踪和模板功能、还支持MVVM模式

源码分析

以下是 JavaScript（knockoutjs）代码

var RandomNumberGameViewModel = function () {
	var self = this;
	Level = function (id, identifier) {
		return {
			id: ko.observable(id),
			identifier: ko.observable(identifier)
		};
	}
	self.GenerateRandomNumber = function () {
		var number = ´´;
		for (var i = 0; i < self.digitsLimit() ; i++) {
			var randomNumber = Math.floor((Math.random() * self.digitsLimit()) + 1);
			number += randomNumber;
		}
		return number;
	}
	self.GetAttemptsLimit = function (levelValue) {
		return levelValue == 2 ? 7 :
			   levelValue == 3 ? 8 : 5;
	}
	self.GetDigitsLimit = function (levelValue) {
		return levelValue == 2 ? 7 :
			   levelValue == 3 ? 9 : 4;
	}
	self.checkInput = function (data, event) {
		return (event.charCode >= 49 &&
		   event.charCode < 49 + self.digitsLimit()) || event.charCode == 0;
	}
	self.GetDashboard = function (resultArray) {
		var dashboardArray = [];
		if (!resultArray) {
			for (var i = 0; i < self.digitsLimit() ; i++) {
				dashboardArray.push(´X´);
			}
		}
		else {
			for (var j = 0; j < self.digitsLimit() ; j++) {
				if (resultArray[j].flag() == true) {
					dashboardArray.push(resultArray[j].number);
				}
				else {
					dashboardArray.push(´X´);
				}
			}
		}
		return dashboardArray;
	}
	self.Result = function (indexValue, numberValue, flagValue) {
		return {
			index: ko.observable(indexValue),
			number: ko.observable(numberValue),
			flag: ko.observable(flagValue)
		};
	}
	self.Results = function (attemptValue, inputNumberValue, resultArrayValue) {
		return {
			attempt: attemptValue,
			number: inputNumberValue,
			result: resultArrayValue
		};
	}
	self.GetResult = function (randomNumber, userInput) {
		var arrayOfRandomNumber = randomNumber.split(´´);
		var arrayOfUserInput = userInput.split(´´);

		var result = [];
		for (var index = 0; index < arrayOfRandomNumber.length; index++) {
			var flag = arrayOfRandomNumber[index] == arrayOfUserInput[index];
			var number = arrayOfRandomNumber[index];
			result.push(new self.Result(index, number, flag));
		}
		return result;
	}
	self.RestartGame = function (gameLevel) {
		self.attemptsLimit(self.GetAttemptsLimit(gameLevel));
		self.digitsLimit(self.GetDigitsLimit(gameLevel));
		self.randomNumber = self.GenerateRandomNumber();
		self.inputNumber(´´);
		self.attempts(self.attemptsLimit());
		self.results([]);
		self.dashboard(self.GetDashboard(´´));
	}
	self.OnEnterClick = function () {
		var resultArray = self.GetResult(
			self.randomNumber, self.inputNumber());
		var digitsCorrectCount = 0;
		var resultArrayIndex = ´´;
		if (resultArray.length > 0) {
			for (var i = 0; i < resultArray.length; i++) {
				if (resultArray[i].flag() == true) {
					var index = i + 1;
					digitsCorrectCount++;
					if (!resultArrayIndex)
						resultArrayIndex = index;
					else {
						appendValue = ´,´ + index;
						resultArrayIndex += appendValue;
					}
				}
			}
			if (resultArrayIndex.length == 0)
				resultArrayIndex = ´none´;
			var newResults = new self.Results(
					self.results().length + 1,
					self.inputNumber(),
					resultArrayIndex
					);
			self.results.push(newResults);
			var attemptsRemaining = self.attempts() - 1;
			self.inputNumber(´´);
			self.attempts(attemptsRemaining);
			self.dashboard(self.GetDashboard(resultArray));
			if (digitsCorrectCount == self.digitsLimit()) {
				alert(´you guessed it correct... hurray!!!!´);
				self.RestartGame(self.selectedLevel());
			}
			else if (self.attempts() == 0 &&
					digitsCorrectCount < self.digitsLimit()) {
				alert(´you missed it... Sorry... better luck next time...´);
				self.RestartGame(self.selectedLevel());
			}
		}
		self.inputFocus(true);
	}
	self.levels = ko.observableArray([new Level(1, ´Level 1´), 
									  new Level(2, ´Level 2´),
									  new Level(3, ´Level 3´)]);
	self.selectedLevel = ko.observable();
	self.attemptsLimit = ko.observable(0);
	self.digitsLimit = ko.observable(0);
	self.randomNumber = 0;
	self.dashboard = ko.observableArray(self.GetDashboard(´´));
	self.inputNumber = ko.observable(´´);
	self.inputFocus = ko.observable(true);
	self.enableEnter = ko.computed(function () {
		return self.inputNumber().length == self.digitsLimit();
	}, self);
	self.attempts = ko.observable(self.attemptsLimit());
	self.results = ko.observableArray([]);
	self.selectedLevel.subscribe(function (newValue) {
		ko.utils.arrayForEach(self.levels(), function (item) {
			if (item.id() === newValue) {
				self.RestartGame(item.id());
			}
		});
	});
}

$(function () {
	ko.applyBindings(new RandomNumberGameViewModel());
});

HTML 的代码我这里就不粘出来了、请大家在源代码里面下载哈

技术点

我们可以用knockoutjs和MVVM模式编写简单的、可读性和动态JavaScript

knockoutjs - 3主要特点

数据绑定 - 绑定UI元素的数据模型的简单方法
依赖性跟踪，自动跟踪依赖关系，并更新UI时数据模型的变化
模板化 - 允许创建复杂的嵌套的用户界面与数据模型
MVVM - 3关键部位

View - HTML部分（数据绑定属性的UI元素）

ViewModel - 的JavaScript（包含观察项目及和客户端逻辑）
Model - JSON（来自服务器的数据）

最后还是给大家献上源码 下载链接: http://dwtedx.com/download.html?bdkey=s/1gd3llXh 密码: m8lk