87,902
社区成员
发帖
与我相关
我的任务
分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake</title>
<style>
canvas{
border: 1px solid black;
}
input{margin-top: 10px;width: 90px;height: 30px;font-size: 12px}
</style>
</head>
<body onkeydown="isKeyDown(event)" >
<div style="height: 3%;width: 100%" align="center"><p>按上下左右开始游戏</p></div>
<div style="width: 38%;height: 60%;margin-top: 0%;margin-left: 30%" align="center">
<div style="height: 100%;width: 90px;float: left">
<input type="button" value="重新开始|空格" onclick="demo()">
<input type="button" value="正常难度" onclick="HardLevel(80,3)">
<input type="button" value="高级难度" onclick="HardLevel(26,1)">
<input type="button" value="暂停游戏|p" onclick="stop()">
</div>
<canvas id="canvas" width="400px" height="400px" style="background: #def5ff" >
</canvas>
</div>
<script src="snake3.js" type="text/javascript">
</script>
</body>
</html>
var x ,y ,foodx,foody;/**初始化头部位置*/
var ctx, key,value, time ,last_down="右",flag ;
var speed ;
var ary_x ,ary_y ;/**0为头*/
/**按键开始游戏*/
function isKeyDown( event ){
var e = event || window.event || arguments.callee.caller.arguments[0];
console.log(e.keyCode);
if( e && e.keyCode==32 )
demo();
if( e && e.keyCode==80 )
stop();
if( e && e.keyCode==38 ) /**上*/
{ value="上",start(value);}
if( e && e.keyCode==40 ) /**下*/
{ value="下",start(value);}
if( e && e.keyCode==37 ) /**左*/
{ value="左",start(value);}
if( e && e.keyCode==39)/**右*/
{ value="右",start(value);}
}
function start(value){
if(value!=last_down){
clearInterval(key);
key = setInterval( "move('"+value+"')",time );
}
}
/**设置开场布局*/
window.onload = demo();
/**控制蛇的移动*/
function move(value){
if(flag){/**如果食物没了,再生成一个*/
foodx = getRandom(0,40);
foody = getRandom(0,40);
ctx.fillRect(foodx*10,foody*10,9,9);
ctx.fillStyle = getRandomColor() ;
time -= speed ;/**使蛇的速度随长度变快*/
flag=false;
console.log(time);
}
if(value=="上"){
if(last_down=="下"){
y=y+10;
value="下";
}else{
y-=10;
}
}else if(value=="下"){
if(last_down=="上"){
y-=10;
value="上";
}else{
y+=10;
}
}else if(value=="左") {
if(last_down=="右"){
x+=10;
value="右";
}else{
x-=10;
}
}else if(value=="右"){
if(last_down=="左"){
x-=10;
value="左";
}else {
x+=10;
}
}
isgameover();
ctx.fillRect(x,y,9,9);
if(x==foodx*10 && y==foody*10){
ary_x[ary_x.length]= ary_x[ary_x.length-1];
ary_y[ary_y.length]= ary_y[ary_y.length-1];
flag=true;
}else{
ctx.clearRect(ary_x[ary_x.length-1],ary_y[ary_y.length-1],10,10);
}
r_ary();
last_down = value ;
}
function r_ary(){
for(var i=ary_x.length;i>=2;i--){
ary_x[i-1] = ary_x[i-2];
ary_y[i-1] = ary_y[i-2];
}
ary_x[0]=x;
ary_y[0]=y;
}
function stop(){
clearInterval(key);
}
function getRandom(start,end){
//省略特殊情形下的处理过程,比如n>m,或者n、m之一无法转化为有效数字;
return Math.floor(Math.random()*(end-start)+start); //{ x | x>=start,x<end,x∈N}
}
function isgameover(){
if(x<0||y<0||x>400||y>400){
alert("嘿!下次看着点墙。");
clearInterval(key);
}
if(time<=18){
alert("好好好,你牛逼!");
clearInterval(key);
}
for(var i=1;i<ary_x.length;i++){
if(x==ary_x[i]&&y==ary_y[i]){
alert("游戏结束");
clearInterval(key);
}
}
}
function demo(){
x = 140 , y = 100 , speed = 3 , time = 80 ,flag=true ;
ary_x = new Array() ,ary_y = new Array() ;
ctx = document.getElementById('canvas').getContext('2d');
ctx.clearRect(0,0,400,400);
for(var i=0;i<5;i++){
ary_x[4-i]=100+i*10;
ary_y[4-i]=100;
ctx.fillRect( ary_x[4-i],ary_y[4-i],9,9);
}
}
function getRandomColor(){
return '#'+(function(h){
return new Array(7-h.length).join("0")+h
})((Math.random()*0x1000000<<0).toString(16));
}
function HardLevel( m,n ){
time = m ;
speed = n ;
}
<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background:Black"></canvas>
<script>
var sn=[42,41],dz=43,fx=1,n,ctx=document.getElementById("can").getContext("2d");
function draw(t,c){
ctx.fillStyle=c;
ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
}
document.onkeydown=function(e){
n=[-1,-20,1,20][(e||event).keyCode-37]||fx;
if (sn[1]-sn[0]!=n)
fx=n;
};
(function run(){
sn.unshift(n=sn[0]+fx);
if(sn.indexOf(n,1)>0 || n<0||n>399||fx==1&&n%20==0||fx==-1&&n%20==19)
return alert("GAME OVER");
draw(n,"Lime");
if(n==dz){
while(sn.indexOf(dz=~~(Math.random()*400))>=0);
draw(dz,"Yellow");
}else
draw(sn.pop(),"Black");
setTimeout(run,100);
})();
</script>
</body>
</html>