丑憨批的html实战
生活随笔
收集整理的這篇文章主要介紹了
丑憨批的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实战的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： string笔记
- 下一篇： 关于无法下载sklearn中的MNIST