在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例HTML基础 → html5 贪吃蛇源码(直接可以运行)

html5 贪吃蛇源码(直接可以运行)

HTML基础

下载此实例
  • 开发语言:CSS
  • 实例大小:0.10M
  • 下载次数:13
  • 浏览次数:972
  • 发布时间:2020-01-05
  • 实例类别:HTML基础
  • 发 布 人:八卦
  • 文件格式:.zip
  • 所需积分:2
 相关标签: HTML5 HTML 贪吃蛇

实例介绍

【实例简介】自定义 蛇的图片和食物的图片大小 canvas 画图

【实例截图】

from clipboard

【核心代码】


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
var gridWidth=20;
var score=0;
var foods=new Array(),snakes=new Array();
var bgIamge =new Image();
bgIamge.src = 'images/head.jpg';
var partten;
var foodIamge =new Image();
foodIamge.src = 'images/food.jpg';
var parttenFood;
function gameStart(){
	var farm=new Farm();
	food_interval=setInterval(farm.addfood,2000);
}
gameStart();
function gameover(){
	var judge=confirm("游戏结束,是否重新开始");
	score=0;
	textmsg.innerHTML=score "分";
	clearInterval(snake_interval);
	clearInterval(food_interval);
	if(!judge){
		return false;
	}
	gameStart();
}

function Food(x,y,w){
	var t=this;
	t.x=x;
	t.y=y;
	t.w=w;
	t.foodInit=function(){
		parttenFood= ctx.createPattern(foodIamge, 'repeat');
		ctx.beginPath();
		ctx.arc(x w/2,y w/2,w/2,0,360,false);
		debugger;
		ctx.fillStyle=parttenFood;
		ctx.fill();
		ctx.closePath();
	}
	t.equal=function(node){
		if(this.x==node.x && this.y==node.y){
			return true;
		}else{
			return false;
		}
	}
}

function Block(x,y,w){
		var t=this;
	t.x=x;
	t.y=y;
	t.w=w;
	t.drawBlock=function(){	
		  partten= ctx.createPattern(bgIamge, 'repeat')
		  ctx.beginPath();
		  ctx.arc(x w/2,y w/2,w/2,0,360,false);
		  ctx.fillStyle= partten;
		  ctx.fill();		
	}
	t.clear=function(){
		ctx.fillStyle='white';
		ctx.strokeStyle='white';
		ctx.fillRect(x,y,w,w);
		ctx.strokeRect(x,y,w,w);
	}
	t.equal=function(node){
		if(this.x==node.x && this.y==node.y){
			return true;
		}else{
			return false;
		}
	}
	
}
function Snake(x,y,len,speed){
	var t=this;
	t.x=x;
	t.y=y;
	t.dir='R';
	t.len=len;
	var nx=x;ny=y;
	t.init=function(){
		for(var i=0;i<len;i  ){
			var tempBlock=new Block(nx,ny,gridWidth);
			tempBlock.drawBlock();
			nx-=gridWidth;
			snakes.push(tempBlock);
		}
		snake_interval=setInterval(t.move,speed);
	}
	document.onkeydown=function(e){
		var code=e.keyCode;
		t.odir=t.dir;
		switch(code){
			case 37:
			t.dir='L';
			break;
			case 38:
			t.dir='U';
			break;
			case 39:
			t.dir='R';
			break;
			case 40:
			t.dir='D';
			break;
		}
	}
	t.move=function(){
		var newHead;
		if(snakes[0].x snakes[0].w >=canvas.width || snakes[0].x-snakes[0].w<0 ||
		snakes[0].y-snakes[0].w<0 || snakes[0].y snakes[0].w>canvas.height){
			gameover();
		}else{
			if(t.dir=='R'){
				newHead=new Block(snakes[0].x gridWidth,snakes[0].y,gridWidth);
			}else if(t.dir=='L'){
				newHead=new Block(snakes[0].x-gridWidth,snakes[0].y,gridWidth);
			}else if(t.dir=='D'){
				newHead=new Block(snakes[0].x,snakes[0].y gridWidth,gridWidth);
			}else if(t.dir=='U'){
				newHead=new Block(snakes[0].x,snakes[0].y-gridWidth,gridWidth);
			}
		}
		if(newHead.x==snakes[1].x && newHead.y==snakes[1].y){
			t.dir=t.odir;
			return;
		}
		newHead.drawBlock();
		snakes.unshift(newHead);
		snakes[snakes.length-1].clear();
		snakes.pop();
		for(var i=0;i<foods.length;i  ){
			if(foods[i].equal(snakes[0])){
				t.growth();
				score=score 10;
				textmsg.innerHTML=score "分";
				t.len=t.len 1;
				clearInterval(snake_interval);
				speed=speed<20?speed:speed-10;
				snake_interval=setInterval(t.move,speed);
			}
		}
		for(var i=1;i<snakes.length;i  ){
			if(snakes[i].equal(snakes[0])){
				gameover();
			}
		}
	}
	t.growth=function(){
		var tail1=snakes[snakes.length-1];
		var tail2=snakes[snakes.length-2];
		var addBlock;
		if(tail1.x==tail2.x){
			if(tail1.y>tail2.y)
				addBlock=new Block(tail1.x,tail1.y gridWidth,gridWidth);
			else
			    addBlock=new Block(tail1.x,tail1.y-gridWidth,gridWidth);
		}else{
			if(tail1.x>tail2.x)
				addBlock=new Block(tail1.x gridWidth,tail1.y,gridWidth);
			else
			    addBlock=new Block(tail1.x-gridWidth,tail1.y,gridWidth);
		}
		snakes.push(addBlock);
		addBlock.drawBlock();
	}
}

function Farm(){
	var t=this;
	ctx.fillStyle='white';
	ctx.fillRect(0,0,canvas.width,canvas.height);
	foods=[];
	t.addfood=function(){
		var x=parseInt(canvas.width/gridWidth*Math.random())* gridWidth;
		var y=parseInt(canvas.height/gridWidth*Math.random())* gridWidth;
		var food=new Food(x,y,gridWidth);
		food.foodInit();
		foods.push(food);
	}
	snakes=[];
	t.snake=new Snake(100,100,5,500);
	t.snake.init();
}


标签: HTML5 HTML 贪吃蛇

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警