前端之JS起步 -- 猜数小游戏

前端之JS起步

  • 前提
  • 程序员思维
  • 简易版“猜数字”游戏
  • 代码
    • 函数
  • 事件监听
  • 循环 loop
    • 输出百以内的素数
    • let 和 var 之间的区别
  • 错误
  • 我的猜数游戏
  • 我的猜数游戏(真·自己写的·改进版)

前提

常量用于存储不希望更改的数据,用关键字 const 创建,本例中用常量来保存对界面元素的引用。界面元素的文字可能会改变,但引用是不变的。

程序员思维

  • 程序运行的目的,
  • 为达目的应选定的代码类型,
  • 以及如何使这些代码协同运行。

简易版“猜数字”游戏

游戏应随机选择一个 100 以内的自然数, 然后邀请玩家在 10 轮以内猜出这个数字。每轮后都应告知玩家的答案正确与否,如果出错了,则告诉他数字是低了还是高了。并且应显示出玩家前一轮所猜的数字。一旦玩家猜对,或者用尽所有机会,游戏将结束。游戏结束后,可以让玩家选择再次开始。

前端之JS起步 -- 猜数小游戏_第1张图片
改进:
输入之后回车确定
游戏结束后, 空格重新开始

代码

结构:

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(); 焦点在…上.

网页实例(这是编写边抄的)

我的猜数游戏(真·自己写的·改进版)

前端之JS起步 -- 猜数小游戏_第2张图片
好工具一定要分享给最好的朋友,ProcessOn助您和好友一起高效办公!各位大大帮帮忙, 这东西挺好用的.

网页实例(这是一大早起来, 思路贼清晰的时候写的: 改进: 1. 确定绑定回车; 2. 开始新游戏绑定空格 ; 3. 加了背景图片)

你可能感兴趣的:(前端基础,javascript,前端,html)