学习内容
canvas开发猜数字游戏
主要内容
首先呢打开编辑器（我习惯用vs code，如果有好用的大佬们可以给推荐推荐）
HTML
新建个html文件，里面写上基础的html页面，body里放一个canvas标签（大佬们我就不多BB了，直接上代码）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜字母</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
display: block;
}
</style>
<script src="./js/canvasGuess.js" defer></script>
</head>
<body>
<canvas id="canvasOne" width="800" height="800">您的浏览器不支持Canvas请换一个吧</canvas>
</body>
</html>
JS
通过js去判断是否猜中选中的字母，已经猜的次数，猜过的字母以及在画布上显示出来对应提示的文字
主要用到的技术
通过getElementById获取到canvas的dom
var theCanvas = document.getElementById("canvasOne")
通过dom.getContext('2d')来创建一个可操作的2D环境，(提示：在未来，如果 canvas 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。)
var context = theCanvas.getContext('2d')
之后通过context的各种属性去在页面上去干各种骚操作就可以了，用到的属性如下所示
1.fillStyle设置或返回用于填充绘画的颜色、渐变或模式。(这边只用到设置颜色)
2.fillRect(x,y,width,height)绘制一块带着颜色的矩形（默认是黑色背景，fillStyle得在他前面先设置颜色，先选色后绘制）
3.font设置字体属性
4.fillText('文字',x,y) (如果字体想添加颜色同矩形)
顾某：思路呢就是通过监听windows的键盘事件去获取按下去的键，之后判断是否是为选中的那一个，选中就game over，没选中就记录按下的键是哪个，并且次数加1，比较按下的和选中的字母在数组的下标去判断是大了还是小了
js代码
window.addEventListener('load',eventWindowLoaded,false)
function eventWindowLoaded(){
canvasApp()
}
// canvas主体
function canvasApp(){
if(!canvasSupport){
return ;
}
console.log("调用canvas")
var theCanvas = document.getElementById("canvasOne")
// 创建环境
var context = theCanvas.getContext('2d')
// 游戏变量
var guesses = 0; //猜的次数
var message = "请猜a-z之间的字母"; //提示
//字母
var letters = [
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o",
"p","q","r","s","t","u","v","w","x","y","z"
];
var today = new Date(); //时间没有任何实际性作用
var letterToGuess = ""; //当前秘密字母
var higherOrLower = ""; //提示文本
var lettersGuessed; //猜过的字母合计
var gameOver = false; //游戏是否结束
var letterIndex = 0;
initGame()
// 初始化游戏
function initGame(){
console.log('init')
letterIndex = Math.floor(Math.random()*letters.length)
letterToGuess = letters[letterIndex]
console.log(letterToGuess)
guesses = 0
lettersGuessed = []
gameOver = false
window.addEventListener("keydown",eventKeyPress,true)
drawScreen()
}
function drawScreen(){
// 填充色
context.fillStyle = "#ffffaa";
// 绘制区域
context.fillRect(0, 0, 500, 500);
context.textBaseline = "top";
//日期
context.fillStyle = "#000000";
context.font = "10px Sans-Serif";
context.fillText(today, 10 ,20);
//消息
context.fillStyle = "#FF0000";
context.font = "14px Sans-Serif";
context.fillText(message,10,50);
//猜测的次数
context.fillStyle = "#109910";
context.font = "16px Sans-Serif";
context.fillText('次数: ' + guesses, 215, 50);
//显示Higher或Lower
context.fillStyle = "#000000";
context.font = "16px Sans-Serif";
context.fillText("大或小: " + higherOrLower, 10,85);
//猜过的字母
context.fillStyle = "#FF0000";
context.font = "16px Sans-Serif";
context.fillText("猜过的字母: " + lettersGuessed.toString(), 10, 110);
if (gameOver){
context.fillStyle = "#FF0000";
context.font = "24px Sans-Serif";
context.fillText("恭喜您猜对了就是"+letterToGuess+"，撒花", 10, 180);
}
}
// 键盘事件
function eventKeyPress(e){
if(!gameOver){
var letterPressed = String.fromCharCode(e.keyCode)
letterPressed = letterPressed.toLowerCase()
guesses+=1
lettersGuessed.push(letterPressed)
if(letterPressed == letterToGuess){
gameOver = true
} else {
var guessIndex = letters.indexOf(letterPressed)
if(guessIndex < 0){
higherOrLower = "请输入字母";
} else if(guessIndex > letterIndex){
higherOrLower = '大了'
} else {
higherOrLower = '小了'
}
}
drawScreen()
}
}
}
// 判断浏览器是否支持canvas
function canvasSupport (){
return !!document.createElement('canvas').getContext;
}
遇上的问题
调整fillRect的width和height这个渲染出来的矩形大小就是不太对
原因：因为canvas是具有一个默认的宽高比例（即300：150），导致里面设置的宽高问题
解决：canvas标签设置一下width和height属性就ok了
效果展示
顾言顾语
第一次写文章，如有不足之处望各位海涵，多批评指正。
