javascrip写的贪吃蛇

zhaozhaoli      2022-04-17     619

关键词:

原生JavaScript写的

贪吃蛇这个游戏好像就如同hello world一样,简单又有代表性,以前我学习c语言的时候,第一个做的趣味小游戏也是贪吃蛇---------------------------------

技术分享图片
 1 //贪吃蛇的食物模块
 2 (function(){
 3     var elements = []
 4     // 创建一个食物的构造函数
 5     function Food(x,y,width,height,color){
 6         // 食物方块的坐标
 7         this.x = x || 0;
 8         this.y = y || 0;
 9         // 没有传宽度和高度默认20
10         this.width = width || 20;    
11         this.height = height || 20;
12     
13         this.color = color || ‘green‘;
14     }
15     // 添加初始化方法
16     Food.prototype.init = function(map){
17         remove()
18         // 创建食物方块,添加到地图map里
19         var div = document.createElement(‘div‘)
20         map.appendChild(div);
21         // 设置样式和位置
22         div.style.width = this.width + ‘px‘;
23         div.style.height = this.height + ‘px‘;
24         div.style.backgroundColor = this.color;
25         div.style.position = "absolute";
26         this.x = Math.floor(map.offsetWidth/this.width*Math.random())*this.width;
27         this.y = Math.floor(map.offsetHeight/this.height*Math.random())*this.height;
28         div.style.left = this.x + ‘px‘;
29         div.style.top = this.y + ‘px‘;
30         // 每次创造出一个食物方块就把它push到一个数组中
31         // 删除的时候好找
32         elements.push(div)
33     }
34     // 移除食物函数
35     function remove(){
36         for(var i = 0; i<elements.length; i++){
37             var ele = elements[i]
38             // 找到该食物方块的父节点,从父节点删除该方块
39             elements[i].parentNode.removeChild(ele)
40             // 删除数组中的值
41             elements.splice(i,1)
42         }
43     }
44     // 将构造函数暴露给window,不然new不到Food
45     window.Food = Food;
46 }())
food.js
技术分享图片
 1 (function(){
 2     var element = []
 3     // 蛇的构造函数
 4     function Snake(width,height,direction){
 5         this.width = width || 20;
 6         this.height = height || 20;
 7         this.direction = direction || ‘right‘
 8         this.body = [
 9             {x:3,y:1,color:‘red‘},
10             {x:2,y:1,color:‘orange‘},
11             {x:1,y:1,color:‘orange‘}
12         ]
13     }
14     Snake.prototype.init = function(map){
15         // 在地图上画蛇之前把之情画的蛇删除
16        remove()
17     //    在地图上画出蛇
18         for(var i = 0; i < this.body.length; i++){
19             var div = document.createElement(‘div‘);
20             map.appendChild(div)
21             div.style.backgroundColor = this.body[i].color;
22             div.style.width = this.width + ‘px‘;
23             div.style.height = this.height + ‘px‘;
24             div.style.position = "absolute"
25             div.style.left = this.body[i].x * this.width +‘px‘
26             div.style.top = this.body[i].y* this.width +‘px‘
27             element.push(div)
28         }
29         
30     }
31     // 蛇每移动一次就要在地图上画一次
32     // 即move()后就要init()
33     // 如果不删除之前画的蛇,就会越来越长
34     var remove = function(){
35         var i = element.length -1
36         for( ; i >=0; i--){
37             var ele = element[i];
38             element[i].parentNode.removeChild(ele)
39             element.splice(i,1)
40         }
41     }
42     // 蛇移动方法
43     Snake.prototype.move = function(food,map){
44         var i = this.body.length -1;
45         // 蛇身的改变
46         for( ; i>0; i--){
47             this.body[i].x = this.body[i-1].x;
48             this.body[i].y = this.body[i-1].y
49         }
50         // 根据方向改变蛇头值
51         switch(this.direction){
52             case ‘right‘: this.body[0].x +=1;break;
53             case ‘left‘: this.body[0].x -=1;break;
54             case ‘up‘: this.body[0].y -=1;break;
55             case ‘down‘: this.body[0].y +=1;break;
56         }
57         // 每次移动后蛇头坐标
58         var headX = this.body[0].x*this.width;
59         var headY = this.body[0].y*this.height;
60         // 吃到食物后
61         if(headX == food.x && headY ==food.y){
62             var lastBody = this.body[this.body.length-1];
63             // 把最后一节蛇身复制,push到蛇的body中
64             this.body.push({
65                 x:lastBody.x,
66                 y:lastBody.y,
67                 color:lastBody.color
68             })
69             // 再画一个食物
70             food.init(map)
71         }
72     }
73     window.Snake = Snake;
74 }())
snake.js
技术分享图片
 1 (function(){
 2     // 总的接口
 3     function Game(map){
 4         this.food = new Food;
 5         this.snake = new Snake;
 6         this.map = map
 7     }
 8     // 初始化
 9     Game.prototype.init = function(){
10         this.food.init(this.map);
11        this.snake.init(this.map);  
12         this.runSnake(this.map,this.food);
13         this.keyDown()
14     }
15     // 让蛇跑起来
16     Game.prototype.runSnake = function(map,food){
17         var timeId = setInterval(()=>{
18             this.snake.move(food,map);
19             this.snake.init(map);
20             var mapX = map.offsetWidth / this.snake.width -1;
21             var mapY = map.offsetHeight / this.snake.height -1;
22             var headX = this.snake.body[0].x;
23             var headY = this.snake.body[0].y;
24             console.log(‘蛇头‘+headX+‘,‘+headY+‘--------地图‘+mapX+mapY)
25             // 如果撞到边框,停止定时器,游戏结束
26             if(headX < 0 || headX >mapX || headY < 0 || headY > mapY){
27                 alert(‘err‘)
28                 clearInterval(timeId)
29             }
30         },100)
31     }
32     // 按下按键改变方向
33     Game.prototype.keyDown = function(){
34         // 注册一个keydown事件
35         document.addEventListener(‘keydown‘,(e)=>{
36            switch(e.keyCode){
37             case 65: this.snake.direction = ‘left‘;break;
38             case 68: this.snake.direction = ‘right‘;break;
39             case 87: this.snake.direction = ‘up‘;break;
40             case 83: this.snake.direction = ‘down‘;break;
41            }
42         },false)
43     }
44 window.Game = Game;
45 }())
game.js
技术分享图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         /* 地图样式 */
10     .map {
11         width: 800px;
12         height: 500px;
13         background: #ccc;
14         position: relative;
15         margin: auto;
16       
17     }
18     
19     </style>
20 </head>
21 <body>
22     <!-- 首先在页面上画出一个框框作为地图 -->
23     <div class=‘map‘>
24       
25     </div>
26     <!-- 引入食物组件 -->
27     <script src="./food.js"></script>
28     <!-- 引入小蛇组件 -->
29     <script src="./snake.js"></script>
30     <!-- 游戏初始化组件 -->
31     <script src="./game.js"></script>
32     <script>
33         // 通过document选择器把地图选中
34         var game = new Game(document.querySelector(.map));
35         // 初始化,详见game.js
36         game.init();
37        
38     </script>
39 </body>
40 </html>
snake.html

 

