前端之JS起步 -- 猜数小游戏
前端之JS起步
- 前提
- 程序员思维
- 简易版“猜数字”游戏
- 代码
-
- 函数
- 事件监听
- 循环 loop
-
- 输出百以内的素数
- let 和 var 之间的区别
- 错误
- 我的猜数游戏
- 我的猜数游戏(真·自己写的·改进版)
前提
常量用于存储不希望更改的数据，用关键字 const 创建，本例中用常量来保存对界面元素的引用。界面元素的文字可能会改变，但引用是不变的。
程序员思维
- 程序运行的目的,
- 为达目的应选定的代码类型，
- 以及如何使这些代码协同运行。
简易版“猜数字”游戏
游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否，如果出错了，则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对，或者用尽所有机会，游戏将结束。游戏结束后，可以让玩家选择再次开始。
改进:
输入之后回车确定
游戏结束后, 空格重新开始
代码
结构:
DOCTYPE html>
<html lang="zh-cmn-Hans">
<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>
<link rel="stylesheet" href="./styles/js-number-guess-game.css">
head>
<body>
<h1>猜数字游戏h1>
<p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。p>
<div class="form">
<label for="guessField">请猜数: label>
<input type="text" id="guessField" class="guessField">
<input type="submit" value="确定" class="guessSubmit">
div>
<div class="resultParas">
<p class="guesses">p>
<p class="lastResult">p>
<p class="lowOrHi">p>
div>
<script src="./scripts/js-number-guess-game.js">script>
body>
html>
样式:
<style>
html {
font-family: sans-serif, '黑体';
}
body {
width: 50%;
max-width: 800px;
margin: 0 auto;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.5;
background: url('../images/bg.png');
background-position-x: 50%;
background-position-y: 25%;
background-attachment: fixed;
}
h1 {
text-align: center;
text-shadow: 1px 1px 1px blue, 3px 3px 1px blue;
}
@media screen and (max-width:768px) {
body {
width: 98%;
margin: 0 auto;
font-size: 1.5rem;
}
}
style>
行为:
/**
* 添加保留数据的变量;
*/
// 随机1到100, 向下取整.
let randomNumber = Math.floor(Math.random() * 100) + 1;
// 定义常量 -- 保存对界面元素的引用
// 结果
const guesses = document.querySelector('.guesses'); //之前猜的数
const lastResult = document.querySelector('.lastResult'); //上次是对还是错
const lowOrHi = document.querySelector('.lowOrHi'); //上次高了还是低了
// 猜测
const guessSubmit = document.querySelector('.guessSubmit'); //提交
const guessField = document.querySelector('.guessField'); //输入这次猜的数
// 猜测次数, 开启新游戏按钮
let guessCount = 1;
let resetButton;
// 函数:猜数
function checkGuess() {
let userGuess = Number(guessField.value); //取出玩家输入的数
if (guessCount === 1) { //第一次输入数字
guesses.textContent = '上次猜的数：'; //初始化猜数过程记录的开头
}
guesses.textContent += userGuess + ' '; //更新猜数过程记录
// 判断
if (userGuess === randomNumber) {
lastResult.textContent = '恭喜你！猜对了';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
} else {
lastResult.textContent = '你猜错了！';
lastResult.style.backgroundColor = 'red';
if (userGuess < randomNumber) {
lowOrHi.textContent = '你猜低了！';
} else if (userGuess > randomNumber) {
lowOrHi.textContent = '你猜高了';
}
}
// 判断出错, 猜测次数+1, 猜数数字清空, 将焦点赋予猜数的输入框
guessCount++;
guessField.value = '';
guessField.focus();
}
// 事件监听
guessSubmit.addEventListener('click', checkGuess);
// 函数: 游戏结束
function setGameOver() {
guessField.disabled = true; //输入框,确定按钮不可选中
guessSubmit.disabled = true;
resetButton = document.createElement('button'); //添加一个新按钮 -- 开始新游戏
resetButton.textContent = '开始新游戏';
document.body.appendChild(resetButton); //放到内容的结尾
resetButton.addEventListener('click', resetGame); //设置监听
}
// 函数: 开始新游戏
function resetGame() {
guessCount = 1; //次数重设为1
// 提示重设
const resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0; i < resetParas.length; i++) {
resetParas[i].textContent = '';
}
// 删除重新开始按钮
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
// 重新生成一个数
randomNumber = Math.floor(Math.random() * 100) + 1;
}
函数
函数是可复用的代码块，可以一次编写，反复运行，从而节省了大量的重复代码。
事件监听
// 事件监听
guessSubmit.addEventListener('click', checkGuess);
界面元素 guessSubmit 被点击时, 执行 checkGuess .
循环 loop
for (起始值; 循环条件; 增加器) { 循环代码; }
输出百以内的素数
function f() {
var k;
var res = "";
for (let i = 2; i < 101; i++) {
k = 0;
for (let j = 2; j <= Math.sqrt(i); j++) {
if (i % j === 0) {
k = 1;
break;
}
}
if (k === 0) {
res += i + " ";
}
}
console.log(res);
}
f();
let 和 var 之间的区别
1.作用域不同:
var是函数作用域，let是块作用域。
在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的
而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的.
2.let不能在定义之前访问该变量，但是var可以。
let必须先声明，再使用。而var先使用后声明也行，只不过直接使用但没有定义的时候，其值是undefined.
重点:var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined.
我的尝试:
var a = 10;
f();
alert(a);
function f() {
alert(a);
var a = 0;
alert(a);
}
输出结果:
undefined
0
10
好似js的执行顺序是这样的:
function f() {
alert(a);
var a = 0;
alert(a);
}
f();
var a = 10;
alert(a);
有种函数的声明和使用都在最前面的样子.
错误
1.语法错误, 函数名错误 – 大小写错误, 获取元素对象时少用了点.
2.逻辑错误,
Math.random() 随机范围是[0, 1)
我的猜数游戏
disabled input禁止输入.
guess.focus(); 焦点在…上.
网页实例(这是编写边抄的)
我的猜数游戏(真·自己写的·改进版)
好工具一定要分享给最好的朋友，ProcessOn助您和好友一起高效办公！各位大大帮帮忙, 这东西挺好用的.
网页实例(这是一大早起来, 思路贼清晰的时候写的: 改进: 1. 确定绑定回车; 2. 开始新游戏绑定空格 ; 3. 加了背景图片)