snake.js
创新互联公司是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：成都网站制作、网站建设、外贸网站建设、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。
代码如下：：：
复制代码
代码如下:
var canvas;
var ctx;
var timer;
//measures
var x_cnt = 15;
var y_cnt = 15;
var unit = 48;
var box_x = 0;
var box_y = 0;
var box_width = 15 * unit;
var
box_height = 15 * unit;
var bound_left = box_x;
var bound_right = box_x
+ box_width;
var bound_up = box_y;
var bound_down = box_y + box_height;
//images
var image_sprite;
//objects
var snake;
var food;
var food_x;
var food_y;
//functions
function Role(sx, sy, sw,
sh, direction, status, speed, image, flag)
{
this.x = sx;
this.y =
sy;
this.w = sw;
this.h = sh;
this.direction = direction;
this.status = status;
this.speed = speed;
this.image = image;
this.flag = flag;
}
function transfer(keyCode)
{
switch
(keyCode)
{
case 37:
return 1;
case 38:
return 3;
case
39:
return 2;
case 40:
return 0;
}
}
function addFood()
{
//food_x=box_x+Math.floor(Math.random()*(box_width-unit));
//food_y=box_y+Math.floor(Math.random()*(box_height-unit));
food_x =
unit * Math.floor(Math.random() * x_cnt);
food_y = unit *
Math.floor(Math.random() * y_cnt);
food = new Role(food_x, food_y, unit,
unit, 0, 0, 0, image_sprite, true);
}
function play(event)
{
var
keyCode;
if (event == null)
{
keyCode = window.event.keyCode;
window.event.preventDefault();
}
else
{
keyCode =
event.keyCode;
event.preventDefault();
}
var cur_direction =
transfer(keyCode);
snake[0].direction = cur_direction;
}
function
update()
{
//add a new part to the snake before move the snake
if
(snake[0].x == food.x snake[0].y == food.y)
{
var length =
snake.length;
var tail_x = snake[length - 1].x;
var tail_y =
snake[length - 1].y;
var tail = new Role(tail_x, tail_y, unit, unit,
snake[length - 1].direction, 0, 0, image_sprite, true);
snake.push(tail);
addFood();
}
//modify attributes
//move the head
switch
(snake[0].direction)
{
case 0: //down
snake[0].y += unit;
if
(snake[0].y bound_down - unit)
snake[0].y = bound_down - unit;
break;
case 1: //left
snake[0].x -= unit;
if (snake[0].x
bound_left)
snake[0].x = bound_left;
break;
case 2: //right
snake[0].x += unit;
if (snake[0].x bound_right - unit)
snake[0].x = bound_right - unit;
break;
case 3: //up
snake[0].y
-= unit;
if (snake[0].y bound_up)
snake[0].y = bound_up;
break;
}
//move other part of the snake
for (var i = snake.length - 1; i
= 0; i--)
{
if (i 0)
//snake[i].direction=snake[i-1].direction;
{
snake[i].x = snake[i -
1].x;
snake[i].y = snake[i - 1].y;
}
}
}
function
drawScene()
{
ctx.clearRect(box_x, box_y, box_width, box_height);
ctx.strokeStyle = "rgb(0,0,0";
ctx.strokeRect(box_x, box_y, box_width,
box_height);
//detection collisions
//draw images
for (var i = 0; i
snake.length; i++)
{
ctx.drawImage(image_sprite, snake[i].x,
snake[i].y);
}
ctx.drawImage(image_sprite, food.x, food.y);
}
function init()
{
canvas = document.getElementById("scene");
ctx
= canvas.getContext('2d');
//images
image_sprite = new Image();
image_sprite.src = "images/sprite.png";
image_sprite.onLoad = function
()
{}
//ojects
snake = new Array();
var head = new Role(0 *
unit, 0 * unit, unit, unit, 5, 0, 1, image_sprite, true);
snake.push(head);
window.addEventListener('keydown', play, false);
addFood();
setInterval(update, 300); //note
setInterval(drawScene, 30);
}
望采纳！！！！
以前也很少关注html5，感觉选择html已经慢慢成为趋势，想了解下。就找了个游戏学习了，写完这个游戏感觉html5和js结合很紧密，如果js不是特别好。估计需要先补习下js，这个只是个人的建议，不一定准确。还有一个就是，思维和逻辑要特别清楚，不然写游戏可能很痛苦。
贪吃蛇，最主要的功能点： 1，蛇的移动 2，改变蛇的方向 3，放置食物 4，增加舍身 5,怎么挂的。
第一次写游戏，第一次写html5
感觉还是很吃力的。写完了，给大家分享下。互相交流.............不懂的或者有建议的，可以留言给我。。。代码很短，就60行。
不过这个是个半成品，等写完成了。再更新下
复制代码
代码如下:
!DOCTYPE HTML
html
body
canvas id="myCanvas" width="400" height="400"
style="border:1px solid #c3c3c3;"/canvas
script
type="text/javascript"
var c=document.getElementById("myCanvas");
var time = 160 ; //蛇的速度
var cxt=c.getContext("2d");
var x = y = 8;
var a = 0; //食物坐标
var t = 20; //舍身长
var map = []; //记录蛇运行路径
var
size = 8; //蛇身单元大小
var direction = 2; // 1 向上 2 向右 0 左 3下
interval =
window.setInterval(set_game_speed, time); // 移动蛇
function set_game_speed(){
// 移动蛇
switch(direction){
case 1:y = y-size;break;
case 2:x =
x+size;break;
case 0:x = x-size;break;
case 3:y = y+size;break;
}
if(x400 || y400 || x0 || y0){
alert("你挂了，继续努力吧!失败原因：碰壁了.....");window.location.reload();
}
for(var
i=0;imap.length;i++){
if( parseInt(map[i].x)==x
parseInt(map[i].y)==y){
alert("你挂了，继续努力吧！失败原因：撞到自己了.....");window.location.reload();
}
}
if (map.lengtht) { //保持舍身长度
var cl = map.shift(); //删除数组第一项，并且返回原元素
cxt.clearRect(cl['x'], cl['y'], size, size);
};
map.push({'x':x,'y':y}); //将数据添加到原数组尾部
cxt.fillStyle =
"#006699";//内部填充颜色
cxt.strokeStyle = "#006699";//边框颜色
cxt.fillRect(x, y,
size, size);//绘制矩形
if((a*8)==x (a*8)==y){ //吃食物
rand_frog();t++;
}
}
document.onkeydown = function(e) { //改变蛇方向
var code = e.keyCode - 37;
switch(code){
case 1 : direction =
1;break;//上
case 2 : direction = 2;break;//右
case 3 : direction =
3;break;//下
case 0 : direction = 0;break;//左
}
}
// 随机放置食物
function rand_frog(){
a = Math.ceil(Math.random()*50);
cxt.fillStyle
= "#000000";//内部填充颜色
cxt.strokeStyle = "#000000";//边框颜色
cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形
}
// 随机放置食物
rand_frog();
/script
/body
/html
请采纳！！！
这个当然要自己检测。用二维数组。用不同的数值来代表身体。头部。空白。食物。判断下一个位置。很简单
