整理项目——贪吃蛇

最新推荐文章于 2023-07-25 23:54:47 发布

棉呀那么个冻

最新推荐文章于 2023-07-25 23:54:47 发布

阅读量145

点赞数

分类专栏： Javascript 文章标签： js

本文链接：https://blog.csdn.net/qq_45623859/article/details/103530033

版权

本文整理了使用JavaScript实现的网页贪吃蛇小游戏项目。主要思路包括：划分用户界面和游戏区，设置得分显示和控制按钮，使用CSS布局，创建地图、蛇、食物，并通过键盘控制蛇移动。当蛇头触碰食物时，食物消失，蛇增加长度并得分。项目包含main.js、snake.js、box.js和game.js等关键文件。

摘要由CSDN通过智能技术生成

从今天开始，我要整理整理之前学习的时候写的一些小demo了和记的一些重点笔记了，自己也顺便复习一下

网页贪吃蛇小游戏

这个是我学完JavaScript跟着视频学写的第一个小项目，现在想想，是有一丝丝的成就感的
这个项目主要是js,HTML的页面代码很少

回忆一下当初的主要思路

1、页面分为两个区域——用户界面区和游戏区
2、用户界面区有显示得分功能和开始、暂停、重新游戏按钮
3、用DIV+CSS布局规划页面
4、创建地图、蛇、食物
5、用键盘方向键可以控制蛇移动
6、蛇头触碰食物，食物消失，蛇增加长度，得分

效果图

（我承认界面有点丑）
在这里插入图片描述
首先地图对象main.js

(function(){
   
	var map = document.getElementById("map");
	var game = new Game(map);
	game.start();	
})();

蛇对象snake.js

(function () {
   
	var position = 'absolute';
	//记录之前创建的蛇
	var elements = [];
	var score = 0;
	function Snake (options) {
   
		options = options || {
   };
		//蛇节的大小
		this.width = options.width || 20;
		this.height = options.height || 20;
		
		//蛇移动的方向
		this.direction = options.direction || 'right'
		//蛇的身体（蛇节） 第一个元素是蛇头
		this.body = [
			{
   x: 3, y: 2, color: 'red'},
			{
   x: 2, y: 2, color: 'blue'},
			{
   x: 1, y: 2, color: 'blue'}
				
		];
		
	}
	
	Snake.prototype.render = function (map) {
   
		//删除之前的蛇节
		remove();
		//把每一个蛇节渲染到地图上
		for (var i = 0, len = this.body.length; i < len; i++) {
   
			//蛇节
			var object = this.body[i];
			
			var div = document.createElement('div');
			map.appendChild(div);
			
			
			//记录当前蛇
			elements.push(div);
			
			
			//设置样式
			div.style.position = position;
			div.style.width = this.width + 'px';
			div.style.height = this.height + 'px';
			div.style.left = object.x * this.width + 'px';
			div.style.top = object.y * this.height + 'px';
			div.style.backgroundColor = object.color;
			
		}
	}
	
	//私有成员
	function remove() {
   
		for(var i = elements.length - 1; i >= 0; i--)