贪吃蛇小游戏

score:0

* {
	margin:0;
	padding:0;
}
header {
	display:block;
	margin:0 auto;
	width:500px;
	text-align:center;
}
header h1 {
	font-family:Arial;
	font-weight:bold;
}
header #newGameButton {
	display:block;
	margin:20px auto;
	width:100px;
	padding:10px 10px;
	background-color:#8f7a66;
	font-family:Arial;
	color:white;
	border-radius:10px;
	text-decoration:none;
}
header #newGameButton:hover {
	background-color:#9f8b77;
}
header p {
	font-family:Arial;
	font-size:25px;
	margin:20px auto;
}
canvas {
	display:block;
	border:medium double black;
	margin:4px auto;
}

var CANVAS = document.getElementById("canvas");
 var CTX = CANVAS.getContext("2d");
 var SNAKE = new Array(); //var SNACK = new Array(); 蛇的单词拼错了
 //用队列模拟蛇身--数组
 var DIR = "right";
 //用来控制蛇头的方向
 var SIZE = 20;
 //蛇身的宽度
 var FOODX = 0;
 //食物的x坐标
 var FOODY = 0;
 //食物的y坐标
 var HEADX = 0;
 //蛇头的x坐标
 var HEADY = 0;
 //蛇头的y坐标
 var MAXWIDTH = 200;
 //画布的高度
 var MAXHEIGHT = 200;
 //画布的宽度
 var TIME = 400;
 //蛇的速度
 var SCORE = 0;
 //计算玩家分数
 var interval = null;

CANVAS.width = MAXWIDTH;
 CANVAS.height = MAXHEIGHT;
 //设置画布的宽和高

window.onload = function() {
     newgame();
 };
 //加载页面完成时执行newgame()
 document.getElementById("newGameButton").click(function() {
     newgame();
 });
 //点击按键的时候执行newgame()

//======================开始游戏========================
 function newgame() {
     SNAKE = [];
     //用队列模拟蛇身
     DIR = "right";
     //用来控制蛇头的方向
     HEADX = 0;
     //蛇头的x坐标
     HEADY = 0;
     //蛇头的y坐标
     SCORE = 0;
     //初始的分数
     window.clearInterval(interval);
     //取消setInterval方法设置的定时器
     interval = null;
     //清空interval
     CTX.clearRect(0, 0, MAXWIDTH, MAXHEIGHT);
     //初始化画布
     drawSnake();
     //画一条蛇
     setFood();
     //放置食物
     interval = window.setInterval(move, TIME);
     //移动蛇
     //按照指定的周期（以毫秒计）来调用函数或计算表达式
 }

//=====================画蛇的身体=================================
 function drawBody(x1, y1, x2, y2) {
     CTX.fillRect(x1, y1, SIZE, SIZE);
     CTX.fillRect(x2, y2, SIZE, SIZE);
     SNAKE.push([x1, y1]);
     SNAKE.push([x2, y2]);
 }

//=============================画一条蛇=============================================
 function drawSnake() {
     CTX.fillStyle = "green"; //
     CTX.fillRect(HEADX, HEADY, SIZE, SIZE);
     SNAKE.push([HEADX, HEADY]);
 }
 switch (DIR) {
     case "up":
         drawBody(HEADX, HEADY + SIZE, HEADX, HEADY + 2 * SIZE);
         break;
     case "right":
         drawBody(HEADX - SIZE, HEADY, HEADX - 2 * SIZE, HEADY);
         break;
     case "down":
         drawBody(HEADX, HEADY - SIZE, HEADX, HEADY - 2 * SIZE);
         break;
     case "left":
         drawBody(HEADX + SIZE, HEADY, HEADX + 2 * SIZE, HEADY);
         drawBody(HEADX + SIZE, HEADY, HEADX + 2 * SIZE, HEADY);
         break;
 }

//==================获取用户按下的那个方向=========================
 document.onkeydown = function(e) {
     var code = e.keyCode - 37;
     switch (code) {
         case 1:
             if (DIR != "down")
                 DIR = "up";
             break;
         case 2:
             if (DIR != "left")
                 DIR = "right";
             break;

case 3:
             if (DIR != "up")
                 DIR = "down";
             break;

case 0:
             if (DIR != "right")
                 DIR = "left";
             break;
     }
 }

//==============根据方向改变蛇头下一格将要到达的位置,并判断是否结束=========
 function move() {
     switch (DIR) {
         case "up":
             HEADY = HEADY - SIZE;
             break;
         case "right":
             HEADX = HEADX + SIZE;
             break;
         case "down":
             HEADY = HEADY + SIZE;
             break;
         case "left":
             HEADX = HEADX - SIZE;
             break;
     }
     if (HEADX > MAXWIDTH - SIZE || HEADY > MAXHEIGHT - SIZE || HEADX < 0 || HEADY < 0) {
         alert("yay! 你在这次游戏中获得了" + SCORE + "分，争取下次不要再撞壁了");
         window.location.reload();
     }

if (HEADX > MAXWIDTH - SIZE || HEADY > MAXHEIGHT - SIZE || HEADX < 0 || HEADY < 0) {
         alert("yay! 你在这次游戏中获得了" + SCORE + "分");
         window.location.reload();
     }
     for (var i = 1; i < SNAKE.length; i++) {
         if (SNAKE[i][0] == SNAKE[0][0] && SNAKE[i][1] == SNAKE[0][1]) {
             alert("yay! 你在这次游戏中获得了" + SCORE + "分，争取下次不要再咬自己了");
             window.location.reload();
         }
     }
     if (SNAKE.length == 21) {
         alert("yay! 你赢了");
         window.location.reload();
     }
     moveIn(HEADX, HEADY);
 }

//==========================移动一格=================================
 function moveIn(x, y) {
     CTX.fillStyle = "green"; //
     CTX.fillRect(x, y, SIZE, SIZE);
     var newSnake = [
         [x, y]
     ];
     SNAKE = newSnake.concat(SNAKE);
     if (false == eatFood()) {
         var snakeTail = SNAKE.pop();
         CTX.clearRect(snakeTail[0], snakeTail[1], SIZE, SIZE);
     }
 }

//===========================放置食物==============================
 function setFood() {
     do {
         FOODX = SIZE * Math.floor(Math.random() * MAXWIDTH / SIZE);
         FOODY = SIZE * Math.floor(Math.random() * MAXHEIGHT / SIZE);
     } while (foodInSnake());
     CTX.fillStyle = "red";
     CTX.fillRect(FOODX, FOODY, SIZE, SIZE);
 }

//=========================判断食物与蛇是否重叠=======================
 function foodInSnake() {
     for (var i = 0; i < SNAKE.length; i++) {
         if (FOODX == SNAKE[i][0] && FOODY == SNAKE[i][1]) {
             return true;
         }
     }
     return false;
 }

//========================================吃食物===========================
 function eatFood() {
     if (HEADX == FOODX && HEADY == FOODY) {
         CTX.fillStyle = "red"; //
         //CTX.fillRect(FOODX, FOODY, SIZE, SIZE);
         setFood();
         SCORE++;
         document.getElementById("score").innerHTML = SCORE;
         return true;
     }
     return false;
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

贪吃蛇怀旧版小游戏



代码描述：JS贪吃蛇游戏,代码注释全

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

轻翔

相关代码

贪吃蛇小游戏

贪吃蛇怀旧版小游戏

最新