用HTML做一个贪吃蛇?

用HTML做一个贪吃蛇?,第1张

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

这是index.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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:800pxmargin:0text-align: center">

<div id="gameZone" style="position:relativemargin-left: automargin-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[0]

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[0].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=0i<this.nodes.lengthi++){

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=1j<this.nodes.lengthj++){

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[0].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=0i<this.snake.nodes.lengthi++){

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()

}

微信贪吃蛇代码怎么输入:

首先说明一下,微信小程序是不能发布游戏的。

代码输入:手指按下,滑动,d起,确定蛇头转的方向,代码如下

//获取手指按下坐标

touchStart:function(e){

startX = e.touches[0].x

startY = e.touches[0].y

},

//获取手指移动坐标

touchMove:function(e){

moveX = e.touches[0].x

moveY = e.touches[0].y

distX = moveX – startX

distY = moveY – startY

if(Math.abs(distX) >Math.abs(distY) &&distX >0){

console.log(“right”)

direction = “right”

}else if(Math.abs(distX) >Math.abs(distY) &&distX <0){

console.log(“left”)

direction = “left”

}else if(Math.abs(distX) <Math.abs(distY) &&distY >0){

console.log(“bottom”)

direction = “bottom”

}else if(Math.abs(distX) <Math.abs(distY) &&distY <0){

console.log(“top”)

direction = “top”

}

},

touchEnd:function(){

snakeDirection = direction

新建一个文本文档,复制粘贴下面的代码进去,保存,关闭,更改扩展名为html,用浏览器打开。这就是一个只用了一行代码的贪吃蛇程序。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<canvas id="canvas" width="400" height="400"></canvas>

</head>

<body>

<script>

window.onkeydown=((ctx,snake,food,direction,move,draw)=>((loop,newFood,timer)=>Array.from({length:400}).forEach((_e,i)=>draw(ctx,i,"black"))||(timer=setInterval(()=>loop(newFood)||clearInterval(timer)||console.log(timer)||alert('Game Over'),200))&&(e=>direction=snake[1]-snake[0]==(move=[-1,-20,1,20][(e||event).keyCode-37]||direction)?direction:move))((newFood)=>snake.unshift(move=snake[0]+direction)&&snake.indexOf(move,1)>0||move<0||move>399||direction==1&&move%20==0||direction==-1&&move%20==19?false:(draw(ctx,move,"green")||move==food?newFood()&draw(ctx,food,"red"):draw(ctx,snake.pop(),"Black"))!==[],()=>Array.from({length:8000}).some(e=>snake.indexOf(food=~~(Math.random()*400))===-1)))(document.getElementById('canvas').getContext('2d'),[42,41],43,1,null,(ctx,node,color)=>(ctx.fillStyle=color)&ctx.fillRect(node%20*20+1,~~(node/20)*20+1,18,18))

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6148657.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存