使用原生JS编写的贪吃蛇网页游戏代码解析

5 浏览量更新于2024-08-28 收藏 33KB PDF 举报

"原生js实现的贪吃蛇网页版游戏完整实例" 在本文中，我们将探讨如何使用原生JavaScript实现一个简单的贪吃蛇游戏。这个实例主要涉及的技术包括DOM操作、事件监听、数组操作以及基本的游戏逻辑。首先，HTML部分非常简单，只有一个`<html>`、`<head>`和`<body>`标签，没有具体的HTML内容，因为游戏界面将由JavaScript动态创建。游戏的核心代码位于`<script>`标签内，定义了一个名为`Star`的对象，该对象包含了游戏初始化、元素创建、布局设置、键盘事件处理、蛇的移动以及食物生成等关键功能。 `Star.init`是游戏的入口函数，它负责设置游戏的基本布局。`bigDiv`是一个绝对定位的元素，用于承载整个游戏区域。通过两个嵌套的`for`循环，创建了900x600像素的游戏网格，每个格子是一个30x30像素的`div`元素，这些元素被添加到`bigDiv`中，并存储在`Star.data.arrayAll`二维数组中，方便后续的游戏逻辑处理。 `Star.data.arrayAll`是一个存储游戏区域所有单元格的数组，每个单元格对应一个`div`元素，通过`setAttribute('number'，i*30+j)`为每个单元格分配一个唯一的编号，便于后续查找和更新。 `Star.pushEleInSelect`函数用于初始化蛇的位置，这里蛇的初始位置被设置在了(9, 15)、(9, 14)和(9, 13)这三个格子上。`this.keyBoard.apply(this, arguments);`设置了键盘事件监听，使得玩家可以通过键盘控制蛇的移动。`this.appearPoint();`和`this.leftGo();`分别用于生成新的食物点和启动蛇的初始移动。在游戏逻辑中，`appearPoint`函数负责生成随机的食物位置，确保食物不会出现在蛇的身体上。这涉及到对`Star.data.arrayAll`的遍历和检查，以确保新生成的食物位置为空。此外，游戏还可能包含其他功能，如判断游戏结束（蛇碰到边界或自己的身体）、更新蛇的位置、处理速度变化等。这些功能通常会通过更多的方法来实现，例如检查蛇头的位置，更新蛇的身体序列，以及处理用户输入的按键事件等。这个原生JavaScript实现的贪吃蛇游戏实例展示了如何利用JavaScript进行DOM操作、事件处理以及基本的游戏逻辑设计。通过学习和理解这个实例，开发者可以更好地掌握JavaScript在构建交互式网页应用中的能力。

原生原生js实现的贪吃蛇网页版游戏完整实例实现的贪吃蛇网页版游戏完整实例

本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下：

<html>

<head>

<title>原生js写的贪吃蛇网页版游戏</title>

</head>

<body>

</body>

Star = {

init:function(){

var bigDiv = this.appendEle(this.addStyle(this.creatEle(),

{w:'900',h:'600',p:'absolute',t:10,l:500}));

for(var i = 0; i<600/30;i++){

Star.data.arrayAll[i] = [];

for(var j = 0; j<900/30; j++){

div = this.addStyle(this.creatEle(),{w:(!+[1,] ? 30 :28),h:(!+[1,] ? 30 :28),f:'left',border:'1px solid #666'});

div.setAttribute('number', i*30+j)

this.appendEle(div,bigDiv)

Star.data.arrayAll[i][j] = div;

}

bigDiv = this.appendEle(this.addStyle(this.creatEle(),

{w:'900',h:'600',p:'absolute',t:10,l:500}));

this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])

this.keyBoard.apply(this,arguments);

this.appearPoint();

this.leftGo();

appearPoint:function(){

var arrayIn = [];

var number;

for(var i = 0; i<600; i++){

if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){

arrayIn.push(Star.data.arrayAll[i])

}

Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);

this.giveColor(number)

giveColor:function(number){

var div = Star.data.arrayAll[parseInt(number/30)][number%30];

Star.timeInterval.timeB = setInterval(function(){

if(div.className == 'shanshuo'){

div.className = ''

div.style.backgroundColor = '#fff'

}

else{

div.className = 'shanshuo';

div.style.backgroundColor = '#f00'

}

},500)

disappearColor:function(){

clearInterval(Star.timeInterval.timeB);

Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';

hasInArray:function(number,array){

for(var i in array){

if(array[i] instanceof Array){

if(this.hasInArray(number,array[i])){

return true;

}

if(array[i].getAttribute && array[i].getAttribute('number') == number) return true;

}

return false;

keyBoard:function(){

var self = this;

document.onkeydown = function(e){

e = e? e : window.event;

switch(e.keyCode){

case 37: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.leftGo(); break;

case 38: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.upGo();break;

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38514732

粉丝: 6
资源: 867

使用原生JS编写的贪吃蛇网页游戏代码解析

原生js网页版贪吃蛇游戏代码

原生JS网页贪吃蛇小游戏.zip

原生JS实现贪吃蛇小游戏

原生JavaScript实现贪吃蛇游戏

纯原生js实现贪吃蛇游戏

原生javascript制作贪吃蛇小游戏的方法分析

使用原生JavaScript编写的贪吃蛇网页游戏教程

Javascript实现贪吃蛇小游戏（含详细注释）

使用纯JavaScript实现贪吃蛇游戏

贪吃蛇游戏【原生JS】.zip

最新资源