原生javascript制作贪吃蛇小游戏的方法_F11 - 专业站长和开发者的学习网站

分享到

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

JavaScript 来源：互联网搜集作者：秩名发布时间：2020-02-27 16:21:46 人浏览

摘要

!--1、创建场景 -- !-- 2、定义初始数据以及随机食物 -- !-- 3、控制贪吃蛇方向 -- !-- 4、判断位置以及和随机食物的位置增加贪吃蛇长度 -- HTML部分 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3

< !-- 2、定义初始数据以及随机食物 -->
< !-- 3、控制贪吃蛇方向 -->
< !-- 4、判断位置以及和随机食物的位置增加贪吃蛇长度 -->

HTML部分

			?

								<!DOCTYPE html>

								<html lang="en">

								<head>

								  <meta charset="UTF-8">

								  <title></title>

								  <style>

								    html,body{

								      width: 100%;

								      height: 100%;

								      overflow: hidden;

								    }

								    * {

								      margin: 0;

								      padding: 0;

								    }

								    li{

								      width: 20px;

								      height: 20px;

								      border-radius: 50%;

								      background: chocolate;

								      position: absolute;

								      left: 240px;

								      top: 60px;

								      z-index: 1;

								      list-style: none;

								    }

								    #box{

								      position: absolute;

								      left:240px;

								      top: 50px;

								      width:800px;

								      height:600px;

								    }

								  </style>

								</head>

								<body>

								  <span>

								    游戏玩法：上下左右控制小蛇的方向。

								    撞到边缘游戏结束。

								    长按方向键即可加速。

								  </span>

								  <ul id="box">

								    <li></li>

								    <li></li>

								    <li></li>

								  </ul>

								</body>

js开始

			?

								function $(id){

								    return document.getElementById(id);

								  }

								  window.onload = function () {

								    // 创建背景

								    js_background();

								    // 随机食物

								    js_food();

								    // 创建贪吃蛇

								    create_snake();

								    document.onkeydown = function(event){

								      let evt = event || window.event;

								      switch (evt.keyCode) {

								        case 37:direction="left";break;

								        case 38:direction="up";break;

								        case 39:direction="right";break;

								        case 40:direction="down";break;

								        default:;

								        // console.log(evt.keyCode);

								      }

								      start_snake()

								    }

								  }

//贪吃蛇方向// 创建背景

			?

								// 贪吃蛇方向// 创建背景

								  var direction = "right";

								  // 创建背景

								  function js_background(){

								    let bg = document.createElement("div");

								    bg.id = "js_bg";

								    bg.style.cssText = "position:relative;margin :50px auto; background:skyblue; width:800px; height:600px;";

								    document.body.appendChild(bg);

								  }

//随机食物

			?

								var food_left = 0;

								  var food_top = 0;

								  function js_food(){

								    food_left = parseInt(Math.random()*800/20)*20;

								    food_top = parseInt(Math.random()*600/20)*20;

								    let foodDiv = document.createElement("div");

								    foodDiv.style.cssText = "position:absolute;width:20px; height: 20px; border-radius:50%; background:yellow;";

								    foodDiv.style.left = food_left+"px";

								    foodDiv.style.top = food_top+"px";

								    foodDiv.id = "foodDiv";

								    $("js_bg").appendChild(foodDiv);

								  }

//创建贪吃蛇

			?

								function create_snake(){

								    let lis = document.getElementsByTagName("li");

								    lis[0].style.backgroundColor = "black";

								    lis[0].style.zIndex = 1;

								    for(let i = 0; i < lis.length; i++){

								      lis[i].style.left = 280-(i*20)+"px";

								      lis[i].style.top = 60+"px";

								    }

								  }

//定时器

			?

								// 定时器

								let timre = setInterval(start_snake,200);

								let lis = document.getElementsByTagName("li");

								function start_snake(){

								  let left=parseFloat(lis[0].style.left);

								  let top= parseFloat(lis[0].style.top);

								  // console.log(top)

								  switch (direction) {

								    case "left":left = (left-20);break;

								    case "up":top = (top-20);break;

								    case "right":left = (left+20);break;

								    case "down":top = (top+20);break;

								    default:;

								  }

								  if(left<0 || left>800-20 || top<0 || top>600-20){

								      window.clearInterval(timre);

								      alert("亲，您Game Over");

								      return;

								  }

								  // for(let i = 1; i <= lis.length-1; i++){

								  //   lis[i].style.left = lis[i-1].style.left;

								  //   lis[i].style.top = lis[i-1].style.top;

								  // }

								  for(var i=lis.length-1;i>0;i--){

								    lis[i].style.left = lis[i-1].style.left;

								    lis[i].style.top = lis[i-1].style.top;

								  }

								  // 改变第一节

								  lis[0].style.left = left+"px";

								  lis[0].style.top = top+"px";

								  // console.log(food_top+"----------");

								  // console.log(top);

								  if(left == food_left && top == food_top){

								    eat();

								  }

								}

								function eat() {

								  $("js_bg").removeChild($("foodDiv"));

								  js_food();

								  // alert("ll");

								  let li = document.createElement("li");

								  $("js_bg").appendChild(li);

								  // create_snake();

								}

您可能感兴趣的文章 :

原文链接 : https://blog.csdn.net/mlonly/article/details/85213284

Tag : 小游戏(32)JavaScript(95)贪吃蛇(7)

Fabric.js实现变换视窗的示例介绍

引言 fabric.js可以通过viewportTransform属性配置画布的视窗属性。听上去很高级的样子，但其实这是原生canvas就已经存在的东西，fabric.js的vie
Vue.js前端路由和异步组件的介绍

文章目标 P6 针对react/vue能够根据业务需求口喷router的关键配置，包括但不限于：路由的匹配规则、路由守卫、路由分层等；能够描述清楚
Vue.js状态管理及SSR解析介绍

前端状态管理出现的意义及解决的问题随着前端应用的逐步复杂，我们的组件中需要使用越来越多的状态。有的时候我们需要使用子组件将
React项目中使用Redux的react-redux

背景在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库如果将两者连接在一起，可
javascript手机验证、邮箱验证、密码验证的正则表

javascript【手机验证】、【邮箱验证】、【密码验证】的正则表达式的封装：【手机验证】：以下代码是验证手机号码的正则表达式的方法，
Jest如何支持异步及时间函数的实现

异步支持在前端开发中，我们会遇到很多异步代码，那么就需要测试框架对异步必须支持，那如何支持呢？ Jest 支持异步有两种方式：回调
JavaScript对象新增方法defineProperty与keys的使用说明

这两个方法可以让我们更方便的操作对象，获取对象属性，赋值修改等等操作，最重要的是，这些方法可以让我们设置无法修改对象属性值
vue+elementUI封装一个根据后端变化的动态table(完整

效果图：使用组件，启用自动生成 :auto=true 自动生成-编辑（包括请求已经实现了）新增和删除也是一样 ps:如有额外的按钮可以用插槽实现
js数组去重常见的方法汇总(7种)

1、借助ES6提供的Set结构 new Set() 简单好用强烈推荐直接给一个新的数组里面，利用es6的延展运算符 1 2 3 4 5 6 7 8 9 var arr = [1,9,8,8,7,2,5,3,3,3,
Vue移动端实现调用相机扫描二维码或条形码的全

一、开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能（详见概述 | 微信开放文档），或者支