jQuery贪吃蛇大战小游戏特效源码下载


jQuery贪吃蛇大战小游戏特效源码下载
jQuery贪吃蛇大战小游戏特效源码下载以及贪吃蛇大战、小游戏等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<div class="title">贪吃蛇大战小游戏<div id="title" class="score">得分:0分</div></div>
<img src="start.png" class="img_btn" id="start">
<canvas id="myCanvas" width="360" height="620" class="box">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var ctx=document.getElementById("myCanvas").getContext("2d");
var title = $('#title');
var r = [{x:100,y:30}];//竖的坐标
var co=40;
var speed = 10;//初始化速度
var e=null;
var l=null;//鼠标方位
var s1;
var s2;
var score = 0;
ctx.fillStyle='red';
var img = new Image();
$(document).ready(function(){
	img.src = './fruit.png';
	int();//初始化数据
	s1 = setInterval(start,speed);//定时器
	$('body').mousemove(function(e) { 
		var x = e.originalEvent.x || e.originalEvent.layerX || 0; 
		var y = e.originalEvent.y || e.originalEvent.layerY || 0; 
		l = {y:y,x:x};
	});
	$('#start').click(function(){
		r = [{x:100,y:30}];//竖的坐标
		score = 0;
		co=40;
		e=null;
		l=null;//鼠标方位
		speed = 10;//初始化速度
		int();//初始化数据
		s1 = setInterval(start,speed);//定时器
	});
});
document.onkeyup = function(event){
};
document.onkeydown = function(){
	if(event.keyCode>=37 && event.keyCode<=40 && (Math.abs(event.keyCode-co) != 2)){
		co = event.keyCode;
	}
};
function start(){
	stop();//结束
	eat();//吃果实
	r.unshift(r.pop());//尾接到头
	keyboard();//键盘控制
	clear();
	fruit();//画果实
	snake();//画蛇
}
//初始化数据
function int(){
	for(var i=1; i<20; i++){
		var temp = {x:100,y:r[0].y+1};
		r.unshift(temp);
	}
}
//吃到果实,增加身体长度
function add(){
	for(var i=0; i<5; i++){
		var temp1;
		switch(co){
		case 37:
			temp1 = {x:r[0].x-1,y:r[0].y};
			break;
		case 38:
			temp1 = {x:r[0].x,y:r[0].y-1};
			break;
		case 39:
			temp1 = {x:r[0].x+1,y:r[0].y};
			break;
		case 40:
			temp1 = {x:r[0].x,y:r[0].y+1};
			break;
		}
		r.unshift(temp1);
	}
}
//头吃到身
function check(e,j){
	for(var i=0;i<r.length;i++){
		if(j!=i && r[i].x==e.x && r[i].y==e.y)return true;
	}
	return false;
}
//停止
function stop(){
	if( r[0].x < 0 || r[0].x >= 350 || r[0].y < 0 || r[0].y >= 610){
		clearInterval(s1);
		alert("game over!");
		return false;
	}//咬到自己或碰到墙壁,不再执行
}
//键盘控制
function keyboard(){
	 r[0].x = r[1].x;
	 r[0].y = r[1].y;
	 switch(co){
		case 37:
			r[0].x = r[1].x - 1;
			break;
		case 38:
			r[0].y = r[1].y - 1;
			break;
		case 39:
			r[0].x = r[1].x + 1;
			break;
		case 40:
			r[0].y = r[1].y + 1;
			break;
	}
}
//加速
function fly(){
	console.log('加速');
	console.log(speed);
	if(speed > 0.5){
		speed=speed-0.5;//加速
	}
}
//吃果实
function eat(){
	if(e){
		if(r[0].y>=e.y-18&&r[0].y<=e.y+18&&r[0].x<=e.x+18&&r[0].x>=e.x-18){
			add();//碰到果实加到蛇身长度
			var color = ['red','blue','black','orange','yellow','grey'];
			ctx.fillStyle = color[Math.floor(Math.random()*7)];
			e=null;//把果实清空
			score += 10;
			title.text('得分:'+score+'分');
			fly();
		}
	}
}
//画果实
function fruit(){
	if(e)ctx.drawImage(img,e.x,e.y,20,20);
	while(e==null || check(e)){
		e={y:(Math.random()*610 >>>0),x:(Math.random()*350 >>>0)};
	}
}
//画蛇
function snake(){
	for(var i=0;i<r.length;i++){
		ctx.fillRect(r[i].x,r[i].y,10,10);
	}
}
//清理画布
function clear(){
	ctx.clearRect(0,0,360,620);//清空画布
}
</script>

相关推荐

发表评论

相关文章