Los ejemplos en este artículo comparten con ustedes la demostración del juego JS Snake, que se completa exclusivamente por JS y CSS para su referencia. El contenido específico es el siguiente
* Pading: 0;} .content {posición: absoluto; Ancho: 500px; Altura: 500px; Color de fondo: #212121; } .colo {ancho: 48px; Altura: 48px; Color de fondo: #E6E6E6; borde: 1px sólido #466f85; flotante: izquierda; } .head {/*Color de fondo: #49DF85;*/background-image: url (./ img/22.jpg); Border-Radius: 10px; tamaño de fondo: 100%; Posición: Absoluto; Altura: 48px; Ancho: 48px; } .Fruit {/*Color de fondo: #49DF85;*/Background-Image: url (./ img/fruit.jpg); tamaño de fondo: 100%; Posición: Absoluto; Altura: 48px; Ancho: 48px; } .spore {Font-Family: 'Bold'; Izquierda: 600px; Posición: Absoluto; Altura: 50px; Ancho: 200px; Color de fondo: #212121; Color: #fff; } .newbody {posición: absoluto; Ancho: 48px; Altura: 48px; background-image: url (./ img/33.jpg); tamaño de fondo: 100%; } .btn {Font-Family: 'Bold'; Izquierda: 600px; arriba: 100px; Posición: Absoluto; Altura: 50px; Ancho: 100px; Color de fondo: #1193FF; Color: #fff; Text-Align: Center; Línea de altura: 50px; tamaño de fuente: 20px; cursor: puntero; Border-Radius: 15px; } </style> </head> <body> <div id = "content"> </div> <div id = "stop"> Detener el juego </div> <div style = "top: 180px" id = "inicio"> Iniciar el juego </div> <div style = "top: 380px" id = "gamáque" type = "text/javaScript"> // Agregar estado var stop = document.getElementById ('stop'); var start = document.getElementById ("inicio"); var gameway = document.getElementById ('gameway'); start.onclick = function () {head.value = '2'; incident = setInterval (Move, 200);} stop.OnClick = function () {ClearInterval (incidente);} // var content = document.getElementById ("contenido"); for (var i = 0; i <100; i ++) {var div = document.createElement ("div"); div.classname = "Colo"; content.appendChild (div); } var scAingId = document.getElementById ("stork"); var scorEnum = 0; var scorecon = document.createElement ("p"); // var scoretext = document.ceatetExtNode (scoreNum); // scorecon.appendChild (scoretext); ScoreId.AppendChild (Scorecon); var head = null; // Guardar la cabeza de la serpiente var fruit = null; // Guardar la fruta var dir = null; // Guardar la dirección del cuerpo de serpiente var = nueva array (); // Guardar la parte agregada del cuerpo de la serpiente var BodyNum = 0; // Registre cuántos cuerpos se crean // Cree aleatoriamente la cabeza y la fruta en la función de contenido CreateTeType (type) {if (type == 1) {// Crear número aleatorio var fila = parseInt (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); head = document.createElement ("div"); head.classname = "head"; head.style.top = fila*50+"px"; head.style.left = col*50+"px"; content.appendChild (cabeza); // head.style.top =; // head.style.left =; } if (type == 2) {// crea un número aleatorio var fila = parseInt (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); fruit = document.createElement ("div"); fruit.classname = "fruta"; fruit.style.width = "50"; fruit.style.height = "50"; fruit.style.backgroundcolor = "#ea2000"; fruit.style.top = fila*50+"px"; fruit.style.left = col*50+"px"; content.appendChild (fruta); }} // Llame al método de Prop creado CreateTeType (1); CreateType (2); // Función de movimiento de cabeza de serpiente var Dirinción = nuevo Array; // Guardar la dirección de cada cuerpo recién creado // Número de conversión var numss = 0; // Función de evento deslizante automático Move () {if (head.value! = "") {Switch (head.value) {case '1': head.style.top = head.offsettop-50+"px"; romper; caso '2': head.style.top = head.offsettop+50+"px"; romper; caso '3': head.style.left = head.offsetleft-50+"Px"; romper; caso '4': head.style.left = head.offsetleft+50+"px"; romper; }} console.log (head.offsettop); if (head.offsettop> 500) {alerta ("Exceed el límite! Por favor, reproduce"); } // if (head == null) {// if (head.style.top <0 || head.style.top> 500 || head.style.left <0 || head.style.left> 500) {// alerta ("¡Excese el límite! //} if (body.length! = 0) {for (var i = body.length-1; i> = 0; i-) {if (i == 0) {cuerpo [0] .value = head.value; } else {cuerpo [i] .value = cuerpo [i-1] .value; }}} // Convertir la dirección // Si el evento después de la fruta se come con éxito si (head.style.top == fruit.style.top && head.style.left == fruit.style.left) {var fila = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); fruit.style.top = fila*50+"px"; fruit.style.left = col*50+"px"; // registrar scorenum = scorenum+1; document.getElementsBytagName ('P') [0] .inntext = ""; document.getElementsBytagName ('P') [0] .inntext = Scorenum; // Crear carrocería BodyAdd (head.style.top, head.style.left, head.value); } // Controle el cuerpo para seguir la parte del movimiento de la cabeza // Cuando tiene un cuerpo, debe cambiar dinámicamente el valor del cuerpo si (cuerpo.length> 0) {var corporal01 = 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"; romper; Caso '2': Body01.style.top = head.offsettop-50+"Px"; Body01.style.left = head.offsetleft+"px"; romper; Caso '3': Body01.Style.Ltft = Head.OffSetLeft+50+"Px"; Body01.style.top = head.offsettop+"Px"; romper; Caso '4': Body01.Style.Ltft = head.OffSetLeft-50+"Px"; Body01.style.top = head.offsettop+"Px"; romper; }} 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)]. Value) {case '1': bodyId.style.top = body_id.offsettop+50+"px"; BodyID.style.left = Body_id.OffSetleft+"Px"; romper; caso '2': bodyId.Style.Top = Body_id.OffSettop-50+"Px"; BodyID.style.left = Body_id.OffSetleft+"Px"; romper; caso '3': bodyId.Style.Ltft = Body_id.OffSetleft+50+"Px"; BodyID.style.top = body_id.offsettop+"px"; romper; Caso '4': bodyId.Style.left = Body_id.OffSetleft-50+"Px"; BodyID.style.top = body_id.offsettop+"px"; romper; }}}} // Crear botón tiempo document.Onkeydown = function () {var code = event.keycode; switch (código) {// Case 38: head.value = '1'; romper; // Caso descendente 40: head.value = '2'; romper; // Caso izquierdo 37: head.value = '3'; romper; // caso 39 a la derecha: head.value = '4'; romper; console.log (head.value); }} // Función de eventos de aumento del cuerpo BodyAdd (arriba, izquierda, dir) {if (dir! = "") {Dir = dir; } else {dir = head.value; } // Crear cuerpo por primera vez 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"; romper; caso '2': newbody.style.top = head.offsettop+50+'Px'; newbody.style.left = head.offsetleft+"px"; romper; caso '3': newbody.style.left = head.offsetleft-50+'Px'; newbody.style.top = head.offsettop+"px"; romper; caso '4': newbody.style.left = head.offsetleft+50+'Px'; newbody.style.top = head.offsettop+"px"; romper; } content.appendChild (newbody); BodyNum = BodyNum+1; Body.push (Newbody); } else {// crea 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"; romper; caso '2': newbody.style.top = Body [Body.Length-1] .OffSettop+50+'Px'; newbody.style.left = Body [Body.Length-1] .OffSetleft+"Px"; romper; caso '3': newbody.style.left = Body [Body.Length-1] .OffSetleft-50+'Px'; newbody.style.top = Body [Body.length-1] .Offsettop+"Px"; romper; caso '4': newbody.style.left = Body [Body.Length-1] .OffSetleft+50+'Px'; newbody.style.top = Body [Body.length-1] .Offsettop+"Px"; romper; } content.appendChild (newbody); BodyNum = BodyNum+1; Body.push (Newbody); } // body.push (content);} // exceder el límite, restablecer la función de evento de información inicialize () {// restablecer la fruta var fila = parseInt (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); fruit.style.top = fila*50+"px"; fruit.style.left = col*50+"px"; // Registro de puntaje documento.getElementsByTagName ('P') [0] .inntext = ""; // reiniciar la serpiente glotón} var incidente; incident = setInterval (Move, 200); // Agregar operaciones // var btn = document.getElementById ('btn'); // btn.onclick = function () {// clearInterval (incident); //} // </script> </body> </html>Todavía se está mejorando, y espero que sea útil para el aprendizaje de todos.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.