!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd  html  head  title 新建網頁 /title  meta http-equiv= Content-Type content= text/html; charset=utf-8 /  meta name= description content= /  meta name= keywords content= /  script type= text/javascript  //① 繪制地圖 function Map() { //私有成員(不會隨便發生變化) var w = 800; var h = 400; //成員方法，繪制地圖 this.showmap = function () { //創建p、設置css樣式、追加給body var tu = document.createElement( p  tu.style.width = w + px  tu.style.height = h + px  tu.style.backgroundImage = url(./12.jpg)  document.body.appendChild(tu); //② 繪制食物 function Food() { var len = 20; //把食物(權值)坐標聲明為公開的，以便在外部訪問 this.xFood = 0; this.yFood = 0; this.piece = null; //頁面上唯一的食物對象 //繪制 this.showfood = function () { //創建p、設置css樣式、追加給body if (this.piece === null) { this.piece = document.createElement( p  this.piece.style.width = this.piece.style.height = len + px  this.piece.style.backgroundColor = green  this.piece.style.position = absolute  document.body.appendChild(this.piece); //食物設置絕對定位(position/left/top) //食物位置“隨機”擺放 //移動步進值：20px //食物“權值”坐標： X軸(0-39) Y軸(0-19)  //食物真實坐標：權值坐標 * 步進值 this.xFood = Math.floor(Math.random() * 40); //0-39的隨機數 this.yFood = Math.floor(Math.random() * 20); //0-19的隨機數 this.piece.style.left = this.xFood * len + px  this.piece.style.top = this.yFood * len + px  //③ 小蛇 function Snake() { var len = 20; this.redirect = right //默認向右邊移動 //后期snakebody要變化，因此聲明為公開的(每個蛇節：[x坐標，y坐標，顏色，蛇節對象]) this.snakebody = [[0, 1, green , null], [1, 1, green , null], [2, 1, green , null], [3, 1, red , null]]; //a.繪制小蛇 this.showsnake = function () { //遍歷小蛇的各個蛇節，并依次創建即可 for (var i = 0; i this.snakebody.length; i++) { //this.snakebody[i]//代表每個蛇節 //創建蛇節p if (this.snakebody[i][3] === null) {//判斷沒有創建對應的蛇節 this.snakebody[i][3] = document.createElement( p  //設置css樣式(寬度、高度、顏色) this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + px  this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2]; //絕對定位及位置 this.snakebody[i][3].style.position = absolute  //把蛇節追加給body document.body.appendChild(this.snakebody[i][3]); this.snakebody[i][3].style.left = this.snakebody[i][0] * len + px  this.snakebody[i][3].style.top = this.snakebody[i][1] * len + px  //b.移動小蛇 this.movesnake = function () { //非蛇頭蛇節(當前蛇節的新坐標 是 下個蛇節 的舊坐標) for (var i = 0; i this.snakebody.length - 1; i++) { this.snakebody[i][0] = this.snakebody[i + 1][0]; this.snakebody[i][1] = this.snakebody[i + 1][1]; if (this.redirect == right ) { //蛇頭x坐標遞增 this.snakebody[this.snakebody.length - 1][0] += 1; if (this.redirect == left ) { //蛇頭x坐標遞減 this.snakebody[this.snakebody.length - 1][0] -= 1; if (this.redirect == up ) { //蛇頭y坐標遞減 this.snakebody[this.snakebody.length - 1][1] -= 1; if (this.redirect == down ) { //蛇頭y坐標遞增 this.snakebody[this.snakebody.length - 1][1] += 1; //判斷蛇頭碰到食物 //蛇頭坐標 var xSnake = this.snakebody[this.snakebody.length - 1][0]; var ySnake = this.snakebody[this.snakebody.length - 1][1]; //食物坐標food.xFood/food.yFood; if (xSnake == food.xFood ySnake == food.yFood) { //吃食物增加蛇節 var newjie = [this.snakebody[0][0], this.snakebody[0][1], green , null]; this.snakebody.unshift(newjie);//把newjie放到數組的第一個位置去 //原食物消失，重新生成一個食物 food.showfood(); //控制小蛇在地圖范圍內移動 if (xSnake 0 || xSnake 39 || ySnake 0 || ySnake 19) { alert( game over  clearInterval(mytime); return false; //吃到自己判斷(蛇頭坐標與其他蛇節坐標一致) for (var k = 0; k this.snakebody.length - 1; k++) { if (this.snakebody[k][0] == xSnake this.snakebody[k][1] == ySnake) { alert( game over kill you by yourself  clearInterval(mytime); return false; //根據新坐標繪制小蛇 this.showsnake(); window.onload = function () { var map = new Map(); map.showmap(); food = new Food();//聲明為全局的以便在該加載事件函數外部訪問 food.showfood(); snake = new Snake();//聲明為全局的snake對象 snake.showsnake(); //移動小蛇 //setInterval(全局變量，時間) mytime = setInterval( snake.movesnake() , 200); //設置鍵盤事件，控制器小蛇移動方向 document.onkeydown = function (evt) { var num = evt.keyCode;//通過事件對象獲得數值碼，進而知道被觸發鍵子 if (num == 38) { snake.redirect = up  if (num == 40) { snake.redirect = down  if (num == 37) { snake.redirect = left  if (num == 39) { snake.redirect = right  /script  style type= text/css  body { margin: 0; /style  /head  body /body  /html 

本文展示了JS實現簡易版貪吃蛇小游戲的相關代碼，更多相關內容請關注噴繪php 。
相關推薦：

簡易 PHP+MySQL 分頁類

HTML轉Excel，并實現打印，下載功能

兩個不用遞歸的樹形數組構造函數

以上就是JS實現簡易版貪吃蛇小游戲的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。