丑憨批的html实战

青盟科技

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>贪吃蛇</title>
</head>
<style>* {margin: 0;padding: 0;}#container {width: 1038px;height: 650px;background: gray;/* 上下为0 左右自动 块元素具中 */margin: 0 auto;position: relative;}#maper {width: 631px;height: 421px;background: rgb(237, 237, 247);position: absolute;left: 90px;top: 140px;}#map-bg {/* 边框合并 */border-collapse: collapse;}#map-bg td {width: 20px;height: 20px;border: 1px solid brown;}.snake {width: 20px;height: 20px;background: rgb(145, 145, 214);position: absolute;top: 64px;/* left: 0; */}.food {width: 20px;height: 20px;background: yellow;position: absolute;}#controler {width: 196px;height: 500px;/* background: green; */position: absolute;left: 800px;top: 100px;/* 行级元素居中 用父元素 */text-align: center;}/* #con1{width: 178px;height: 52px;background: rgb(46, 71, 109);}#con2{width: 178px;height: 52px;background: rgb(46, 71, 109);}#con3{width: 178px;height: 52px;background: rgb(46, 71, 109);}#con4{width: 178px;height: 52px;background: rgb(46, 71, 109);} */#controler button {width: 178px;height: 52px;background: rgb(46, 71, 109);margin-bottom: 20px;border: 0;}#speed {width: 196px;height: 204px;background: rgb(46, 71, 109);}
</style><body><div id="container"><div id="maper"><table id="map-bg"><!-- js动态插格子 --><!-- <tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr> --></table><!-- snake --><!-- <div class="snake"></div><div class="snake"></div><div class="snake"></div><div class="food"></div> --></div><div id="controler"><button id="con1">开始</button><button id="con2">设置</button><button id="con3">退出</button><button id="con4">帮助</button><div id="speed">速度</div></div></div><script>var ofood;var direction = 'right';var timeee;var obtnstrart = document.getElementById('con1');var omappanel = document.getElementById('maper');var omaptable = document.getElementById('map-bg');///1.初始化地图for (var row = 0; row < 20; row++) {var oTr = document.createElement('tr');for (var col = 0; col < 30; col++) {var oTd = document.createElement('td');oTr.appendChild(oTd);}omaptable.appendChild(oTr);}///2.初始化蛇var snakeBody = [];for (var i = 2; i >= 0; i--) {var oDiv = document.createElement('div');oDiv.className = 'snake';oDiv.style.left = 1 + i * 21 + 'px';oDiv.pos = {left: i * 20 + i + 1,top: 64};omappanel.appendChild(oDiv);snakeBody.push(oDiv);}// console.log(snakeBody);// 3.初始化食物function produceFood() {do {var bFlag = true; ///是否合格///生成坐标var iLeft = parseInt(Math.random() * 30);iLeft = iLeft * 21 + 1;var iTop = parseInt(Math.random() * 20);iTop = iTop * 21 + 1;for (i = 0; i < snakeBody.length; i++) {if (snakeBody[i].offsetLeft == iLeft && snakeBody.offsetTop == iTop) {bFlag = false;}}ofood = document.createElement('div');ofood.className = 'food';ofood.style.top = iTop + 'px';ofood.style.left = iLeft + 'px';ofood.pos = {left: iLeft,top: iTop}omappanel.appendChild(ofood);} while (!bFlag);}produceFood();function snakeMove() {///蛇移动代码if (direction == 'down') {var snakehead = snakeBody[0];snakehead.style.top = snakehead.offsetTop + 21 + 'px';}if (direction == 'right') {var snakehead = snakeBody[0];snakehead.style.left = snakehead.offsetLeft + 21 + 'px';}if (direction == 'left') {var snakehead = snakeBody[0];snakehead.style.left = snakehead.offsetLeft - 21 + 'px';}if (direction == 'up') {var snakehead = snakeBody[0];snakehead.style.top = snakehead.offsetTop - 21 + 'px';}///吃食物if (snakehead.offsetLeft == ofood.offsetLeft && snakehead.offsetTop == ofood.offsetTop) {ofood.className='snake';// snakeBody.push(ofood);ofood.style.left=snakehead.pos.left+'px';ofood.style.top = snakehead.pos.top + 'px';snakeBody.splice(1, 0, ofood);produceFood();} else {for (var i = 1; i < snakeBody.length; i++) {// console.log(snakeBody[i].offsetLeft)snakeBody[i].style.left = snakeBody[i - 1].pos.left + 'px';snakeBody[i].style.top = snakeBody[i - 1].pos.top + 'px';// snakeBody[i].style.left=snakeBody[i].style.left+21+'px';}}///蛇移动后的当前位置记录更新for (var i = 0; i < snakeBody.length; i++) {snakeBody[i].pos.left = snakeBody[i].offsetLeft;snakeBody[i].pos.top = snakeBody[i].offsetTop;}///蛇吃自己for(var i=4;i<snakeBody.length;i++){if(snakehead.offsetLeft==snakeBody[i].offsetLeft&&snakehead.offsetTop==snakeBody[i].offsetTop){alert('失败了');clearInterval(timeee);}}///奢侈边界if(snakehead.offsetLeft<-20||snakehead.offsetLeft>631||snakehead.offsetTop<-20||snakehead.offsetTop>421){alert('失败了');clearInterval(timeee);}}obtnstrart.onclick = function () {if (!timeee) {timeee = setInterval(function () {snakeMove();}, 300);}}document.onkeydown = function (e) {e = e || window.event;var key = e.which || e.keyCode;if (key == 40) {///xiaif (direction != 'up')direction = 'down';// var snakehead=snakeBody[0];// snakehead.style.top=snakehead.offsetTop+21+'px';} else if (key == 39) {if (direction != 'left')direction = 'right';}else if (key == 38) {if (direction != 'down')direction = 'up';}else if (key == 37) {if (direction != 'right')direction = 'left';}snakeMove();}</script>
</body></html>

