html代码大全贪吃蛇（贪吃蛇怎么用html5增加暂停键）

本文目录

• 贪吃蛇怎么用html5增加暂停键
• 贪吃蛇的代码
• 用HTML做一个贪吃蛇
• 20行js代码实现的贪吃蛇大战
• 最简单的贪吃蛇代码

贪吃蛇怎么用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(x》400 || y》400 || x《0 || y《0){

alert(“你挂了，继续努力吧!失败原因：碰壁了.....“);window.location.reload();
}
for(var
i=0;i《map.length;i++){
if( parseInt(map[i].x)==x &&
parseInt(map[i].y)==y){

alert(“你挂了，继续努力吧！失败原因：撞到自己了.....“);window.location.reload();
}
}

if (map.length》t) { //保持舍身长度
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》

请采纳！！！

贪吃蛇的代码

我这边有代码
是JSP的
你试验一下
需要有JSP环境，我试验了下，可以玩！

《HTML》
《head》
《meta 《br》
《/div》
《/BODY》
《/HTML》

用HTML做一个贪吃蛇

之前自己写着玩，写了一个，不完美，仅仅是实现了。代码如下

这是index.html

《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《title》New Web Project《/title》
《script src=“js/base.js“ type=“text/javascript“》《/script》
《script src=“js/application.js“ type=“text/javascript“》《/script》
《/head》
《body style=“width: 100%;height:800px;margin:0;text-align: center“》
《div id=“gameZone“ style=“position:relative;margin-left: auto;margin-right: auto;“》《/div》
《/body》
《/html》

以下是html中引用的两个js文件

/**
* @author bsnpbda
*/
var Class = function(parent){
var klass = function(){
this.init.apply(this,arguments);
};
//change klass’s prototype’
if(parent){
var subclass = function(){};
subclass.prototype = parent.prototype;
klass.prototype = new subclass;
klass.prototype._super = parent.prototype;
}

klass.prototype.init = function(){};

//define surname for the prototype
klass.fn = klass.prototype;

//add class attribute
klass.extend = function(obj){
var extended = obj.extended;
for(var i in obj){
klass[i] = obj[i];
}
if(extended) extended(klass);
};

//add instance attribute
klass.include = function(obj){
var included = obj.included;
for(var i in obj){
klass.fn[i] = obj[i];
}
if(included) included(klass);
};

//add proxy method
klass.proxy = function(func){
var self = this;
return (function(){
return func.apply(self,arguments);
})
};

//add instance proxy method
klass.fn.proxy = klass.proxy;

return klass;
}

/**
* @author bsnpbda
*/
var configuration = {
unit:15,
interval:200
}
var Context = new Class;
Context.extend({
context:null,
getContext:function(){
if(!this.context)
this.context = new Context;
return this.context;
}
});
Context.include({
init:function(){
var w = document.body.clientHeight;
var h = document.body.clientWidth;
this.unit = h 《 w?h/configuration.unit:w/configuration.unit;
this.interval = configuration.interval;
var gameZone = document.getElementById(“gameZone“);
this.gameZone = gameZone;
var line = this.unit * configuration.unit;
gameZone.style.width = gameZone.style.lineHeight = gameZone.style.height = line + “px“;
gameZone.style.borderWidth = “1px“;
gameZone.style.borderStyle = “solid“;
},
setGame:function(game){
this.game = game;
},
getGame:function(){
return this.game;
}
})
var Dom = new Class;
Dom.include({
init:function(style){
var element = document.createElement(“div“);
this.element = element;
this.style = style;
for(var s in style){
element.style[s] = this.style[s];
}
},
attach:function(){
Context.getContext().gameZone.appendChild(this.element);
},
remove:function(){
Context.getContext().gameZone.removeChild(this.element);
},
refresh:function(){
for(var s in this.style){
this.element.style[s] = this.style[s];
}
}
})
var PaintModule = {
paint:function(){
this.element = new Dom(this.style);
this.element.attach();
},
repaint:function(){
this.element.refresh();
},
wipeOff:function(){
this.element.remove();
}
};
var Sprite = new Class;
Sprite.include(PaintModule);
Sprite.include({
default_cfg:{
id:0,
axisX:0,
axisY:0,
background:“black“
},
init:function(cfg){
var unit = Context.getContext().unit;
this.id = cfg.id || this.default_cfg.id;
this.style = {};
this.style.position = “absolute“;
this.style.width = unit+’px’;
this.style.height = unit+’px’;
this.axisX = (cfg.axisX || this.default_cfg.axisX);
this.style.left = this.axisX*unit + ’px’;
this.axisY = (cfg.axisY || this.default_cfg.axisY);
this.style.top = this.axisY*unit + ’px’;
this.style.background = cfg.background || this.default_cfg.background;
},
collideWith:function(sprite){
if(this.axisX == sprite.axisX && this.axisY == sprite.axisY){
return true;
}else{
return false;
}
}
});
var SnakeNode = new Class(Sprite);
SnakeNode.include({
init:function(cfg){
this._super.init.call(this,cfg);
this.direction = cfg.direction || this.default_cfg.direction;
this.lastDirc = cfg.lastDirc || this.default_cfg.lastDirc;
this.paint();
},
march:function(){
var unit = Context.getContext().unit;
if(this.direction == 0){
this.axisY -= 1;
}else if(this.direction == 6){
this.axisY += 1;
}else if(this.direction == 9){
this.axisX -= 1;
}else if(this.direction == 3){
this.axisX += 1;
}
this.style.left = this.axisX*unit + “px“;
this.style.top = this.axisY*unit + “px“;
this.lastDirc = this.direction;
this.repaint();
},
isOutOfBound:function(){
if(this.axisX 《 0 || this.axisY 《 0 || this.axisX 》= configuration.unit || this.axisY 》= configuration.unit)
return true;
return false;
}
})
var Snake = new Class;
Snake.include({
init:function(){
this.nodes =
this.addNode();
this.lock = false;
document.onkeydown = window.onkeydown = this.proxy(function(event){
event = event?event:window.event;
if(this.lock)return;//prevent push button too fast
this.lock = true;
var head = this.nodes;
var direction = head.direction;
if(event.keyCode == 37){
if(direction != 3){
head.direction = 9;
}
}else if(event.keyCode == 38){
if(direction != 6){
head.direction = 0;
}
}else if(event.keyCode == 39){
if(direction != 9){
head.direction = 3;
}
}else if(event.keyCode == 40){
if(direction != 0){
head.direction = 6;
}
}
this.nodes.lastDirc = direction;

})
},
addNode:function(){
var lastNode = this.nodes[this.nodes.length-1];
var direction = 3;
var axisX = 0,axisY = 0;
if(lastNode){
direction = lastNode.direction;
if(lastNode.direction==0){
axisY = lastNode.axisY + 1;
axisX = lastNode.axisX;
}else if(lastNode.direction==6){
axisY = lastNode.axisY - 1;
axisX = lastNode.axisX;
}else if(lastNode.direction == 9){
axisX = lastNode.axisX + 1;
axisY = lastNode.axisY;
}else if(lastNode.direction == 3){
axisX = lastNode.axisX - 1;
axisY = lastNode.axisY;
}
}
this.nodes.push(new SnakeNode({
id:this.nodes.length+1,
direction:direction,
axisX:axisX,
axisY:axisY
}))
},
march:function(){
for(var i=0;i《this.nodes.length;i++){
var curNode = this.nodes[i];
var nextDirc = curNode.lastDirc;
curNode.march();
if(i == 0){
if(curNode.isOutOfBound()){
alert(“游戏结束!“);
Context.getContext().game.end();
}
for(var j=1;j《this.nodes.length;j++){
if(curNode.collideWith(this.nodes[j])){
alert(“游戏结束“);
Context.getContext().game.end();
break;
}
}
}

if(i+1 《 this.nodes.length){
this.nodes[i+1].lastDirc = this.nodes[i+1].direction;
this.nodes[i+1].direction = nextDirc;
}
}
var game = Context.getContext().getGame();
if(this.nodes.collideWith(game.randomNode)){
this.addNode();
game.randomNodeFn();
}
this.lock = false;
}
})
var Game = new Class;
Game.include({
init:function(){
this.snake = new Snake;
Context.getContext().setGame(this);
},
start:function(){
this.randomNodeFn();
var _this = this;
this.interval = setInterval(function(){
_this.snake.march();
},Context.getContext().interval);
},
end:function(){
window.clearInterval(this.interval);
},
randomNodeFn:function(){
if(this.randomNode)this.randomNode.wipeOff();
while(true){
var rd_x = Math.floor(configuration.unit * Math.random());
var rd_y = Math.floor(configuration.unit * Math.random());
var isCrash = false;
for(var i=0;i《this.snake.nodes.length;i++){
if(rd_x == this.snake.nodes[i].axisX && rd_y == this.snake.nodes[i].axisY){
isCrash = true;
break;
}
}
if(!isCrash){
this.randomNode = new SnakeNode({
background:’red’,
axisX:rd_x,
axisY:rd_y
});
break;
}
}
}
});
window.onload = function(){
var game = new Game();
game.start();
}

20行js代码实现的贪吃蛇大战

稍等，我先留个坑，一会儿上电脑看看

《!DOCTYPE html》
《html lang=“en“》
《head》
《meta charset=“UTF-8“》《title》贪吃蛇重构《/title》《style》
body {display: flex;height: 100vh;margin: 0;padding: 0;justify-content: center;align-items: center;}《/style》
《/head》
《body》
《canvas id=“can“ width=“400“ height=“400“ style=“background-color: black“》对不起，您的浏览器不支持canvas《/canvas》
《script》var snake = [41, 40], //snake队列表示蛇身，初始节点存在但不显示direction = 1, //1表示向右，-1表示向左，20表示向下，-20表示向上
food = 43, //食物的位置
n, //与下次移动的位置有关box = document.getElementById(’can’).getContext(’2d’);//从0到399表示box里[0~19]*[0~19]的所有节点，每20px一个节点function draw(seat, color) {box.fillStyle = color;box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);//用color填充一个矩形，以前两个参数为x，y坐标，后两个参数为宽和高。}
document.onkeydown = function(evt) {//当键盘上下左右键摁下的时候改变directiondirection = snake - snake == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;};
!function() {snake.unshift(n = snake + direction);//此时的n为下次蛇头出现的位置，n进入队列 if(snake.indexOf(n, 1) 》 0 || n 《 0 || n 》 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {//if语句判断贪吃蛇是否撞到自己或者墙壁，碰到时返回，结束程序return alert(“GAME OVER!“);}draw(n, “lime“); //画出蛇头下次出现的位置if(n == food) { //如果吃到食物时，产生一个蛇身以外的随机的点，不会去掉蛇尾while (snake.indexOf(food = ~~(Math.random() * 400)) 》= 0);draw(food, “yellow“);} else { //没有吃到食物时正常移动，蛇尾出队列draw(snake.pop(),“black“);}setTimeout(arguments.callee, 150);//每隔0.15秒执行函数一次，可以调节蛇的速度
}();
《/script》
《/body》
《/html》

这不是我写的，是我看见的那个网址里面写的详细的。这个提交是电脑端，我发现一提交就自动压缩，乱了。

最简单的贪吃蛇代码

比较深奥，下面是各编程工具的贪吃蛇代码：
Delphi：http://hi.baidu.com/delphi%B1%E0%B3%CC/blog/item/e901eedd823fcf315982ddc7.html

C#：http://dev.csdn.net/article/51/51977.shtm

VB：http://zhidao.baidu.com/question/79834953.html

VC++：http://tieba.baidu.com/f?kz=282583673

Java：http://blog.csdn.net/mybelove/archive/2006/12/23/1455602.aspx
你也可以参考
http://zhidao.baidu.com/question/48175992.html?si=1