JAVA程序员笔记（第二阶段：前端）第8篇——JavaScript实现 轮播图 放大镜 本地存储cookie

本次是轮播图的简单实现，往后会更新 最终版
补充昨天的snake：

/**
 *
 * new SnakeGame().start() 激活游戏
 *      按下 空格键 开始游戏
 *      按下 方向键 移动蛇
 *
 * @param position : 设置游戏的窗口位置 默认 relative
 * @param screenWidth : 设置游戏的容器的宽度 默认200, 单位 px
 * @param screenHeight : 设置游戏的容器的高度 默认 200, 单位 px
 * @param border : 设置游戏容器的边框  默认 5px solid lightblue
 * @param margin : 设置游戏容器的外边距 默认 是  0
 * @constructor
 *
 */
function SnakeGame({
   position="relative", screenWidth=200, screenHeight=200, border="5px solid lightblue", margin="0" } = {
   }) {
   

    // 存放蛇身体的每一部分
    this.snake = [];

    this.spWidth = 20 ;

    this.screenWidth = screenWidth ;
    this.screenHeight = screenHeight ;

    this.rows = this.screenHeight / this.spWidth;
    this.cols = this.screenWidth / this.spWidth;

    this.playing = false ;// 默认没有开始游戏

    this.position = position;

    this.margin = margin ;

    this.border = border ;

}