游戏game.js集成了food.js和snake.js---然后在snake.html中用game.init就好了

点击这里,我把源码上传到码云了

rust语言写的贪吃蛇游戏(代码片段)

首先新建工程,然后用vscode打开,命令如下:cargonewsnake--bin文件结构如下:Cargo.Toml文件内容如下:[package]name="snake"version="0.1.0"edition="2021"#Seemorekeysa 查看详情

html5+css+js贪吃蛇demo(代码片段)

我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过!这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生JavaScript写的,没有使用JQuery。重... 查看详情

qt下的贪吃蛇

 QT写的贪吃蛇,学习于https://www.devbean.net/2012/12/qt-study-road-2-snake-1/建议就学习一下开发思想,开发游戏还是用专门的编译器。多加了墙,暂停和开始,方向相反当碰撞没有思路解决,有空的时候再弄一下 源码地址:https://... 查看详情

javagui实现贪吃蛇(代码片段)

...础,并且会写一些简单的逻辑操作。这些都会在后面写的时候体现出来。狂神老师从这里开始讲贪吃蛇的我们在看视频的时候都知道,视频是一帧一帧播放的,一般我们看动画的帧率是每秒24帧。我们在GUI中实现帧率... 查看详情

贪吃蛇小游戏程序(c语言)(代码片段)

这次来分享一个我写的贪吃蛇小游戏程序(C语言)最近暑假无事开始用C语言写一些小游戏小游戏程序,这个贪吃蛇当然是经典中的经典,所以先开始写。文件引用#include<redio.h>//输入输出#include<time.h>//用... 查看详情

手起刀落-一起来写经典的贪吃蛇游戏

