この記事の例は、あなたのリファレンスのためにJSとCSSによって純粋に完了したJS Snakeゲームのデモを共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html> <meta charset = "utf-8"> <head> <style>*{margin：0;パディング：0;} .content {position：absolute;幅：500px;高さ：500px;バックグラウンドカラー：＃212121; } .colo {width：48px;高さ：48px;背景色：＃e6e6e6;国境：1pxソリッド＃466f85;フロート：左; } .head {/*background-color：＃49df85;*/background-image：url（./ img/22.jpg）;ボーダーラジウス：10px;バックグラウンドサイズ：100％;位置：絶対;高さ：48px;幅：48px; } .fruit {/*background-color：＃49df85;*/background-image：url（./ img/furch.jpg）;バックグラウンドサイズ：100％;位置：絶対;高さ：48px;幅：48px; } .Score {font-family： 'bold';左：600px;位置：絶対;高さ：50px;幅：200px;バックグラウンドカラー：＃212121;色：#fff; } .newbody {position：absolute;幅：48px;高さ：48px;背景イメージ：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」 type = "text/javascript"> //ステータスvar stop = document.getElementbyId（ 'stop'）; var start = document.getElementbyId（ "start"）; var gameway = document.getElementbyId（ 'gameway'）; start.onclick = function（）{head.value = '2'; inciss = setInterval（move、200）;} stop.onclick = function（）{clearInterval（inciss）;} // 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 scoreNum = 0; var scorecon = document.createelement（ "p"）; // var scoretext = document.createTextNode（scorenum）; // scorecon.appendchild（scoreText）; ScoreId.AppendChild（Scorecon）; var head = null; //ヘビの頭を保存するvar fruit = null; //フルーツvar dir = nullを保存します。 //蛇の方向を保存var body = new Array（）; //スネークのボディの追加部分を保存var bodynum = 0; //作成されたボディの数//ヘッドとフルーツをコンテンツ関数にランダムに作成しますcreateType（type）{//ランダム数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（Fruit）; }} //作成されたプロップメソッドcreateType（1）; createType（2）; //ヘビヘッドの動きvar direction = new Array; //新しく作成された各ボディの方向を保存//変換番号var numss = 0; //自動スライディングイベント関数move（）{if（head.value！= ""）{switch（head.value）{case '1'：head.style.top = head.offsettop-50+"px";壊す;ケース '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（ "boundaryを超えて！再生してください"）; } // if（head == null）{// if（head.style.top <0 || head.style.top> 500 || head.style.left <0 || head.style.left> 500）{// alert（ "boundaryを超える！ //} 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";壊す;ケース '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 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";壊す;ケース '2'：bodyid.style.top = body_id.offsettop-50+"px"; bodyid.style.left = body_id.offsetleft+"px";壊す;ケース '3'：bodyid.style.left = body_id.offsetleft+50+"px"; bodyid.style.top = body_id.offsettop+"px";壊す;ケース '4'：bodyid.style.left = body_id.offsetleft-50+"px"; bodyid.style.top = body_id.offsettop+"px";壊す; }}}} // Button time Document.onkeydown = function（）{var code = event.keycode; switch（code）{// upケース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.createelment（ 'div'）; newbody.classname = "newbody"; newbody.id = "body01"; switch（dir）{case '1'：newbody.style.top = head.offsettop-50+'px'; newbody.style.left = head.offsetLeft+"px";壊す;ケース '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）; switch（dir）{case '1'：newbody.style.top = body [body.length-1] .offsettop-50+'px'; newbody.style.left = body [body.length-1] .offsetleft+"px";壊す;ケース '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 = row*50+"px"; fruit.style.left = col*50+"px"; //スコアdocument.getElementsByTagname（ 'p'）[0] .innertext = ""; // Gluttonous Snake} var Incident; incisent = setInterval（move、200）; // operations // var btn = document.getelementbyid（ 'btn'）; // btn.onclick = function（）{// clearinterval（//} // </script> </body> </html>それはまだ改善されており、私はそれがすべての人の学習に役立つことを願っています。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。