贪吃蛇html5,贪吃蛇html程序设计报告

贪吃蛇碰到自己就会死的html5代码

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增加暂停键

以前也很少关注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

请采纳！！！

使用html5开发贪吃蛇小游戏怎么设定撞到自己就会结束

这个当然要自己检测。用二维数组。用不同的数值来代表身体。头部。空白。食物。判断下一个位置。很简单

文章名称：贪吃蛇html5,贪吃蛇html程序设计报告
网页路径：http://scjbc.cn/article/dsdiish.html