本文未经博主允许不得转载:
闲来无事,勤能补拙;
贪吃蛇代码-----用来练手仅供参考:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-image: url(body.jpg);
background-repeat: no-repeat;
}
div{
width: 1180px;
height: 600px;
border: 10px solid #666666;
background: #EEEEEE;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
div+div{
width: 1180px;
height: 200px;
border: 10px solid #666666;
background: #c6c5d3;
margin: auto;
}
div+div>input{
margin-top: 80px;
margin-left: 30px;
width: 100px;
height: 50px;
}
div+div>select{
margin-top: 80px;
margin-left: 30px;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div>
<canvas id="snake" width="1180" height="600" style="border: 1px solid #666"></canvas>
</div>
<div>
<input type="button" name="begin" value="重新开始" οnclick="refrash()">
<input type="button" name="stope" value="暂停" οnclick="pause()" id="pause_begin">
<input type="text" name="score" value="得分" id="score" readOnly="true" style="text-align:center;color:#FF0000;">
<input type="button" name="speed" value="点击加速" οnclick="speedSnake()" style="text-align:center;color:#FF0000;" id="speedSnake">
<select id="model" readOnly="true" style="text-align:center;color:#FF0000;">
<option value="1" selected="selected">默认</option>
<option value="2">无敌</option>
</select>
<textarea name="注意" cols="65" rows="1" style="margin-left: 600px;margin-top: 40px" readOnly="true">注意事项:吃到150分之后,每吃50分加速10ms,初始速度为200ms
</textarea>
</div>
<script type="text/javascript">
var context=document.getElementById("snake");
var ctx=context.getContext("2d");
var snake=[{x:3,y:7},{x:3,y:6},{x:3,y:5},{x:3,y:4}];//蛇身
var dir=40;
var food=[];
var scoreValue=0;
var speed=200;
// 键盘控制变量
document.οnkeydοwn=function(event){
//alert(event.keyCode);//判断键盘值
dir = (event.keyCode>=37
&& event.keyCode<=40
&& Math.abs((event.keyCode-dir))!=2
)?event.keyCode:dir;
}
function onframe(){
var model=document.getElementById("model");
if(model.options[model.selectedIndex].value==1){
RuleDie();
}else if(model.options[model.selectedIndex].value==2){
RuleNoDie();
free();
}
drow();
createFoodVar();
ctx.beginPath();
ctx.fillRect(food[0].x*20,food[0].y*20,20,20);
ctx.closePath();
crashEat();
}
// 自动爬行
var timer=window.setInterval(onframe,speed);
// 画表格,画蛇,画食物
function drow(){
//控制蛇的移动
switch(dir){
case 37:
snake[0].x=snake[1].x-1;
snake[0].y=snake[1].y;
break;
case 38:
snake[0].x=snake[1].x;
snake[0].y=snake[1].y-1;
break;
case 39:
snake[0].x=snake[1].x+1;
snake[0].y=snake[1].y;
break;
case 40:
snake[0].x=snake[1].x;
snake[0].y=snake[1].y+1;
break;
}
ctx.clearRect(0,0,context.width,context.height);
//画格子
for(var j=0;j<=context.width;j+=20){
ctx.beginPath();
ctx.moveTo(j,0);
ctx.lineTo(j,context.width);
ctx.moveTo(0,j);
ctx.lineTo(context.width,j);
ctx.strokeStyly="#eee";
ctx.stroke();
ctx.closePath();
}
//画蛇
for(var i=0;i<snake.length;i++){
ctx.beginPath();
ctx.fillRect(snake[i].x*20,snake[i].y*20,20,20);
ctx.closePath();
}
}
// 创造食物变量
function createFoodVar(){
if(food.length==0){
createFood();
function createFood(){
food=[{x:parseInt(Math.random()*(context.width)/20),
y:parseInt(Math.random()*(context.height)/20)}];
for(var i=0;i<snake.length;i++){
if ((food[0].x==snake[i].x)&&(food[0].y==snake[i].y)) {
createFood();
}
}
}
}
}
//蛇捕食
function crashEat(){
if (food.length!=0 ) {
if((snake[0].x==food[0].x && snake[0].y==food[0].y)){
snake.push(food);
food=[];
score();
}
}
}
//创建规则让蛇死
function RuleDie(){
var flag=false;
for(var i=1;i<snake.length;i++){
if(snake[0].x==snake[i].x&&snake[0].y==snake[i].y){
flag=true;
}
}
if ((snake[0].x<=0&&dir==37)||(snake[0].x>=context.width/20-1&&dir==39)
|| (snake[0].y<=0&&dir==38)||(snake[0].y>=context.height/20-1&&dir==40)) {
alert("头部擦伤,请疗养,再来一局吧!");
window.clearInterval(timer);
}else if(flag){
alert("咬到自己了,快住口!");
window.clearInterval(timer);
}else{
snake.unshift(snake.pop());
}
}
//创建规则不死技能
function RuleNoDie(){
if (snake[0].x<0&&dir==37) {
snake[0].x=context.width/20;
}
if (snake[0].x>=context.width/20&&dir==39) {
snake[0].x=0;
}
if (snake[0].y>=context.height/20&&dir==40) {
snake[0].y=0;
}
if (snake[0].y<0&&dir==38) {
snake[0].y=context.height/20;
}
snake.unshift(snake.pop());
}
//暂停
function pause(){
window.clearInterval(timer);
var pause=document.getElementById("pause_begin");
pause.setAttribute("value","继续");
pause.setAttribute("onclick","begin()");
}
//继续
function begin(){
timer=window.setInterval(onframe,speed);
var pause=document.getElementById("pause_begin");
pause.setAttribute("value","暂停");
pause.setAttribute("onclick","pause()");
}
//重新开始
function refrash(){
window.location.reload();
}
//得分
function score(){
scoreValue+=10;
var score=document.getElementById("score");
score.setAttribute("value",scoreValue);
}
//自由行动
function free(){
createFoodVar();
if(food[0].x<snake[1].x){
dir=37;
}
if(food[0].x>snake[1].x){
dir=39;
}
if (food[0].y<snake[1].y) {
dir=38;
}
if (food[0].y>snake[1].y) {
dir=40;
}
}
//点击加速
function speedSnake(){
speed-=10;
if (speed<=0) {speed=0;}
var speedSnake=document.getElementById("speedSnake");
speedSnake.setAttribute("value","当前速度:"+speed+"ms");
window.clearInterval(timer);
timer=window.setInterval(onframe,speed);
}
</script>
</body>
</html>