13518219792
以前也很少关注html5，感觉选择html已经慢慢成为趋势，想了解下。就找了个游戏学习了，写完这个游戏感觉html5和js结合很紧密，如果js不是特别好。估计需要先补习下js，这个只是个人的建议，不一定准确。还有一个就是，思维和逻辑要特别清楚，不然写游戏可能很痛苦。
创新互联建站公司2013年成立，先为鹤城等服务建站，鹤城等地企业，进行企业商务咨询服务。为鹤城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
贪吃蛇，最主要的功能点： 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
请采纳！！！
第一个问题，是缺少引用文件，检查一下是否本地有个js文件挪了位置
第二个问题，是语法格式问题，如果解决了第一个问题，第二个问题很可能也解决了。
这个当然要自己检测。用二维数组。用不同的数值来代表身体。头部。空白。食物。判断下一个位置。很简单
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);
}
望采纳！！！！
