Skip to content

Instantly share code, notes, and snippets.

@pureexe

pureexe/Snake.html

Created October 25, 2012 00:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pureexe/3949884 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pureexe/3949884 to your computer and use it in GitHub Desktop.
Download ZIP
เกมส์งู
Raw
Snake.html
<html>
<body onkeydown="al()">
<center><canvas id="myCanvas" width="1000" height="700" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas></center>
<br>
<input tyep="text" id="debug_x" />
<input tyep="text" id="debug_y" />
<br>
<input tyep="text" id="debug_food_x" />
<input tyep="text" id="debug_food_y" />
<br>
<input tyep="text" id="debug_len" />
<br>
<input type="button" id="btn_down" onclick="al(37)" value="left" />
<input type="button" id="btn_down" onclick="al(38)" value="up" />
<input type="button" id="btn_down" onclick="al(39)" value="right" />
<input type="button" id="btn_down" onclick="al(40)" value="down" />
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var last_x=0;
var last_y=0;
var x=0;
var y=0;
var compass=2;
var isinterval=0;
var food_x=0;
var food_y=0;
var bitsize=20;
var len=3;
var round=0;
var locate_x=new Array();
var locate_y=new Array();
var i;
var inval="";
//var timer1 =setTimeout(run, 1000);
function die_chk(){
if(x>c.width/bitsize-1)
x=0;
if(y>c.height/bitsize-1)
y=0;
if(y<0)
y=c.height/bitsize-1;
if(x<0)
x=c.width/bitsize-1;
/*
for(i=0;i<len;i++)
{
if(locate_x[round-(i+1)]==x&&locate_y[round-(i+1)]==y)
{
alert("You die");
x=0;
y=0;
len=3;
round=0;
compass=2;
ctx.clearRect(0,0,c.width,c.height);
food_paste();
}
}*/
}
function food_paste(){
food_x=Math.floor((Math.random()*(c.width/bitsize)));
food_y=Math.floor((Math.random()*(c.height/bitsize)));
document.getElementById('debug_food_x').value="food_x = "+food_x;
document.getElementById('debug_food_y').value="food_y = "+food_y;
document.getElementById('debug_len').value="len = "+len;
ctx.fillStyle="#00FF00";
ctx.fillRect(food_x*bitsize,food_y*bitsize,bitsize,bitsize);
len++;
}
function run()
{
if(compass==0)
x--;
else if(compass==1)
y--;
else if(compass==2)
x++;
else if(compass==3)
y++;
die_chk();
draw();
if(x==food_x&&y==food_y)food_paste();
locate_x[round%(c.height*c.width)]=x;
locate_y[round%(c.height*c.width)]=y;
round++;
}
function al(u)
{
key=event.which;
if(u)
key=u;
if(key==37)
{
x--;
compass=0;
}
else if(key==38)
{
y--;
compass=1;
}
else if(key==39)
{
x++;
compass=2;
}
else if(key==40)
{
y++;
compass=3;
}
die_chk();
draw();
if(!isinterval)
{
inval=setInterval(run,50);
isinterval=1;
food_paste();
}
if(x==food_x&&y==food_y)food_paste();
locate_x[round%(c.height*c.width)]=x;
locate_y[round%(c.height*c.width)]=y;
round++;
}
function draw()
{
// ctx.clearRect(last_x*bitsize,last_y*bitsize,bitsize,bitsize);
ctx.clearRect(locate_x[round%(c.height*c.width)-len]*bitsize,locate_y[round%(c.height*c.width)-len]*bitsize,bitsize,bitsize);
ctx.fillStyle="#000000";
ctx.fillRect(x*bitsize,y*bitsize,bitsize,bitsize);
ctx.fillStyle="#FF0000";
ctx.fillRect(x*bitsize+3,y*bitsize+3,bitsize-6,bitsize-6);
last_x=x;
last_y=y;
document.getElementById('debug_x').value="x = "+x;
document.getElementById('debug_y').value="y = "+y;
}
</script>
</html>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment