贪吃蛇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);

}

望采纳！！！！

相关问答

Q1: 贪吃蛇怎么用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

请采纳！！！

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

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