Html/Javascript snake game 贪吃蛇游戏（附全部代码）

最新推荐文章于 2024-06-24 09:39:07 发布

北京维多

最新推荐文章于 2024-06-24 09:39:07 发布

阅读量2.2k

点赞数 1

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_60558800/article/details/122335968

版权

以前用pyhton 做了贪吃蛇游戏，这里发表的是html/javascript 版本。难度差不多，区别是python 主要用class, 而javascript 主要用function ，他们的功能很相似，写法稍微有些不同。内容大致是：

1. 蛇由蛇头（红色）和蛇身组成

2.食物随机产生

3.蛇吃到食物后，会变长，并且得10分

3.如果蛇头碰到自己得身体或者碰到四周墙壁，则game over

全部代码如下：

<!DOCTYPE html>
<html> 
 <head>
    <style>
      #gameCanvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }    
    </style>
</head>
<body>
<canvas id="gameCanvas" width="600" height="600"  > </canvas>
<script>
//https://www.educative.io/blog/javascript-snake-game-tutorial	
const snakeboard = document.getElementById("gameCanvas");
const snakeboard_ctx = gameCanvas.getContext("2d");

const board_background = "black";
const snake_col = 'lightblue';
const snake_border = 'darkblue';
const CELL=10;
let dx=CELL,dy=0;
let startx=200,starty=200,startL=5; //initial position and Length of the snake
let score = 0;

let food_x;
let food_y;
let game;
let sn;
    
document.addEventListener("keydown", change_direction);
let direction;
function change_direction(event){  
    let key = event.keyCode;  
    if( key == 37 && direction != "RIGHT"){  
        direction= "LEFT";  
        dx=-CELL,dy=0;
    }else if(key == 38 && direction != "DOWN"){  
        direction = "UP";  
        dx=0,dy=-CELL;
    }else if(key == 39 && direction != "LEFT"){  
        direction = "RIGHT";
        dx=CELL,dy=0   
    }else if(key == 40 && direction != "UP"){  
        direction = "DOWN";  
        dx=0,dy=CELL;
    }  
}

var snake=function(x0,y0) {
	this.body=[];
	this.head={x:x0,y:y0};
	this.init=function() {
		for (let i=0;i<startL;i++) {
			xv=x0-CELL*(i);
			this.body[i]={x:xv,y:y0};
			}
		}
	this.draw=function() {			
		snakeboard_ctx.strokestyle = snake_border;		
		for (let i=0;i<this.body.length;i++) {
			if (i==0) {snakeboard_ctx.fillStyle='red';}
			else {snakeboard_ctx.fillStyle=snake_col;}
			snakeboard_ctx.fillRect(this.body[i].x, this.body[i].y, CELL, CELL);  
			snakeboard_ctx.strokeRect(this.body[i].x, this.body[i].y, CELL, CELL);
			}		
		}	
	this.move=function() {  
		this.body.unshift(this.head); //add head to snake
		this.head = {x: this.head.x + dx, y: this.head.y+dy}; //dx-horizontal speed
		//eaten food-> grow, if not pop()->just move  
		if (this.head.x === food_x && this.head.y === food_y) 
			{        
			score += 10;	  
			// Generate new food location
			gen_food();
			} 
		else {
				// Remove the last part of snake body
				this.body.pop();
			}  
		}
	}	
 
function has_game_ended()
{  
  for (let i = startL-1; i < sn.body.length; i++)
  {    
    const has_collided = sn.body[i].x === sn.body[0].x && sn.body[i].y === sn.body[0].y
    //The head of the snake collides with its body
    if (has_collided) 
      return true
  }
  const hitLeftWall = sn.body[0].x < 0;  
  const hitRightWall = sn.body[0].x > snakeboard.width - 10;
  const hitToptWall = sn.body[0].y < 0;
  const hitBottomWall = sn.body[0].y > snakeboard.height - 10;
  //The head of the snake collides with the canvas boundary
  return hitLeftWall ||  hitRightWall || hitToptWall || hitBottomWall
}

snakeboard_ctx.font = "25px serif";
snakeboard_ctx.strokeStyle="#FFFFFF";
function drawtext(text,x,y){	
	y=snakeboard_ctx.measureText("M").width*1.5+y;
	snakeboard_ctx.strokeText(text, x,y); 
 }
 
function clearCanvas() {
      snakeboard_ctx.fillStyle = board_background;
      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
      //snakeboard_ctx.clearRect(0, 0, snakeboard.width, snakeboard.height);
    }
    
function random_food(min, max)
{  
   return Math.round((Math.random() * (max-min) + min) / CELL) * CELL;
}
 
function drawFood()
{
      snakeboard_ctx.fillStyle = 'lightgreen';
      snakeboard_ctx.strokestyle = 'darkgreen';
      snakeboard_ctx.fillRect(food_x, food_y, CELL, CELL);
      snakeboard_ctx.strokeRect(food_x, food_y, CELL, CELL);
}
 
function gen_food() 
{  
   food_x = random_food(0, snakeboard.width - CELL);
   food_y = random_food(0, snakeboard.height - CELL);
   //to ensure that the food is not located where the snake currently is.
   if (sn.body.filter ((m)=> m.x===food_x && m.y===food_y).length>0) {
	   gen_food();
   }
}

function gameover(){
	alert("game over");
	clearInterval(game);
	new_game();
	}

function main() {			
	    if (has_game_ended()) {gameover();}
	
        clearCanvas(); 
        drawtext("score: "+score.toString(),0,0);
        sn.move();
        sn.draw();
        drawFood();
		//window.requestAnimationFrame(main);
    }
    


function new_game() {
	score=0;
	sn=new snake(200,200);
	sn.init();
	gen_food();
	game=setInterval(main,100);
}

new_game();

</script>
</body>
<html>

北京维多

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Html/Javascript snake game 贪吃蛇游戏（附全部代码）

以前用pyhton 做了贪吃蛇游戏，这里发表的是html/javascript 版本。难度差不多，区别是python 主要用class, 而javascript 主要用function ，他们的功能很相似，写法稍微有些不同。内容大致是：1. 蛇由蛇头（红色）和蛇身组成2.食物随机产生3.蛇吃到食物后，会变长，并且得10分3.如果蛇头碰到自己得身体或者碰到四周墙壁，则game over全部代码如下：<!DOCTYPE html><html&
复制链接

扫一扫