SnakeGame.prototype = {
   
    /**
     * 初始化游戏窗口
     */
    initGame() {
   
        this.screen = document.createElement("div");
        // 设置 舞台定位方式为相对定位
        this.screen.style.position = this.position ;
        this.screen.style.width = `${
     this.screenWidth}px`;
        this.screen.style.height = `${
     this.screenHeight}px`;
        this.screen.style.border = this.border ;
        this.screen.style.margin = this.margin ;
        this.screen.style.fontSize = "0";
        // 设置 600个 小的单元格

        for (let i = 0; i < this.rows; i++) {
   

            for (let j = 0; j < this.cols; j++) {
   
                // 创建一个 span 标签
                let span = document.createElement("span");
                // 将 span 设置为 行内块
                span.style.display = "inline-block";
                span.style.width = `${
     this.spWidth - 1}px`;
                span.style.height = `${
     this.spWidth - 1}px`;
                span.style.borderRight = "1px solid #ddd"
                span.style.borderBottom = "1px solid #ddd"
                // 初始化 前三个 span ,添加一个 class ="sk" 代表 上方有蛇
                if (i == 0 && j < 3) {
   
                    span.classList.add("sk")
                }
                this.screen.append(span);
            }
        }
        // 初始化 三个 蛇身，假设 p 表示蛇身
        for (let i = 0; i < 3; i++) {
   
            let p = document.createElement("p");
            p.style.position = "absolute";
            p.style.width = "20px";
            p.style.height = "20px";
            p.style.background = "#000";
            p.style.top = 0;
            p.style.left = i * 20 + "px";

            // unshift 添加元素，保证最后的p 是蛇头
            this.snake.unshift(p);
            this.screen.appendChild(p);

        }

        // 随机生成 食物
        this.randomFood();

        //console.log(this.snake)

        this.spans = this.screen.querySelectorAll("span")

        document.body.appendChild(this.screen);
    },
    /**
     * 生成食物
     */
    randomFood() {
   
        // 获取 没有蛇的所有 span
        let spans = this.screen.querySelectorAll("span:not(.sk)");
        // console.log(spans)
        // 随机产生一个 0 ~ spans.length 的 索引
        let index = Math.floor(Math.random() * spans.length)

        // 获取随机产生的 span
        let span = spans[index];

        //console.log(span)
        // 动态创建一个 b 标签
        let tag = document.createElement("b");
        tag.style.display = "block";
        tag.style.width = "10px"
        tag.style.height = "10px";
        tag.style.margin = "5px";
        tag.style.backgroundColor = "#f00"
        tag.style.borderRadius = "50%"

        // 将生成的 b标签，添加到 span 中
        span.appendChild(tag);
    },
    /**
     * 开始游戏
     */
    start() {
   
        // 初始化游戏
        this.initGame();

        // 按下空格键，开始游戏 (绑定键盘事件)
        document.addEventListener("keydown", (event) => {
   
            // event.keyCode 获取按下的按键编码
            if (event.keyCode == 32 && !this.playing) {
   

                this.dir = "right"; // 默认方向

                // 开始游戏
                this.playing = setInterval(()=>{
   

                    // 获取 当前蛇头的位置
                    let sk = this.snake[0];

                    // 获取 距离父元素的位置
                    let left = sk.offsetLeft;
                    let tops = sk.offsetTop;

                    if (this.dir === "right") {
   
                        left += 20;
                    } else if (this.dir === "left") {
   
                        left -= 20;
                    } else if (this.dir === "top") {
   
                        tops -= 20;
                    } else if (this.dir === "down") {
   
                        tops += 20;
                    }
                    this.addSnake(left, tops)

                }, 300)
            } else if(this.playing && event.keyCode == 37 && this.dir !="right"){
   
                this.dir = "left";
            }else if(this.playing && event.keyCode == 38  && this.dir !="down"){
   
                this.dir = "top";
            }else if(this.playing && event.keyCode == 39  && this.dir !="left"){
   
                this.dir = "right";
            }else if(this.playing && event.keyCode == 40  && this.dir !="top"){
   
                this.dir = "down";
            }

        })

    },
    /**
     * 获取指定偏移量对应的索引位置
     */
    getIndex(left, tops) {
   

        let x = left/this.spWidth ;
        let y = tops/this.spWidth;

        return y * this.cols + x ;
    },
    /**
     * 结束游戏
     */
    gameOver() {
   
        alert("/(ㄒoㄒ)/~~GAME OVER!!!");
        // 停止轮询
        clearInterval(this.playing);

        // 游戏初始化
        // 删除舞台
        this.screen.remove();

        this.snake = [] ;
        this.playing = false ;
        this.dir = "right";

        // 初始化舞台
        this.initGame() ;
    },
    /**
     * 添加蛇头
     */
    addSnake(left, tops) {
   

        // 判断 蛇头是否超出了边界
        if (left >= this.screen.clientWidth || left <0 || tops < 0 || tops >= this.screen.clientHeight) {
   
            this.gameOver();
            return ;
        }


        // 生成一个 p 标签
        let p = document.createElement("p");
        p.style.position = "absolute";
        p.style.width = `${
     this.spWidth}px`;
        p.style.height = `${
     this.spWidth}px`;
        p.style.background = "#000";
        p.style.top = tops + "px";
        p.style.left = left + "px";


        // 找到 新添加的 蛇头对应的 span, 添加一个 class = "sk"
        // 获取 span
        let index = this.getIndex(left, tops)
        let span = this.spans[index];

        // 判断 该 span 上是否有食物
        let b = span.querySelector("b")

        if (b ==null) {
    // 没有食物，删除蛇尾
            // 移除蛇尾
            let p2 = this.snake.pop()
            left = p2.offsetLeft ;
            tops = p2.offsetTop ;

            index = this.getIndex(left, tops)
            let span2 = this.spans[index];
            span2.classList.remove("sk")
            // 从屏幕中移除蛇尾
            p2.remove();
        }

        // 判断 蛇头出现的位置上是否右 sk
        if (span.classList.contains("sk")) {
   
            this.gameOver();
            return ;
        }
        // 将蛇头
        span.classList.add("sk")
        // unshift 添加元素，保证最后的p 是蛇头
        this.snake.unshift(p);
        this.screen.appendChild(p);

        if(b !=null) {
    //
            b.remove();
            // 随机产生新食物
            this.randomFood();
        }

    }
}

js-轮播图的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>