Примеры в этой статье делятся с вами демонстрацией игры JS Snake, которая выполняется исключительно JS и CSS для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html> <meta charset = "utf-8"> <head> <style>*{margin: 0; Padding: 0;} .content {position: Absolute; Ширина: 500px; Высота: 500px; Фоно-цвета: #212121; } .colo {width: 48px; Высота: 48px; фоновый цвет: #e6e6e6; Граница: 1PX SOLID #466F85; Плавание: осталось; } .Head {/*founal-color: #49df85;*/founal-image: url (./ img/22.jpg); граница радий: 10px; Разовый размер: 100%; позиция: абсолютно; Высота: 48px; Ширина: 48px; } .fruit {/*founal-color: #49df85;*/founal-image: url (./ img/fruit.jpg); Разовый размер: 100%; позиция: абсолютно; Высота: 48px; Ширина: 48px; } .score {font-family: 'bold'; Слева: 600px; позиция: абсолютно; Высота: 50px; Ширина: 200px; Фоно-цвета: #212121; Цвет: #fff; } .newbody {position: Absolute; Ширина: 48px; Высота: 48px; Справочный Image: URL (./ IMG/33.JPG); Разовый размер: 100%; } .btn {font-family: 'bold'; Слева: 600px; Верх: 100px; позиция: абсолютно; Высота: 50px; Ширина: 100px; фоновый цвет: #1193ff; Цвет: #fff; Текст-альбом: Центр; высота линии: 50px; размер шрифта: 20px; курсор: указатель; граница-радий: 15px; } </style> </head> <body> <div id = "content"> </div> <div Id = "Stop"> Stop The Game </div> <div style = "top: 180px" id = "start"> запустить игру </div> <div style = "top: 380px" id = "gameway"> ware: </d div> <div = "chock"> chock: <p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p> </p>. type = "text/javascript"> // Добавить статус var stop = document.getElementById ('stop'); var start = document.getElementbyId ("start"); var Gameway = document.getElementById ('gameway'); start.onclick = function () {head.value = '2'; инцидент = setInterval (move, 200);} stop.onclick = function () {clearInterval (инцидент);} // var content = document.getElementbyId ("content"); for (var i = 0; i <100; i ++) {var div = document.createElement ("div"); div.classname = "colo"; content.appendchild (div); } var chall = document.getElementById ("оценка"); var scorenum = 0; var scorecon = document.createElement ("p"); // var scoretext = document.createTextnode (scorenum); // scorecon.appendchild (scoreText); scord.appendchild (scorecon); var head = null; // Сохранить голову змеи var fruit = null; // Сохранить фрукты var dir = null; // Сохранить направление корпуса змеи var = new Array (); // Сохранить добавленную часть тела змеи var bodynum = 0; // Записывают, сколько тел создано // Случайно создавать головку и фрукты в функцию содержимого CreateType (type) {if (type == 1) {// Создать случайное число var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); head = document.createElement ("div"); Head.className = "Head"; head.style.top = row*50+"px"; head.style.left = col*50+"px"; Content.appendChild (Head); // head.style.top =; // head.style.left =; } if (type == 2) {// Создать случайное число var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); Fruit = document.createElement ("div"); Fruit.classname = "Fruit"; Fruit.style.width = "50"; Fruit.style.height = "50"; Fruit.style.backgroundcolor = "#ea2000"; Fruit.style.top = row*50+"px"; Fruit.style.left = col*50+"px"; Content.appendChild (фрукты); }} // Вызовите созданный метод предложения CreateType (1); CreateType (2); // Функция движения головки змеи var direction = new Array; // Сохранить направление каждого вновь созданного корпуса // Номер преобразования var numss = 0; // Автоматическая функция события скольжения ove () {if (head.value! = "") {Switch (head.value) {case '1': head.style.top = head.offsettop-50+"px"; перерыв; case '2': head.style.top = head.offsettop+50+"px"; перерыв; case '3': head.style.left = head.offsetleft-50+"px"; перерыв; case '4': head.style.left = head.offsetleft+50+"px"; перерыв; }} console.log (head.offsettop); if (head.offsettop> 500) {alert («Превышайте границу! Пожалуйста, воспроизводите»); } // if (head == null) {// if (head.style.top <0 || head.style.top> 500 || head.style.left <0 || head.style.left> 500) {// alert («превзойти границу! Пожалуйста, воспроизводите»); //} if (body.length! = 0) {for (var i = body.length-1; i> = 0; i-) {if (i == 0) {body [0] .value = head.value; } else {body [i] .value = body [i-1] .value; }}} // преобразовать направление // Если событие после фрукта успешно съедено, если (head.style.top == fruit.style.top && head.style.left == fruit.style.left) {var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); Fruit.style.top = row*50+"px"; Fruit.style.left = col*50+"px"; // запись Scorenum = Scorenum+1; document.getElementsbytagname ('p') [0] .innerText = ""; document.getElementsbytagname ('p') [0] .innerText = scorenum; // Создать часть тела BodyAdd (head.style.top, head.style.left, head.value); } // Управление телом, чтобы следовать части движения головы // Когда у вас есть тело, вы должны динамически изменить значение тела, если (body.length> 0) {var body01 = document.getElementbyId ('body01'); body01.style.top = head.offsettop+"px"; body01.style.left = head.offsetleft+"px"; switch (head.value) {case '1': body01.style.top = head.offsettop+50+"px"; body01.style.left = head.offsetleft+"px"; перерыв; case '2': body01.style.top = head.offsettop-50+"px"; body01.style.left = head.offsetleft+"px"; перерыв; Case '3': body01.style.left = head.offsetleft+50+"px"; body01.style.top = head.offsettop+"px"; перерыв; Case '4': body01.style.left = head.offsetleft-50+"px"; body01.style.top = head.offsettop+"px"; перерыв; }} if (body.length> 1) {body [bodynum-1] .value = body [bodynum-2] .value; for (var i = 1; i <body.length; i ++) {var nu = i+1; var BodyId = document.getElementById ('body0'+nu); var Body_id = document.getElementById ('body0'+i); BodyId.Style.top = body_id.OffSetTop+"px"; BodyId.Style.left = body_id.OffSetleft+"px"; Switch (body [bodynum- (body.length-i)]. BodyId.Style.left = body_id.OffSetleft+"px"; перерыв; case '2': bodyId.Style.top = body_id.offsettop-50+"px"; BodyId.Style.left = body_id.OffSetleft+"px"; перерыв; Case '3': bodyId.Style.left = body_id.OffSetleft+50+"px"; BodyId.Style.top = body_id.OffSetTop+"px"; перерыв; case '4': bodyid.style.left = body_id.offsetleft-50+"px"; BodyId.Style.top = body_id.OffSetTop+"px"; перерыв; }}}} // Создать время кнопки Document.onkeydown = function () {var code = event.keycode; Switch (code) {// up case 38: head.value = '1'; перерыв; // Down Case 40: Head.value = '2'; перерыв; // левый случай 37: head.value = '3'; перерыв; // случай 39 справа: head.value = '4'; перерыв; console.log (head.value); }} // Увеличение тела функции события BodyAdd (вверху, слева, Dir) {if (dir! = ") {Dir = dir; } else {dir = head.value; } // Создать тело в первый раз if (bodynum == 0) {var newbody = document.createElement ('div'); newbody.classname = "newbody"; newbody.id = "body01"; Switch (dir) {case '1': newbody.style.top = head.offsettop-50+'px'; newbody.style.left = head.offsetleft+"px"; перерыв; case '2': newbody.style.top = head.offsettop+50+'px'; newbody.style.left = head.offsetleft+"px"; перерыв; case '3': newbody.style.left = head.offsetleft-50+'px'; newbody.style.top = head.offsettop+"px"; перерыв; Case '4': newbody.style.left = head.offsetleft+50+'px'; newbody.style.top = head.offsettop+"px"; перерыв; } content.AppendChild (newbody); BodyNum = BodyNum+1; body.push (новый тело); } else {// Создать var newbody = document.createElement ('div'); newbody.classname = "newbody"; newbody.id = "body0"+(body.length+1); Switch (dir) {case '1': newbody.style.top = body [body.length-1] .offsettop-50+'px'; newbody.style.left = body [body.length-1] .offsetleft+"px"; перерыв; case '2': newbody.style.top = body [body.length-1] .offsettop+50+'px'; newbody.style.left = body [body.length-1] .offsetleft+"px"; перерыв; case '3': newbody.style.left = body [body.length-1] .offsetleft-50+'px'; newbody.style.top = body [body.length-1] .offsettop+"px"; перерыв; Case '4': newbody.style.left = body [body.length-1] .offsetleft+50+'px'; newbody.style.top = body [body.length-1] .offsettop+"px"; перерыв; } content.AppendChild (newbody); BodyNum = BodyNum+1; body.push (новый тело); } // body.push (content);} // Превышение границы, сбросить функцию информации о событии инициализировать () {// сбросить плод var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); Fruit.style.top = row*50+"px"; Fruit.style.left = col*50+"px"; // запись баллов Document.getElementsBytagName ('p') [0] .innerText = ""; // сбросить прожорливую змею} var инцидент; инцидент = setInterval (ход, 200); // Добавить операции // var btn = document.getElementbyId ('btn'); // btn.onclick = function () {// clearInterval (инцидент); //} // </script> </body> </html>Это все еще улучшается, и я надеюсь, что это будет полезно для каждого обучения.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.