丑憨批的html实战相关推荐

丑憨批的爬虫笔记6实例
0.中国大学排名定向爬虫 http://www.zuihaodaxue.cn/zuihaodaxuepaiming2016.html 可行性: http://www.zuihaodaxue.cn/ro ...
丑憨批的爬虫笔记5信息标记与提取
0.信息标记的三种形式信息标记的作用 HTML:超文本标记种类:3种 XML 无内容则一个尖括号 Json Yaml 用缩进表达从属关系,-表示并列关系 1.三种信息标记形式的比较 2.信息提取的 ...
丑憨批的爬虫笔记4BeautifulSoup4
pip install beautifulsoup4 https://python123.io/ws/demo.html 使用方法参数:1.html信息2.解析器 import requests r ...
丑憨批的html笔记
html语法基础 h1#idid${itme$}*3 <!DOCTYPE html> <html lang="en"> <head><me ...
丑憨批的爬虫笔记3（实例）
1.京东商品: import requestsdef getHTMLText(url):try:r=requests.get(url)r.raise_for_status()r.encoding=r. ...
丑憨批的爬虫笔记2（爬虫引发的问题+robots协议）
去搜 user-agent!!!! referer!!!!! 网页中怎么查看请求头header信息点一下Name里的东西就会出来规模大小分类 robots协议 User-agent: * /// ...
丑憨批的爬虫笔记1（导学+requests））
the website is the API Requests robots.txt beautiful soup projects 正则表达式 Scrapy 12单元 4个实例工具:IDLE,Su ...
丑憨批的NLP笔记BERT前置：ATUO encoder，DAE
ATUOEncoder 深度学习:什么是自编码器(Autoencoder) DAE 降噪自动编码器(Denoising Autoencoder)
丑憨批的vector笔记
上网统计 "在线自闭,是输出出的问题,别用cout string" #include <iostream> #include<bits/stdc++.h> ...

丑憨批的html实战

青盟科技

丑憨批的html实战相关推荐

最新文章

热门文章