@[TOC](使用 html css 和 js 编写贪吃蛇 (简洁版))
这里是样式布局 (css)
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 600px;
margin: 0 auto;
position: relative;
border: 1px solid #ccc;
}
.gcs_sw{
width: 18px;
height: 19px;
position: absolute;
z-index: 201;
border:1px solid #900;
}
.gcs_header{
width: 20px;
height: 21px;
background-color: blue;
position: absolute;
left: 20px;
top: 0px;
z-index: 101;
}
.gcs_header>span{
display: block;
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
}
.gcs_wb{
width: 20px;
height: 21px;
background-color:#0ff;
position: absolute;
z-index:100;
}
.gcs_bj{
width: 20px;
height: 20px;
position: absolute;
}
.gcs_bj_js {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.gcs_bj_os {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
</style>
这里是结构 (html)
<div class="box">
<div class="gcs_header"></div>
<div class="gcs_wb"></div>
<div class="gcs_wb"></div>
</div>
这里才是这个贪吃蛇的主要核心 (js)
window.onload = function() {
(function() {
let numindex = 20,
box = document.getElementsByClassName('box')[0],
bjsl = parseInt(box.clientWidth / numindex),
i = 0,
j = 0,
gs = parseInt(box.clientHeight / numindex),
html = '';
html = box.innerHTML;
// 这里是布局数量
function _bjsl() {
for (j = 0; j < gs; j++) {
for (i = 0; i < bjsl; i++) {
let div = document.createElement('div');
div.style.left = i * numindex + 'px';
div.style.top = j * numindex + 'px';
if (i % 2 == 0) {
div.className = 'gcs_bj gcs_bj_os';
} else if (i % 2 != 0) {
div.className = 'gcs_bj gcs_bj_js';
}
// 将元素添加到页面上
box.appendChild(div);
}
}
}
_bjsl();
// 创造实例对象
class Greedysnake {
constructor() {
}
// 初始化
init() {
// 移动的位置
this.move = 'right';
// arr 数据
// done 左边和右边的
this.donel = false;
this.doner = true;
// done 上边和下边的
this.donet = true;
this.doneb = true;
this.arr = [{
left: 0,
top: 0
}];
}
// 创造标签
Createlabel() {
let div, zb, zbarr;
// 调用随机位置的函数 拿坐标
zb = this.random();
// 然后截取出来
zbarr = zb.split(',');
// 创造元素
div = document.createElement('div');
div.className = 'gcs_sw';
div.style.left = zbarr[0] + 'px';
div.style.top = zbarr[1] + 'px';
this.color = this.randomColor();
div.style.backgroundColor = this.color;
box.appendChild(div);
}
// 键盘事件
Key() {
document.onkeydown = event => {
let e = event || window.event,
// 获取键盘数码
arr = [37, 38, 39, 40],
num = 0;
// 判断键盘码数
// 这里判断 移动的方向
switch (e.keyCode) {
case arr[num]:
if (this.donel) {
this.move = 'left';
this.doner = false;
this.donet = true;
this.doneb = true;
}
break;
case arr[num = 1]:
if (this.donet) {
this.move = 'top';
this.doner = true;
this.donel = true;
this.doneb = false;
}
break;
case arr[num = 2]:
if (this.doner) {
this.move = 'right';
this.donel = false;
this.donet = true;
this.doneb = true;
}
break;
case arr[num = 3]:
if (this.doneb) {
this.move = 'bottom';
this.donet = false;
this.donel = true;
this.doner = true;
}
break;
}
}
}
// 贪吃蛇移动
gcsmove() {
this.timer = null;
let dom, dom2, wzindex;
dom2 = document.getElementsByClassName('gcs_header')[0];
this.arr.push({
left: dom2.offsetLeft,
top: dom2.offsetTop
});
clearInterval(this.timer);
this.timer = setInterval(() => {
dom = Array.from(document.getElementsByClassName('gcs_wb'));
dom.forEach((item, index) => {
item.setAttribute('index', index + 1);
item.style.left = this.arr[this.arr.length - item.getAttribute(
'index')].left + 'px';
item.style.top = this.arr[this.arr.length - item.getAttribute(
'index')].top + 'px';
// 获取坐标
});
this.movejl(this.move, dom2);
this.arr.push({
left: dom2.offsetLeft,
top: dom2.offsetTop
});
this.zjc(dom2);
// 自己吃自己
this.gcssw(dom2);
// 判断移动距离和食物的距离
this.pd(dom2);
}, 150);
}
// 判断移动的距离
movejl(move, dom2) {
if (move == 'left') {
dom2.style.left = dom2.offsetLeft - numindex + 'px';
}
if (move == 'top') {
dom2.style.top = dom2.offsetTop - numindex + 'px';
}
if (move == 'right') {
dom2.style.left = dom2.offsetLeft + numindex + 'px';
}
if (move == 'bottom') {
dom2.style.top = dom2.offsetTop + numindex + 'px';
}
}
// 判断移动的距离不能超出他父亲的区域内
pd(dom2) {
// 判断
if (dom2.offsetLeft > box.clientWidth - numindex || dom2.offsetTop > box.clientHeight -
numindex) {
// 停掉定时器
clearInterval(this.timer);
alert('你个傻狗这都不行，拉跨');
// 初始化
this.hy();
}
if (dom2.offsetLeft < 0 || dom2.offsetTop < 0) {
// 停掉定时器
clearInterval(this.timer);
alert('你个傻狗这都不行，拉跨');
// 初始化
this.hy();
}
// 判断贪吃蛇的长度 如果大于要求 初始化
let dom = document.getElementsByClassName('gcs_wb');
if (dom.length >= 30 + 1) {
// 停掉定时器
clearInterval(this.timer);
alert('你徐然赢了，你还是没我强');
// 初始化
this.hy();
}
}
// 自己吃自己判断
zjc(dom) {
let wb = document.getElementsByClassName('gcs_wb');
for (let item of wb) {
if (item.offsetLeft == dom.offsetLeft && item.offsetTop == dom.offsetTop) {
alert('你个傻狗连自己都吃，傻狗');
// 停掉定时器
clearInterval(this.timer);
// 初始化
this.hy();
}
}
}
// 判断移动距离和食物的距离
gcssw(dom2) {
let dom = document.getElementsByClassName('gcs_sw')[0];
// 判断如果移动他的坐标如果和食物的距离相同就删除元素
if (dom2.offsetLeft == dom.offsetLeft && dom2.offsetTop == dom.offsetTop) {
// 克隆这个元素
let dom3 = dom.cloneNode(true);
dom.remove();
// 调用 创造元素 传参过去
this.childrens(dom3);
this.color = this.randomColor();
// 调用添加食物
this.Createlabel();
}
}
// 初始化
hy() {
box.innerHTML = html;
// 初始box盒子的内容
_bjsl();
// 布局
this.init();
// 初始化
this.Createlabel();
this.Key();
this.gcsmove();
}
// 添加元素
childrens(dom) {
// 获取 数量
let gcs_wbs = document.getElementsByClassName('gcs_wb').length + 2;
// 起的名字
dom.className = 'gcs_wb';
// dom.style.backgroundColor = color;
// 根据数量 获取数据
dom.style.left = this.arr[this.arr.length - gcs_wbs].left + 'px';
dom.style.top = this.arr[this.arr.length - gcs_wbs].top + 'px';
// 获取坐标
box.appendChild(dom);
}
// 随机位置
random() {
// 固定位置内随机拿坐标 切记 坐标必须是 偶数
let x = box.clientWidth / numindex,
y = box.clientHeight / numindex,
xs = Math.floor(Math.random() * x) * numindex,
ys = Math.floor(Math.random() * y) * numindex;
// 然后返回出去
return `${xs}${','}${ys}`;
}
randomColor() {
let res = '1234567890abcdef';
let color = "#";
for (let i = 0; i < 6; i++) {
color += res[Math.floor(Math.random() * res.length)];
};
return color;
}
}
let f = new Greedysnake();
f.init();
f.Createlabel();
f.Key();
f.gcsmove();
})();
}
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
