之前呢,写了一些简单的小游戏,拿出来和大家分享一下。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>snake</title>
<style type="text/css">
body{
font-weight:1200;
text-align: center;
}
#title{
font-size: 80px;
color: red;
}
#score{
font-size: 45px;
/*text-align: right;*/
color: blue;}
button{
background-color: aqua;
width: 160px;
height: 80px;
margin-right: 10%;
font-size: 0.7em;
font-weight: 200;
}
canvas{
margin-bottom: 3%;
border:2px solid #000000;
background-color: transparent;
}
</style>
</head>
<body>
<h1 id="title">贪吃蛇</h1>
<p id="score"><button id="start">开始游戏</button>分数:0</p>
<canvas id="pic" width="800" height="400"></canvas>
<script type="text/javascript">
var score=0; //分数
var canvas=document.getElementById("pic");
var cxt=canvas.getContext('2d');
//定义食物
var food=new Object();
food.width=20;
food.height=20;
food.randx=0;
food.randy=0;
//定义蛇身
var snake=new Object();
snake.x=100;
snake.y=100;
snake.h=20;
snake.w=20;
snake.lastdir=39; //初始方向
//this.snake.arrary=[410,100,430,100,450,100];
//数组,用来存放蛇身
var snakebody=[];
//随机产生食物
function randfood(){
food.randx=parseInt(Math.random()*40)*20;
food.randy=parseInt(Math.random()*20)*20;
cxt.fillStyle='rgb('+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+')';
cxt.fillRect(food.randx+0.5,food.randy+0.5,food.width-1,food.height-1);
//检测食物是否与蛇身重合
snakebody.forEach((item)=>{
if(item.x===food.randx && item.y===food.randy){
randfood();
}else{
return;
}
})
}
function firstsnake(){
cxt.fillStyle='rgb('+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+','+parseInt(Math.random()*206)+')';
for(var i=0;i<3;i++){
snake.x=snake.x+snake.w;
snakebody.unshift({...snake});
}
snakebody.forEach((item)=>{
cxt.fillRect(item.x+0.5,item.y+0.5,item.w-1,item.h-1);
})
}
var button=document.getElementById("start");
button.addEventListener('click',start);
function start(){
button.removeEventListener('click',start);
randfood();
firstsnake();
var time=setInterval(i_move,200); //设置自动移动速度,单位为毫秒
function i_move(){
switch(snake.lastdir)
{
case 38:
snake.y=snake.y-snake.h;
break;
case 40:
snake.y=snake.y+snake.h;
break;
case 37:
snake.x=snake.x-snake.w;
break;
case 39:
snake.x=snake.x+snake.w;
break;
}
snakebody.forEach((item)=>{
cxt.clearRect(item.x,item.y,item.w,item.h);
})
snakebody.unshift({...snake});
if(snake.x===food.randx&&snake.y===food.randy){ //吃食检测
randfood();
cxt.fillStyle='rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
score++;
document.getElementById("score").innerHTML="分数:"+score;
}
else{
snakebody.pop();
}
if(snake.x>=800||snake.x<0||snake.y<0||snake.y>=400){
clearInterval(time);
alert("游戏结束!!!");
cxt.clearRect(0,0,800,400);
}
//蛇头与蛇身的碰撞检测
for(var i=1;i<snakebody.length;i++){
if(snakebody[0].x===snakebody[i].x && snakebody[0].y===snakebody[i].y){
alert('游戏结束!');
clearInterval(time);
cxt.clearRect(0,0,800,400);
}
}
snakebody.forEach((item)=>{
cxt.fillRect(item.x+0.5,item.y+0.5,item.w-1,item.h-1);
})
}
document.addEventListener("keydown",(event)=>{ //键盘监听事件
if(Math.abs(event.keyCode-snake.lastdir)===2)
return;
else{
snake.lastdir=event.keyCode;
}
switch(event.keyCode)
{
case 38:
snake.y=snake.y-snake.h;
break;
case 40:
snake.y=snake.y+snake.h;
break;
case 37:
snake.x=snake.x-snake.w;
break;
case 39:
snake.x=snake.x+snake.w;
break;
}
snakebody.forEach((item)=>{
cxt.clearRect(item.x,item.y,item.w,item.h);
})
//增加蛇身长度,如果没吃到果实,则删除数组中最后一个,实现移动
//如果吃到果实,不删除
snakebody.unshift({...snake});
if(snake.x===food.randx&&snake.y===food.randy){ //吃食检测
randfood();
cxt.fillStyle='rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
score++;
document.getElementById("score").innerHTML="分数:"+score;
}
else{
snakebody.pop();
}
if(snake.x>=800||snake.x<0||snake.y<0||snake.y>=400){
clearInterval(time);
alert("游戏结束!!!");
cxt.clearRect(0,0,800,400);
}
//蛇头与蛇身的碰撞检测
for(var i=1;i<snakebody.length;i++){
if(snakebody[0].x===snakebody[i].x && snakebody[0].y===snakebody[i].y){
alert('游戏结束!');
clearInterval(time);
cxt.clearRect(0,0,800,400);
}
}
snakebody.forEach((item)=>{
cxt.fillRect(item.x+0.5,item.y+0.5,item.w-1,item.h-1);
})
//up 38
//down 40
//left 37
//right 39
})
}
</script>
</body>
</html>