html5-贪吃蛇代码

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45128635/article/details/91350175
<!doctype html>
<html>
<head>
<meta name="author" content="苏道涵"></meta>
<meta name="keywords" content="贪吃蛇,html5小游戏"></meta>
<meta name="description" content="简单小游戏贪吃蛇"></meta>

<meta http-equiv="content-Type" content="text/html;charset=gb2312"></meta>
<title>贪吃蛇</title>
<style>
div{text-align:center;}
canvas{

border-style:solid;
margin-left:50px;
margin-right:50px;
float:left;
}
div.yangshi1{
font-size:25px;
margin-bottom:60px;
}
div.yangshi2{
font-size:25px;
border-style:solid;


width:100px;
height:50px;
float:right;
}
</style>

<body >
<div ><h1>贪吃蛇</h1></div>
<canvas id="drawing" height=450px width=900px ></canvas>
<div class="yangshi1" onclick="begin()">开始</div>
<div class="yangshi1" onclick="stop()">暂停</div>
<div>
<div style="font-size:25px" >等级</div>
<div class="yangshi2" id="leve"></div>
<br><br><br><br>


<div style="font-size:25px"  >得分
</div>

<div class="yangshi2" id="score"></div>
</div>
<br><br><br>
<div align=center onclick="removeup()">上</div>
<div align=center><span style="margin-right:20px;margin-left:20px" onclick="removeleft()">左</span><span style="margin-right:20px" onclick="removeright()">右

</span><div>
<div onclick="removedown()">下</div>
<script>


var drawing=document.getElementById("drawing");
var posx=8;
var posy=2;
var dx=0;
var dy=1;
var score=0;
var leve=0;
var lock=1;
var kaiguan=1;
var tArray=new Array();
var length=5;
for(var k=0;k<36;k++){
tArray[k]=new Array();
for(var j=0;j<18;j++){

tArray[k][j]=0;
}
}
function removeleft(){if(dx==0)
{dx=-1;

dy=0;  }}
function removeright(){if(dx==0){
dx=1;
dy=0;
}}
function removeup(){if(dy==0){
dy=-1;dx=0;
}}
function removedown(){if(dy==0){
dy=1;
dx=0;
}}

document.onkeydown=function(event){
if(lock==1){
var e=event||window.event||arguments.callee.caller.arguments[0];
if(e&&e.keyCode==37){

removeleft();
 }
if(e&&e.keyCode==38){
removeup();
}
if(e&&e.keyCode==39){
removeright();
}
if(e&&e.keyCode==40){
removedown();
}
lock=0;
}
}
if(drawing.getContext){
var context=drawing.getContext("2d");
context.fillStyle="gray";
context.lineWidth=0.1;
context.beginPath();
for(var t=25;t<=450;t=t+25){
context.moveTo(0,t);
context.lineTo(0,t);

context.lineTo(900,t);

}
for(var s=25;s<=900;s=s+25){
context.moveTo(s,0);
context.lineTo(s,0);
context.lineTo(s,450);

}
context.stroke();
context.fillStyle="blue";

var start=100;
for(var i=0;i<5;i++){
context.fillRect(start,50,25,25);
context.strokeRect(start,50,25,25);
tArray[4+i][2]=i+1;


start=start+25;
}


}


function move(){
lock=1;
posx=posx+dx;
posy=posy+dy;
if(posx==36||posy==18||posx==-1||posy==-1||tArray[posx][posy]>0 ){
window.clearInterval(id);
window.alert("game over");
window.location.reload();
}
if(tArray[posx][posy]==0){
for(var t1=0;t1<36;t1++){
for(var t2=0;t2<18;t2++){


if(tArray[t1][t2]==1){
context.clearRect(t1*25,t2*25,25,25);
tArray[t1][t2]=0;

}
if(tArray[t1][t2]>0)
tArray[t1][t2]--;





}
}
}
else{
length++;
food();
score++;
if(score%10==0){
leve++;
time=time+100;
}
document.getElementById("leve").innerHTML=leve;
document.getElementById("score").innerHTML=score;
}
tArray[posx][posy]=length;
context.fillStyle="blue";
context.fillRect(25*posx,posy*25,25,25);
context.strokeRect(25*posx,posy*25,25,25);




}



function food(){
foodx=Math.ceil(Math.random()*36)-1;
foody=Math.ceil(Math.random()*18)-1;
if(foodx==-1||foody==-1||tArray[foodx][foody]>0){
food();
}
context.fillStyle="yellow";
context.fillRect(foodx*25,foody*25,25,25);
tArray[foodx][foody]=-1;

}
food();

var time=0;
document.getElementById("leve").innerHTML=leve;
document.getElementById("score").innerHTML=score;
var id;
function begin(){if(kaiguan==1){
id=window.setInterval(move,2000-time);
kaiguan=0;
}
}
function stop(){
kaiguan=1;
window.clearInterval(id);
}



</script>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页