js简单的贪吃蛇小游戏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
<script type="text/javascript">
var snake;
var timer;
var food;
//创建蛇
function Snake(){
this.width=20;
this.height=20;
this.position=‘absolute‘;
this.direct=‘‘;
//3代表x坐标,2代表y坐标,red代表颜色,null代表当前的div为空,表示还没有创建
this.snackbody=[[3,2,‘red‘,null],[2,2,‘blue‘,null],[1,2,‘blue‘,null]];

this.setDirect=function(keycode){

			switch(keycode)
             {
                 case 37:
                     this.direct=‘left‘;
                     break;
                 case 38:
                     this.direct=‘up‘;
                     break;
                 case 39:
                     this.direct=‘right‘;
                     break;
                 case 40:
                     this.direct=‘down‘;
                     break;
             }

}
	this.show=function(){

	for(var i=0;i<this.snackbody.length;i++)
		{
			if(this.snackbody[i][3]==null)
			{
				this.snackbody[i][3] = document.createElement(‘div‘);
				this.snackbody[i][3].style.width=this.width+‘px‘;
				this.snackbody[i][3].style.height=this.height+‘px‘;
				this.snackbody[i][3].style.position=this.position;
				this.snackbody[i][3].style.backgroundColor=this.snackbody[i][2];
				document.getElementById(‘Map‘).appendChild(this.snackbody[i][3]);

			}
			//设置蛇的位置坐标
			this.snackbody[i][3].style.left=this.snackbody[i][0]*this.width+‘px‘;
			this.snackbody[i][3].style.top=this.snackbody[i][1]*this.height+‘px‘;

		}

	}
	//蛇的移动
	this.move=function (){
		var length=this.snackbody.length-1;
		//让蛇的前面一个div的位置赋值给后一个的div的位置

		for(var i=length;i>0;i--)
		{
			//变换x坐标
			this.snackbody[i][0]=this.snackbody[i-1][0];//横坐标
			this.snackbody[i][1]=this.snackbody[i-1][1];//纵坐标

		}
		switch(this.direct)
		{
			case ‘right‘:
			this.snackbody[0][0]=this.snackbody[0][0]+1;
			break;
			case ‘down‘:
			this.snackbody[0][1]=this.snackbody[0][1]+1;
			break;
			case ‘left‘:
			this.snackbody[0][0]=this.snackbody[0][0]-1;
			break;
			case ‘up‘:
			this.snackbody[0][1]=this.snackbody[0][1]-1;
			break;
			default:
			return;

		}
	//判断蛇吃到食物---------------------------------------------------------------
             if(this.snackbody[0][0]==food.x&&this.snackbody[0][1]==food.y)
             {
                 var x=this.snackbody[length][0];
                 var y=this.snackbody[length][1];
                 this.snackbody.push([x,y,‘blue‘,null]);
                 food.show();
             }

//判断是否已经撞墙
	if(this.snackbody[0][0]<0 || this.snackbody[0][0]>19 ||this.snackbody[0][1]<0 ||this.snackbody[0][1]>19)
             {
                 alert(‘撞墙死‘);
                 clearTimeout(timer);
                 return;
             }

	//
	this.show();

	}

}
//创建食物
function Food(){
this.width=20;
this.height=20;
this.position=‘absolute‘;
this.color=‘#00ff00‘;
this._food=null;
this.x=0;
this.y=0;
//show函数
this.show=function(){
if(this._food==null)
	{
	this._food=document.createElement(‘div‘);
	this._food.style.width=this.width+‘px‘;
	this._food.style.height=this.height+‘px‘;
	this._food.style.position=this.position;
	this._food.style.backgroundColor=this.color;
	document.getElementById(‘Map‘).appendChild(this._food);

	}
	this.x=Math.floor(Math.random()*20);
	this.y=Math.floor(Math.random()*20);
	this._food.style.left=this.x*this.width+‘px‘;
	this._food.style.top=this.y*this.height+‘px‘;

}

}

function onload(){
snake = new Snake(); //实例化蛇类对象
         snake.show();
food=new Food();
food.show();
timer = setInterval(‘snake.move()‘,500);

}
function onkeyd(event){
	if(event.keyCode==38)//上
	{
		snake.setDirect(38);
		//alert(‘shagn‘);
	}
		if(event.keyCode==39)//上
	{
		snake.setDirect(39);

	}
		if(event.keyCode==40)//上
	{
		snake.setDirect(40);

	}
		if(event.keyCode==37)//上
	{
		snake.setDirect(37);

	}
}

</script>

<style type="text/css">
#Map{
width:400px;
height:400px;
position:absolute;
background-color:#c8c8c8;

}

</style>
 </head>
 <body  onkeydown="onkeyd(event)">
  <div id=‘Map‘></div>
 </body>
</html>

写的不是太好,但是基本功能能够实现。大家可以参考一下我的思路。

时间: 2024-11-07 10:53:28

js简单的贪吃蛇小游戏的相关文章

一个简单的“贪吃蛇”小游戏

