本次是轮播图的简单实现,往后会更新 最终版
补充昨天的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>