...终于有能力把他做出来(从来都没有通关过,不知道自己写的程序,是不是能通关了...),好了,闲话不多谈,先来看一下效果吧!!功能和小时候玩的贪吃蛇一样,1、选择速度slownormalfast2、选择是否有墙作为障碍物onoff看完效果... 查看详情

#夏日挑战赛#openharmony基于js实现的贪吃蛇(代码片段)

...就敲代码吧,写个贪吃蛇,很显然,被自己菜哭了,自己写的贪吃蛇自己都不会玩(ps:我曾经可是在不会死亡的情况下完了好长时间>_<)实现效果如下::::hljs-center:::具体实现思路容器初始化在onShow钩子函数那里获取到游戏容... 查看详情

使用vb创建贪吃蛇

    贪吃蛇作为一个经典游戏,在其开发成功后,有很长一段时间令很多人为之振奋,但随着时间的流逝,贪吃蛇也逐渐淡出人们的视野。本次,我利用VB重现贪吃蛇的创建。主要使用到的控件:Label标签,Command按... 查看详情

一条贪吃蛇的使命——零基础入门贪吃蛇游戏(代码片段)

零基础入门贪吃蛇游戏贪吃蛇是一款最常见、最经典、最受欢迎的小游戏之一。本篇文章带你零基础实现贪吃蛇游戏,一条蛇的使命从这里开始。1、游戏描述????贪吃蛇是一款非常经典的休闲类游戏。在一块固定大小的区域内,... 查看详情

一条贪吃蛇的使命——零基础入门贪吃蛇游戏(附演示地址)(代码片段)

零基础入门贪吃蛇游戏贪吃蛇是一款最常见、最经典、最受欢迎的小游戏之一。本篇文章带你零基础实现贪吃蛇游戏,一条蛇的使命从这里开始。演示地址:贪吃蛇演示,可能会提示危险操作,请忽略,放心访问。1、游戏描述??... 查看详情

“贪吃蛇”

“贪吃蛇”小游戏HTML5贪吃蛇游戏页面结构以保存对javascript的些许理解/****************//*****game.js****//****************/Array.prototype.remove = function (obj) {    for (var i 查看详情

贪吃蛇

  无聊发现自己没写过贪吃蛇,于是做了一个简单的贪吃蛇,并不打算做完整版的(只能看到贪吃蛇不断的从上往下移动)。。  效果(截图软件的问题,会有前一帧的印记):  代码:#include<iostream>#include<windows.h... 查看详情

我也来写一个贪吃蛇

...作量好大,好忙,趁周末练练手,花了近3小时写了一个贪吃蛇。  实现贪吃蛇的功能很简单。  我就分享一下我实现贪吃蛇看起来在界面上移动并且吃食物长大的原理。  我建了一个数组list_arr[]来保存贪吃蛇所在的每个... 查看详情

结对-贪吃蛇游戏-测试过程

贪吃蛇游戏托管平台地址:https://gitee.com/a540816440/codes/kuizlv3wfc5eyx8gopmhd70功能测试:移动功能,测试方法:使用键盘上的,方向键,是否贪吃蛇可以移动。  功能测试:分数功能测试方法:当贪吃蛇吃掉食物是否分数会有增加 ... 查看详情

结对-贪吃蛇游戏-需求分析

结对编程--贪吃蛇需要安装pythonpygame需求分析:玩家用键盘“WASD”来控制贪吃蛇的方向,          贪吃蛇碰壁结束游戏,主要完成游戏的开始按钮,暂停按钮,退出按钮等功能 查看详情

结对-贪吃蛇游戏-需求分析

结对编程--贪吃蛇需要安装pythonpygame需求分析:玩家用键盘“WASD”来控制贪吃蛇的方向,          贪吃蛇碰壁结束游戏,主要完成游戏的开始按钮,暂停按钮,退出按钮等功能 查看详情

hdu4302贪吃蛇

贪吃蛇Holedoxisasmallanimalwhichcanbeconsideredasonepoint.ItlivesinastraightpipewhoselengthisL.Holedoxcanonlymovealongthepipe.Cakesmayappearanywhereinthepipe,fromtimetotime.WhenHoledoxwantstoeatcakes,ita 查看详情

经典游戏还原之:贪吃蛇

...nitymaker)您可以自由转载,但必须加入完整的版权声明!贪吃蛇与方块主要玩法:贪吃蛇吃食物,吃到食物后根据相应数值增加身体长度,如果贪吃蛇碰到方块后,根据方块的数值逐渐减少贪吃蛇 查看详情