이 기사의 예는 JS Snake Game의 데모를 공유하며, 참조를 위해 JS와 CSS에 의해 순전히 완료됩니다. 특정 내용은 다음과 같습니다
<! doctype html> <html> <meta charset = "utf-8"> <head> <style>*{마진 : 0; 패딩 : 0;} .Content {위치 : 절대; 너비 : 500px; 높이 : 500px; 배경색 : #212121; } .colo {너비 : 48px; 높이 : 48px; 배경색 : #e6e6e6; 국경 : 1px 고체 #466f85; 플로트 : 왼쪽; } .head {/*배경색 : #49df85;*/background-image : url (./ img/22.jpg); Border-Radius : 10px; 배경 크기 : 100%; 위치 : 절대; 높이 : 48px; 너비 : 48px; } .fruit {/*배경색 : #49df85;*/background-image : url (./ img/fruit.jpg); 배경 크기 : 100%; 위치 : 절대; 높이 : 48px; 너비 : 48px; } .Score {Font-Family : 'Bold'; 왼쪽 : 600px; 위치 : 절대; 높이 : 50px; 너비 : 200px; 배경색 : #212121; 색상 : #fff; } .newbody {위치 : 절대; 너비 : 48px; 높이 : 48px; 배경 이미지 : URL (./ IMG/33.jpg); 배경 크기 : 100%; } .btn {font-family : 'bold'; 왼쪽 : 600px; 상단 : 100px; 위치 : 절대; 높이 : 50px; 너비 : 100px; 배경색 : #1193ff; 색상 : #fff; 텍스트 정렬 : 센터; 라인 높이 : 50px; 글꼴 크기 : 20px; 커서 : 포인터; Border-Radius : 15px; . type = "text/javaScript"> // 상태 추가 var var wop = document.getElementById ( 'stop'); var start = document.getElementById ( "start"); var gameway = document.getElementById ( 'GameWay'); start.onClick = function () {head.value = '2'; design = setInterVal (move, 200);} stop.onClick = function () {clearInterVal (discome);} // var content = document.getElementById ( "content"); for (var i = 0; i <100; i ++) {var div = document.createElement ( "div"); Div.ClassName = "Colo"; content.appendChild (div); } var scoreId = document.getElementById ( "score"); var skorenum = 0; var scorecon = document.createElement ( "p"); // var skoretext = docum scoreid.appendChild (scorecon); var head = null; // 뱀의 머리를 저장하십시오 var fruit = null; // 과일을 저장 var var = null; // 뱀의 방향을 저장 var body = new array (); // 뱀의 신체의 추가 부분을 저장합니다. 바디 놈 = 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 = 행*50+"px"; head.style.left = col*50+"px"; Content.AppendChild (헤드); // 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.style.width = "50"; fruit.style.height = "50"; fruit.style.backgroundcolor = "#ea2000"; fruit.style.top = 행*50+"px"; fruit.style.left = col*50+"px"; Content.AppendChild (과일); }} // 생성 된 소품 메소드 호출 CreateType (1); CreateType (2); // 뱀 헤드 움직임 함수 var Direction = 새 배열; // 새로 생성 된 각 신체의 방향을 저장 // 변환 번호 var numss = 0; // 자동 슬라이딩 이벤트 함수 move () {if (head.value! = "")) {switch (head.value) {case '1': head.style.top = head.offsettop-50+"px"; 부서지다; CASE '2': head.style.top = head.offsettop+50+"px"; 부서지다; 사례 '3': head.style.left = head.offsetleft-50+"px"; 부서지다; 사례 '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 ( "경계를 초과하십시오! Please Replay"); //} 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; } } } //Convert direction//If the event after the fruit is successfully eaten if(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 = 행*50+"px"; fruit.style.left = col*50+"px"; // 레코드 scorenum = scoreNum+1; document.getElementsByTagName ( 'p') [0] .innerText = ""; document.getElementsByTagName ( 'p') [0] .innerText = scoreNum; // Body Part BodyAdd 생성 (Head.style.top, Head.style.left, Head.Value); } // 헤드 움직임 부분을 따라 가도록 신체를 제어하십시오. // 신체가있을 때 (body.length> 0)이면 신체의 값을 동적으로 변경해야합니다. 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"; 부서지다; 사례 '2': body01.style.top = head.offsettop-50+"px"; body01.style.left = head.offsetleft+"px"; 부서지다; 사례 '3': body01.style.left = head.offsetleft+50+"px"; body01.style.top = head.offsettop+"px"; 부서지다; 사례 '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 bodyd = 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"; 스위치 (body [bodynum- (body.length-i)]. value) {case '1': bodyid.style.top = body_id.offsettop+50+"px"; 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"; 부서지다; }}}} // 버튼 시간 문서 작성 .OnKeyDown = function () {var code = event.keyCode; 스위치 (코드) {// CASE 38 : head.value = '1'; 부서지다; // 다운 케이스 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"; 스위치 (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"; 부서지다; 사례 '3': newbody.style.left = head.offsetleft-50+'px'; newbody.style.top = head.offsettop+"px"; 부서지다; 사례 '4': newbody.style.left = head.offsetleft+50+'px'; newbody.style.top = head.offsettop+"px"; 부서지다; } content.appendChild (Newbody); bodynum = bodynum+1; body.push (Newbody); } else {// 생성 var newbody = document.createElement ( 'div'); newbody.classname = "Newbody"; newbody.id = "body0"+(body.length+1); 스위치 (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"; 부서지다; 사례 '3': newbody.style.left = body [body.length-1] .offsetleft-50+'px'; newbody.style.top = body [body.length-1] .offsettop+"px"; 부서지다; 사례 '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 (Newbody); } // body.push (content);} // 경계를 초과하고 정보 이벤트 기능을 재설정합니다. initialize () {// 과일 var row = parseint (math.random () * 6 +2); var col = parseint (math.random () * 6 +2); fruit.style.top = 행*50+"px"; fruit.style.left = col*50+"px"; // 레코드 점수 문서 .getElementsByTagName ( 'p') [0] .innerText = ""; // gluttonous snake를 재설정} var 사건; DEICING = setInterVal (move, 200); // 작업 추가 // var btn = document.getElementById ( 'btn'); // btn.onclick = function () {// clearInterVal (design); //} // </script> </body> </html>여전히 개선되고 있으며 모든 사람의 학습에 도움이되기를 바랍니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.