この記事の例は、あなたのリファレンスのために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をもっとサポートすることを願っています。