一个简单的“贪吃蛇”小游戏 页面结构 简单的21x21的方块,页面结构 id为container的div包含所21个class名为row的div,每个row代表贪吃蛇的一整行,每个row中又包含21个div,代表这一行的每一个div方格,如果这个方格是空的话,div的类名为blank,如果这一个方格表示“贪吃蛇”的“食物”,div的类名为food,如果这一个方格表示“蛇”,div的类名为snake. CSS JS 然后我们思考下一个贪吃蛇游戏需要那些参数, 首先,界面中可见的元素无非就是空方格,

使用Html5+JS做的贪吃蛇小游戏

学习了Html5的Canvas的使用,和JS创建对象,做了一个贪吃蛇小游戏,来巩固JS面向对象编程和Canvas的用法. Node.js 1 /** 2 * 格子类,组成贪吃蛇和舞台 3 */ 4 function Node(x,y){ 5 this.x=x; 6 this.y=y; 7 /** 8 * 比较两个格子是否重合 9 */ 10 this.equals=function(x,y){ 11 return this.x==x&&this.y==y; 12 } 13 } Snake.

js+jQuery实现贪吃蛇小游戏

这是我第一次这么认真的去写一个程序.今天老师布置的编程任务是实现一个贪吃蛇的小游戏,一开始感觉很茫然的,因为以前都没有这么系统的去做过一个编程任务.后来理清思路去做,感觉问题也并不是那么的难. 首先,第一步肯定是要编写出我们的的静态页面. 第二步,让我们的贪吃蛇先从一个开始动起来. 第三步,让我们通过键盘去控制他的运动方向. 第四步,让我们去判断我们的贪吃蛇有没有撞墙,有没有吃到自己,因为这已经犯规了. 第五步,给我们的贪吃蛇随机生成一个‘食物’. 第六步,实现每当我们的贪吃蛇吃了一个食物,他都

贪吃蛇小游戏 (一)

贪吃蛇是一款儿时爱不释手的游戏.近日修行,想玩玩游戏开发.便简单写了个控制台版的贪吃蛇. 程序的简单框架: 建立一张固定大小的MAP,保存输出信息. 当信息有变动时,用system("cls")进行清屏操作,再重新输出实现伪动态. 重点算法在蛇身的移动,转向与增长.三者均基于链表实现. 移动与转向:通过判定移动方向,确定下一步移动的位置后,新建表头结点.将新表头结点置为表头.删除末尾结点. 增长:通过判断尾部移动方向,确定位置后在尾部添加节点. 熟练运用链表的同学,相信也是小菜一碟了.

贪吃蛇小游戏的初步尝试制作

这里利用二维数组做为地图,利用集合来存放蛇头和蛇尾的位置坐标,初步实现一个需要键盘控制的贪吃蛇小游戏. 首先,Main函数下面需要一个大循环来让游戏失败的时候能够重新开始,这里我们用了定义了一个bool型的sc,判断sc的true和flase来确定游戏是否开始: static void Main(string[] args)        { bool sc = true; while (sc) //大循环,用于游戏失败重新开始            { 下面是定义一个集合snake_x来存放蛇

贪吃蛇小游戏java实现代码分析

贪吃蛇小游戏java实现代码分析 贪吃蛇的小游戏,网上的代码比较多,今天周五,在教研室没啥事做,在电脑中发现了一个贪吃蛇的小游戏,于是就看了下实现的源码,发现别人写的代码确实挺好的,自己也是边加注释边进行理解的去看别人实现的游戏源码,发现还是挺有意思的.自己花了一个下午的时间看了源码,也加了一点小小的功能,于是,不写篇博客觉得对不起自己也,哈哈哈. 此游戏代码的思路非常的清晰,也相当好理解,没有太多难的地方,不过有很多值得学习的地方,因为,这份源码中,对java.awt包中的很多类的很多方法都进

Java版贪吃蛇小游戏的实现

使用的IDE eclipse JDK版本 1.6 辅助类 Coordinate.java package com.nn.util; /** *坐标点 */ public class Coordinate { public int x; public int y; public Coordinate(int newX, int newY) { x = newX; y = newY; } public boolean equals(Coordinate other) { if (x == other

用C写一个功能较为完善的贪吃蛇小游戏

主要功能: 方向控制-食物与增长-变速 1 #include<stdio.h> 2 #include<time.h>//种子-随机数 3 #include<windows.h>//system函数,控制台句柄 4 #include<conio.h>//按键 5 //界面(欢迎界面-游戏界面-结束得分界面)-驱动-方向控制-食物 6 //位置锁定-打印-删除 7 int snake_x[520]={0}; 8 int snake_y[520]={0}; 9 i

JavaScript实现简单贪吃蛇小游戏

之前上Web课,学到JavaScript的时候,老师要求写几个静态页面,要用到JavaScript.想了想就写个贪吃蛇吧.其实之前用pygame写过一次GUI的贪吃蛇,素材都是自己拿画图画的,其丑无比.所以这次还是老老实实用字符吧. 首先,是一些全局变量的定义: 1 <script> 2 var state = 0;//0 wait 1 run 2 over 3 var width = 40; 4 var height = 25; 5 var update = false; 6 var dir