03-代码
10.1.1 代码
例10-1给出了游戏代码。下节将讨论各个函数的功能。然后，在桌面浏览器中测试这个应用，最后将这个程序修改为一个能够在iOS设备上全屏运行的程序。此版本的游戏可以很好地在桌面版的Safari浏览器中工作。下节将重点介绍迁移到iPhone/iPad时所必须做的修改。
例10-1 BSBing.html的完整源代码列表
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BS Bingo</title>
<script src="modernizr-min.js"></script>
<script src="TextButton.js"></script>
<script src="ConsoleLog.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
theCanvas = document.getElementById("canvas");
context = theCanvas.getContext("2d");
}
var bingoCard = [];
var buttons = [];
var standardJargonList = [];
var tempButton = {};
var clickSound;
function initLists(){
standardJargonList=[
"Actionable", "Assessment" ,"Bandwidth", "Benchmark",
"Best\nPractices", "Bottle neck" , "Change\nManagement", "Coach",
"Competitive\nAdvantage", "Constraints", "Core\nCompetencies",
"Core values", "Critical\nthinking", "Cutting\nedge",
"Dashboard", "Deliverables", "Enterprise","Gatekeeper",
"Individual\nContributor", "Leadership", "Matrix\norganisation",
"Metrics", "Milestones", "Momentum", "Moving target",
"Initiative","Partnership", "Process", "Process\nmanagement",
"Re-engineer", "Requirements", "Rightsize", "Seat at\nthe table",
"Tentpole", " Silo", "Standards", "State of the art",
"Supply chain", "Synergy","Teamwork", "Thought\nleader",
"Touchpoints", "Value\nadded", "Drink the\nKool Aid",
"Baked In", "Champion", "Circle Back", "Dialogue", "Emerge",
"Enhance", "Evolve", "Execute", "Facilitate" ,"Incentivise",
"Leverage", "Partner", "Spearhead", "Strategize","Synergise",
"Throw\na\nCurve", "Touch Base", "Outside\nthe\nBox",
"Opportunity", "Open Door\nPolicy","Win-Win\n(Anything)",
"Risk\n(Anything)","Proactive","Reactive","Buy-In",
"Paradigm\nShift","Task-Oriented","Empower","Team\nPlayer",
"Enterprise\nWide","Globalization","Localization",
"Mission-critical", "Magic\nQuadrant","Agile\n(Anything)",
"Waterfall","Outsourcing","Off-Shoring","Blue Sky",
"20/20\hindsight","Low\nHanging\nFruit","10,000\nFoot View",
"Take\nOwnership","Ramp up", "Out of\nthe Box", "24x7",
"Fast Track", "Out of\nthe Loop", "In the\nLoop","Touch Base",
"Mindset", "Game Plan", "Bring to \nthe Table", "Drill Down",
"Elevator\nSpeech", "Level the\nPlaying field",
"Ping\n(Someone)","Pushback","Retool", "Take Away",
"Life-Time\nValue", "Thought\nLeadership", "Up Sell"
];
}
function initButtons(){
buttons = [
[
new TextButton(0,0,"Button
0,0",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(92,0,"Button
0,1",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(184,0,"Button
0,2",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(276,0,"Button
0,3",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(368,0,"Button
0,4",85,50,gr,"#000000","#ffff00","#000000")
],
[
new TextButton(0,57,"Button
1,0",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(92,57,"Button
1,1",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(184,57,"Button
1,2",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(276,57,"Button
1,3",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(368,57,"Button
1,4",85,50,gr,"#000000","#ffff00","#000000")
],
[
new TextButton(0,114,"Button
2,0",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(92,114,"Button
2,1",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(184,114,"Button
2,2",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(276,114,"Button
2,3",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(368,114,"Button
2,4",85,50,gr,"#000000","#ffff00","#000000")
],
[
new TextButton(0,171,"Button
3,0",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(92,171,"Button
3,1",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(184,171,"Button
3,2",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(276,171,"Button
3,3",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(368,171,"Button
3,4",85,50,gr,"#000000","#ffff00","#000000")
],
[
new TextButton(0,228,"Button
4,0",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(92,228,"Button
4,1",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(184,228,"Button
4,2",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(276,228,"Button
4,3",85,50,gr,"#000000","#ffff00","#000000"),
new TextButton(368,228,"Button
4,4",85,50,gr,"#000000","#ffff00","#000000")
]
];
}
function initSounds(){
clickSound = document.getElementById('clicksound');
}
function chooseButtonsForCard(){
//copy jargon into temp array
var tempArray = [];
for (var arrayctr=0;arrayctr<standardJargonList.length;arrayctr++){
tempArray.push(standardJargonList[arrayctr]);
}
for (var ctr1=0;ctr1<buttons.length;ctr1++){
for (var ctr2=0; ctr2<buttons[ctr1].length;ctr2++){
var randInt = Math.floor(Math.random()*tempArray.length);
buttons[ctr1][ctr2].text = tempArray[randInt];
tempArray.splice(randInt,1);
}
}
}
function drawScreen() {
//ConsoleLog.log("standardAcronymList="+standardAcronymList.length);
//ConsoleLog.log("standardJargonList="+standardJargonList.length);
for (var ctr1=0;ctr1<buttons.length;ctr1++){
ConsoleLog.log("ctr1="+ctr1)
for (var ctr2=0; ctr2<buttons[ctr1].length;ctr2++){
buttons[ctr1][ctr2].draw(context);
}
}
}
function onMouseClick(e) {
//select case through states and then the locations of
//buttons in those states
mouseX = e.clientX-theCanvas.offsetLeft;
mouseY = e.clientY-theCanvas.offsetTop;
ConsoleLog.log("click " + mouseX + "," + mouseY);
//find the button clicked
var col = Math.floor(mouseX/92);
var row = Math.floor(mouseY/57);
console.log("row",row,"col", col);
tempButton = buttons[row][col];
clickSound.play();
tempButton.pressDown();
tempButton.draw(context);
}
function onMouseMove(e) {
mouseX = e.clientX-theCanvas.offsetLeft;
mouseY = e.clientY-theCanvas.offsetTop;
}
//**** start application
var gr = context.createLinearGradient(0, 0, 85, 50);
//Add the color stops.
gr.addColorStop(0,'#ffffff');
gr.addColorStop(.5,'#bbbbbb');
gr.addColorStop(1,'#777777');
theCanvas.addEventListener("mousemove", onMouseMove, false);
theCanvas.addEventListener("click", onMouseClick, false);
initSounds();
initButtons();
initLists();
chooseButtonsForCard();
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px;">
<canvas id="canvas" width="570" height="418">
Your browser does not support HTML5 Canvas.
</canvas>
<audio id ="clicksound" preload="auto">
<source src="click.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>将此文件命名为bsbingo.html并保存在一个文件夹中。如果读者想跟随本书的步骤并创建一个示例工程，就要创建一个文件夹用于保存工程文件。